css制作简易购物网页

效果展示：

制作头部：

html
<header> <ul> <li class="logo"><img src="images/logo.jpg"></li> <li><a
href="#">穿搭速递</a> </li> <li><a href="#">穿搭速递</a> </li> <li><a href="#">穿搭速递</a>
</li> <li><a href="#">穿搭速递</a> </li> <li><a href="#">穿搭速递</a> </li> <li><a
href="#">穿搭速递</a> </li> </ul> </header>
css
*{ margin: 0px; padding: 0px; } header{ width: 980px; height: 70px;
background-color: antiquewhite; border-bottom: 3px solid pink; margin: 0 auto;
} header ul{ width: 980px; margin: 0 auto; list-style-type: none;/*去除无序列表的·*/ }
header li{ float: left; } header ul img{ width: 135px; height: 100px;
margin-right: 40px; margin-left: -10px; border-radius: 50px; } header li a{
display: inline-block; height: 70px; text-decoration: none;/*去除下划线*/
line-height: 70px; width: 120px; text-align: center; color: hotpink; } header
li a:hover{ color: darkorange; font-size: 20px; }
随后是一张图片：

制作内容部分：

html:
<div class="content"> <div class="banner"><img src="images/banner.jpg"></div>
<div class="style_bg"> <div class="style"> <dl> <dt class="left1"></dt><dd
class="left2"><a href="#">明星风尚</a> </dd> <dt class="left3"></dt><dd
class="left4"><a href="#">时尚博主</a> </dd> </dl> <dl> <dt
class="center1"></dt><dd class="center2"><a href="#">流行搭配</a></dd> <dt
class="center3"></dt><dd class="center4"><a href="#">精选秀场</a></dd> </dl> <dl
class="third"> <dt class="right1"></dt><dd class="right2"><a
href="#">环球街拍</a></dd> </dl> </div> </div> </div>
css
.content{ width: 980px; margin: 0 auto; } .content .style_bg{ width: 908px;
height: 330px; background-color: darkorange; padding: 10px 36px 5px; } .banner
img{ width: 980px; height: 300px; margin-bottom: 20px; } .style{ width: 892px;
height: 314px; background-color: #ffffff; padding: 8px 10px 8px 6px; } .style
dl{ width: 279px; height: 313px; float: left; margin-left: 4px; } .style
.third{ width: 322px; } .style dt,.style dd{ float: left; } .style
.left1,.style .left3,.style .center1,.style .center3{ width: 162px; } .style
.left2,.style .left4,.style .center2,.style .center4,.style .right2{ width:
117px; } .style .left1,.style .left2,.style .center1,.style .center2{
margin-bottom: 8px; } .style .left1{ height: 169px; background:
url("../images/1.jpg") no-repeat; background-size: 100% 100%; } .style .left2{
height: 169px; line-height: 169px; } .style .left3{ height: 137px; background:
url("../images/2.jpg") no-repeat; background-size: 100% 100%; } .style .left4{
height: 137px; line-height: 137px; } .style .center1{ height: 169px;
background: url("../images/3.jpg") no-repeat; background-size: 100% 100%; }
.style .center2{ height: 169px; line-height: 169px; } .style .center3{ height:
137px; background: url("../images/4.jpg") no-repeat; background-size: 100%
100%; } .style .center4 { height: 137px; line-height: 137px; } .style .right1{
height: 314px; width: 190px; background: url("../images/5.jpg");
background-size: 100% 100%; } .style .right2{ height: 314px; line-height:
314px; } .style a{ display: block; text-align: center; background-color:
antiquewhite; color: #ec6e47; text-decoration: none; } .style a:hover{
background-color: pink; font-size: 20px; }
制作购物内容部分：

html
<h2 class="title">时尚前沿/Tidal Current</h2> <div class="current"> <div
class="sale"> <a href="#"><img src="images/1.2.jpg"></a> <div
class="price">¥588</div> <a href="#" class="introduce">it UNDER
GARDEN男连帽拉链冲锋衣2018春夏新品7205XAA</a> <div
class="salemount"><span>销售量：10</span></div> <div class="rate">评价：6</div> <div
class="buy"><a href="#">立即抢购</a></div> </div> <div class="sale"> <a
href="#"><img src="images/1.2.jpg"></a> <div class="price">¥588</div> <a
href="#" class="introduce">it UNDER GARDEN男连帽拉链冲锋衣2018春夏新品7205XAA</a> <div
class="salemount"><span>销售量：10</span></div> <div class="rate">评价：6</div> <div
class="buy"><a href="#">立即抢购</a></div> </div> <div class="sale"> <a
href="#"><img src="images/1.2.jpg"></a> <div class="price">¥588</div> <a
href="#" class="introduce">it UNDER GARDEN男连帽拉链冲锋衣2018春夏新品7205XAA</a> <div
class="salemount"><span>销售量：10</span></div> <div class="rate">评价：6</div> <div
class="buy"><a href="#">立即抢购</a></div> </div> </div>
css:
/*h2标题*/ .title{ font-family: 楷体; color: white; display: block;
background-color: #ec6e47; margin-top: 20px; margin-left: 117px; width: 275px;
height: 50px; line-height: 50px; } /*总体*/ .current{ height: 542px; width:
957px; background-color: #FCF; padding: 10px 36px 5px; position: relative;
margin: 0 auto; } /*第一个div*/ .current .sale{ margin: 20px 8px 0px; width:
260px; height: 458px; padding: 20px; background-color: white; border: 1px solid
darkorange; float: left; } .current img{ width: 253px; height: 278px; } /*价格*/
.current .price{ color: red; font-weight: bold; } /*介绍*/ .current .introduce{
color: deepskyblue; font-weight: normal; text-decoration: none; font-family:
汉仪柳楷繁; display: block; margin: 10px auto; } /*销售量*/ .current .salemount{ float:
left; height: 20px; font-size: smaller; width: 120px; border-right:#CCC solid
1px; line-height: 20px; margin-bottom: 6px; margin-left: 10px; } /*评价*/
.current .rate{ float: left; color: darkorange; height: 20px; line-height:
20px; font-size:18px; margin-left: 20px; margin-bottom: 20px; } .current .buy{
clear: both; height: 20px; line-height: 20px; width: 145px; text-align: center;
padding: 5px 0px; margin: 0px auto; background-color: darkorange;
border-radius: 30px; border: 2px solid red; } .current .buy a{ color: white;
text-decoration: none; } .current .buy:hover{ background-color:coral;
font-size:large; cursor:pointer; } .current .introduce:hover{ text-decoration:
underline; }

• « 上一篇：pandas: DataFrame 删除重复的行
• » 下一篇：到底什么是L2 Norm