任务
制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。
网站所买物品：书籍
色调：#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;
}实现效果图
文章来源：https://www.toymoban.com/news/detail-728102.html
文章来源地址https://www.toymoban.com/news/detail-728102.html
到了这里，关于制作电商页面（Html）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
