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">&yen;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">&yen;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">&yen;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;
        }