HTML＆CSS：制作简易电商网站

最近开始学习了写前端，HTML和CSS是前端的基础，所以用他们制作了一个简单的电商网站，目的在于细节学习和打牢基础。

先附上Code。 

链接：https://pan.baidu.com/s/1PkgHUghworqcus0LwAuFDw
提取码：b672

部分图：

 

 Code：

    亲，请登录
    免费注册



    购物车
    收藏夹
    卖家中心
    联系客服




 
    

        

            淘宝网
        
        

            
            搜索
        
    



    

        

            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
            
item/item/item
        
        

            
            

                
            
            

                
            
        
        
        

            

                

                Hi!你好
            
            

                注册 
                登录
                开店
            
            

            
公告
                长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。
                天之涯，地之角，知交半零落。一壶浊酒尽余欢，今宵别梦寒。
                长亭外，古道边，芳草碧连天。问君此去几时还，来时莫徘徊。
                天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多
                长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。
                天之涯，地之角，知交半零落。一壶浊酒尽余欢，今宵别梦寒。
                长亭外，古道边，芳草碧连天。问君此去几时还，来时莫徘徊。
                天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多
        
        
     


    

        
女装
        

            

                

            
            

                

            
            

                

            
            

                

            
        
    


    

        
男装
        

            

                

            
            

                

            
            

                

            
            

                

            
        
    


    

        
童装
        

            

                

            
            

                

            
            

                

            
            

                

            
        
    


    

        
潮牌
        

            

                

            
            

                

            
            

                

            
            

                

            
        
    


    

        
促销
        

            

                

            
            

                

            
            

                

            
            

                

            
        
    


    

       
 text text text
       
Whatever is worth doing is worth doing well.
    

 

* {
    -webkit-box-sizing: border-box;
box-sizing:border-box;
}
body
{
    font-size: 14px;
    color: #444444;
    background: #f9f9f9;
  
}
.container{
   display: block;   /*  显示 */
    max-width: 1080px;
     margin: 0 auto;  /*外边距 */
}
a{
    text-decoration: none;  /*  消除链接下划线  */
}
img {
    display: block;
    max-width: 100%;
}
.clearf:after,
.clearf:before
{
    content: "";
    display: block;
    clear: both;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

.col-1{
    width: 10%;
}
.col-2{
    width: 20%;
}
.col-3{
    width: 30%;
}
.col-4{
    width: 40%;
}
.col-5{
    width: 50%;
 }
.col-6{
    width: 60%;
}
.col-7{
    width: 70%;
}
.col-8{
    width: 80%;
}
.col-9{
    width: 90%;
}
.col-10{

    display: block;
    position: relative;
    min-height: 1px;
}
.bjcolor{
    background: #eee;
}
.bjcolor .item{
    display: inline-block;   
   padding: 6px 10px;     /*  填充 */
    color: #666;
}
.bjcolor .item-1{
    display: inline-block;   
    padding: 6px 10px;     /*  填充 */
     color: #dd182b;
}
 .bjcolor .item:hover{    /*鼠标触摸颜色加重 */
    color:#444;  
}
.search{
    display:block;
   padding: 20px 0;
}
.search .giff{
    font-size: 30px;
}
.search .search-bk {
    border:2px solid #dd182b;
}
.search .search-bk input,
.search .search-bk button{
    display: block;
    float: left;    
      border: 0; /*  边框 */
    padding: 10px;
    font-size: 20px;
}
.search .search-bk input {
    width: 80%;
}
.search .search-bk button {
    width: 20%;
    background: #dd182b;
}
.advert{
    background: #cccccc;
}
.advert .advert-fl{
    background:#6e6568;
    color: #ffffff;
}
.advert .advert-fl .item{
    padding: 17px 17px;
    
}
.advert .advert-fl .item:hover{
    color: #555555;
}
.advert .advert-dl .dl-hy{
    background: #6e6568;
   line-height: 100px; 
   color: #ffffff;
}
.advert .advert-dl .dl-hy .dl-tp{
    float: left;
    margin-right: 20px;
    
}
.advert .advert-dl .dl-butt{
    float: left;
    padding: 20px;
    background: #6e6568;
}
.advert .advert-dl .dl-butt .time{
    padding: 8px;
    color: #dd182b;
    font-size: 20px;
}
.advert .advert-dl .dl-gg 
{
    padding: 10px;
    background: #6e6568;
    color: #ffffff;
}
.advert .advert-dl .dl-gg .gg-g
{
    margin-left: 70px;
    padding: 13px;
    color: #dd182b;
}
.itemize{
    display:block;
}
.itemize .title::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 25px;
    background: #dd182b;
    padding-right: 5px;
    margin-right: 10px;
}
.itemize .title{
    font-size: 22px;
    margin-top: 20px;
}
.itemize .ize-giff{

}
.itemize  .timee
{
    padding: 10px;

}
.itemize .card{
    height: 300px;
    background: #cccccc;
    border-radius: 10px;

}
.foot{
    color: #999999;
    margin-top: 20px;
    padding: 10px;
     text-align: center; /* 字体居中 */
    background: #eee;
}

 box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。