css制作简易购物网页

效果展示：

制作头部：

html

    

        

        
穿搭速递 
        
穿搭速递 
        
穿搭速递 
        
穿搭速递 
        
穿搭速递 
        
穿搭速递 
    

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:

    

    

        

        

            
明星风尚 
            
时尚博主 
        
        

            
流行搭配
            
精选秀场
        
            

                
环球街拍
            
        
    

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

 
时尚前沿/Tidal Current
    

        

          
          
¥588
          it UNDER GARDEN男连帽拉链冲锋衣2018春夏新品7205XAA
          
销售量：10
          
评价：6
          
立即抢购
        
        

          
          
¥588
          it UNDER GARDEN男连帽拉链冲锋衣2018春夏新品7205XAA
          
销售量：10
          
评价：6
          
立即抢购
        
        

            
            
¥588
            it UNDER GARDEN男连帽拉链冲锋衣2018春夏新品7205XAA
            
销售量：10
            
评价：6
            
立即抢购
        
    

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;
        }