制作电商页面（Html）
- 开源代码
- 2025-08-17 12:57:01
任务
制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。
网站所买物品：书籍
色调：#FF2400 橙红色
代码主页HTML代码：
<html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/1.css"/> </head> <body> <div class="a"> <div class="c1 c2"> <div class="b1"> <p class="c6"> <img src="img/文集logo.jpg" width=160px; height=80px; > </p> <div class="b10"> <p class="b2"> 全部商品分类 </p> <p > <ul class="b3" type="circle"> <li>名家作品</li> <li>青春文学</li> <li>外国名著</li> <li>考公考编</li> <li>教辅资料</li> </ul> </p> </div> </div> <div class="b4"> <p class="b5"> <input type="text" placeholder="白夜行" class="b6"> <!--制作搜索框--> <button class="b7">搜素</button> </p> <p class="b8"> <span class="b9">图书</span> <span class="b9">电子书</span> <span class="b9">教辅</span> <span class="b9">漫画</span> <span class="b9">周边</span> <img src="img/封面图.jpg" width=500px; height=280px;> </p> </div> <div class="e1"> <div class="e2"> <p class="e4">购物车</p> <p class="e5">登录/注册</p> </div> <div class="e3"> <p class="e6">排行榜</p> <ol class="e7"> <li>《生死疲劳》</li> <li>《晚熟的人》</li> <li>《我与地坛》</li> <li>《蛤蟆先生去看心理医生》</li> </ol> </div> </div> </div> <div class="c1 c3"> <div class="d1"> 图书/电子书 </div> <div class="d2"> <div class="d3"> <dt class="d4"><img src="img/图书1.jpeg" width=150px; height=180px; ></dt> <dd class="d6" > <a href="specifics.html">《我的职业是小说家》</a></dd> <dd class="d5">¥25</dd> </div> <div class="d8"> <p class="d7"><img src="img/图书2.jpg" width=100px; height=80; alt=""> <span class="d9">余华《活着》</span></p> <p class="d7"><img src="img/图书3.jpeg" width=100px; height=80; alt=""> <span class="d9">鲁迅《故事新编》</span></p> <p class="d7"><img src="img/图书4.jpeg" width=100px; height=80; alt=""> <span class="d9">莫言《晚熟的人》</span></p> <p class="d7"><img src="img/图书5.jpg" width=100px; height=80; alt=""> <span class="d9">当年明月《明朝那些事儿》</span></p> <p class="d7"><img src="img/图书6.jpeg" width=100px; height=80; alt=""> <span class="d9">张嘉佳《从你的全世界路过》</span></p> <p class="d7"><img src="img/图书7.jpg" width=100px; height=80; alt=""> <span class="d9">《读者》杂志</span></p> </div> <div class="d10"> <div class="d11"></div> <p class="d12"><a href="">更多>>></a></p> </div> </div> </div> <div class="c1 c4"> <div class="d1"> 教辅/考证 </div> <div class="d2"> <div class="d3"> <dt class="d4"><img src="img/教辅5.jpeg" width=150px; height=180px; ></dt> <dd class="d6" > <a href="specifics2.html">《二级office高级应用》</a></dd> <dd class="d5">¥30</dd> </div> <div class="d8"> <p class="d7"><img src="img/教辅1.jpeg" width=100px; height=80; alt=""> <span class="d9">事业编综合应用能力教材</span></p> <p class="d7"><img src="img/教辅2.jpeg" width=100px; height=80; alt=""> <span class="d9">考研《数学基础过关660题》</span></p> <p class="d7"><img src="img/教辅3.jpeg" width=100px; height=80; alt=""> <span class="d9">《英语六级翻译30天速成》</span></p> <p class="d7"><img src="img/教辅4.jpg" width=100px; height=80; alt=""> <span class="d9">《教师职业能力测验》</span></p> <p class="d7"><img src="img/教辅6.jpeg" width=100px; height=80; alt=""> <span class="d9">《英语四级阅读理解》</span></p> <p class="d7"><img src="img/教辅7.jpg" width=100px; height=80; alt=""> <span class="d9">《驾考宝典》</span></p> </div> <div class="d10"> <div class="d11"></div> <p class="d12"><a href="">更多>>></a></p> </div> </div> </div> <div class="c1 c5"> <div class="d1"> 漫画/周边 </div> <div class="d2"> <div class="d3"> <dt class="d4"><img src="img/漫画5.jpg" width=150px; height=180px; ></dt> <dd class="d6" > <a href="specifics3.html">《撒野》小说</a></dd> <dd class="d5">¥35</dd> </div> <div class="d8"> <p class="d7"><img src="img/漫画1.jpg" width=100px; height=80; alt=""> <span class="d9">《撒野》相框</span></p> <p class="d7"><img src="img/漫画2.jpg" width=100px; height=80; alt=""> <span class="d9">《偷偷藏不住》贴纸</span></p> <p class="d7"><img src="img/漫画3.jpeg" width=100px; height=80; alt=""> <span class="d9">《狐妖小红娘》联名装饰品</span></p> <p class="d7"><img src="img/漫画4.jpeg" width=100px; height=80; alt=""> <span class="d9">《难哄》明信册</span></p> <p class="d7"><img src="img/漫画6.jpg" width=100px; height=80; alt=""> <span class="d9">《知音漫客》杂志</span></p> <p class="d7"><img src="img/漫画7.jpg" width=100px; height=80; alt=""> <span class="d9">《魔道祖师》钥匙扣</span></p> </div> <div class="d10"> <div class="d11"></div> <p class="d12"><a href="">更多>>></a></p> </div> </div> </div> </div> </body> </html>主页CSS代码
*{ padding:0; margin:0; } .a{width:1000px; height:1800px; border:0px solid black; margin:0px auto;} .c1{width:900px; border:3px solid #E47833; margin-left:20px; margin-top:8px;} .c2{height:450px; width:950px; margin-top:30px;} .c3{height:380px; width:950px; margin-top:30px;} .c4{height:400px; width:950px; margin-top:30px;} .c5{height:400px; width:950px; margin-top:30px;} .c6{ border:0px solid black; width:160px; height:80px; margin:5px; } .b1{ width:200px; height:360px; margin-top:10px; margin-left:10px; border:0px solid black; float:left; } .b2{ width:100px; margin-left: 5px; margin-top: 15px; padding:5px; border:0px solid gray; } .b3{ width:150px; height: 200px; margin-left: 5px; margin-top: 5px; padding-left:10px; border:0px solid gray; } .b4{ width:550px; height:430px; border:0px solid cadetblue; float:left; margin:5px; } .b5{ width:500px; height:80px; border:0px solid gray; margin:10px; } .b6{ width:350px; height:30px; margin-top:20px; margin-left:15px; border:2px solid #FF2400; font-size: 15px; } .b7{ width:40px; height:30px; margin-left:5px; background-color: #FF2400; position:absolute; margin-top:20px; margin-bottom:auto; text-align:center; border:0px; font-size:15px; } .b8{ width:500px; height:300px; border:0px solid black; margin-left:5px; padding:5px; } .b9{ width:30px; height:30px; border:0px solid gray; margin-top:5px; } .b9:hover{ background-color: grey; } .b10{ background-color: gray; } .d1{ width:850px; height:35px; border:0px solid black; margin:10px; font-size:25px; text-align:left; } .d2{ width:870px; height:300px; margin:10px; border:0px solid #856363; } .d3{ width:200px; height:280px; margin:10px; border:2px solid #6B4266; float:left; } .d4{ margin:5px; text-align: center; } .d5{ color:#FF0000; text-align: center; } .d6{ text-align:center; font-size:20px; } .d6:hover{ background-color: #FF7F00; } .d7{ float:left; margin-top:10px; margin-left:20px; width:150px; height:120px; border:0px solid #3299CC; text-align:left; padding:5px; } .d8{ width:550px; height:280px; margin:10px; border:2px solid #6B4266; float:left; padding:5px; text-align:center; } .d9{ font-size:10px; padding:1px; float:left; } .d9:hover{ background-color: #FF7F00; } .d10{ width:60px; height:280px; border:0px solid black; font-size:10px; margin-bottom:5px; margin-top:10px; text-align:center; float:left; padding-bottom: 5px; } .d11{ width:40px; height:250px; border:0px solid black; margin:2px; } .d12{ color:cornflowerblue; } .d12:hover{ background-color: #FF7F00; } .e1{ width:150px; height:400px; border:0px solid black; float:left; margin:10px; } .e2{ width:130px; height:50px; border:0px solid black; margin:5px; } .e3{ width:130px; height:250px; border:0px solid black; margin-top:40px; margin-left:5px; } .e4{ width:50px; height:30px; border:0px solid black; margin-top:5px; float:left; font-size: 10px; padding-top:2px; } .e5{ width:70px; height:30px; border:0px solid black; margin-left:2px; margin-top:5px; float:left; font-size:10px; padding-top:2px; } .e6{ width:70px; height:30px; border:0px solid black; font-size:15px; padding-top:10px; margin-bottom:5px; margin-left:0px; } .e7{ width:100px; height:150px; border:0px solid black; font-size:10px; padding-top:10px; margin:5px; }商品详情页HTML代码
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/2.css"/> </head> <body> <div class="w"> <div class="t1"> <img src="img/图书1.jpeg" alt="" width=250px; height=350px;> </div> <div class="t2"> <div class="t3"> <dd class="t4">书名：《我的职业是小说家》</dd> <dd class="t5">作者：村上春树</dd> <dd class="t6">价格</dd> <dd class="t7"> ¥25 </dd> </div> <div class="t8"> <button class="t10">立即购买</button> <button class="t9">加入购物车</button> </div> </div> </div> </body> </html>商品详情页CSS代码
*{ padding:0; margin:0; } .w{ width:700px; height:500px; border:2px solid #FF2400; margin-left:0px; } .t1{ width:300px; height:400px; border:0px solid black; margin-left:5px; margin-top:5px; float:left; padding-left:10px; padding-top:10px; } .t2{ width:250px; height:400px; margin-top:10px; margin-left:10px; border:0px solid black; float:left; } .t3{ width:220px; height:250px; margin-top:30px; margin-left:10px; border:0px solid black; } .t4{ width:200px; height:50px; margin-top:10px; margin-left:5px; border:0px solid black; } .t5{ width:200px; height:50px; margin-top:10px; margin-left:5px; border:0px solid black; } .t6{ width:60px; height:50px; margin-top:10px; margin-left:5px; border:0px solid black; float:left; } .t7{ width:60px; height:50px; margin-top:10px; margin-left:5px; border:0px solid black; float:left; color:red; } .t8{ width:220px; height:50px; margin-top:10px; margin-left:10px; border:0px solid black; } .t9{ width:80px; height:40px; margin:10px; border:2px solid deepskyblue; float:right; background-color: white; } .t10{ width:60px; height:40px; margin:10px 5px; border:2px solid deepskyblue; float:right; background-color: white; } 实现效果图制作电商页面（Html）由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“制作电商页面（Html）”
