本文共 6617 字，大约阅读时间需要 22 分钟。

样例

实现

html代码

商品

    
       
           
       
   
        
    
            
             
    
        
    
            
     
商品资料
        
    
        
    
            
             
    
        
    
            
             
    
    
   
    
   
        
    
            
     
                
      
                    
                           
                           
                           
                           
                       
      
            
      
               
       
                    
        
                    
        
                    
        
                    
        
             
       
         
      
            
     
        
    
        
    
            
     
                
      
100%全棉四件套ins风1.8m床单被套
 
      
                
      
￥108-158价格￥276起
      
                
      
尺寸: &nbsp适用床：1.2m
床被套：150*200 &nbsp床单:160*230 
      
                
      
数量：1
      
            
     
            
     
                
                      
      
查看商品详情
                
                  
     
        
    
    
   
            
        

register

    
       
           
       
   
        
    
            
             
    
        
    
            
     
注册
        
    
    
   
    
   
        
    
            
     
账户名称：
             
    
        
    
            
             
    
        
    
            
     
登录密码：
             
    
        
    
            
             
    
        
    
             
     
确认密码：
             
    
        
    
            
             
    
        
    
           
      
     
我已阅读并接受走秀网服务条款
        
    
         
         
   
   

css

商品

*{
       margin: 0;    padding: 0;    list-style: none;}#header{
       width:620px;    height:76px;    background-color: #D01279;    margin: 0 auto;    }.logo{
       width: 80px;    height: 76px;    float: left;    padding-left: 20px;}#logo{
       padding-top: 23px;}.tittleText{
       width: 260px;    height: 76px;    float: left;}#tittleText{
       margin-top: 20px;    margin-left: 135px;    font-size: 30px;    color: #fefafe;}.cart{
       width: 40px;    height: 76px;    float: right;    padding-right: 40px;}#cart{
       margin-top: 15px;}.peo{
       width: 40px;    height: 76px;    float: right;}#peo{
       margin-top: 15px;}/* 中间文章部分 */#article{
       width: 620px;    height: 934px;    /* background-color: cornflowerblue; */    margin: 0 auto;}/* 中间文章部分：轮播*/#article #banner{
       width:620px;    height:445px;    background-color: rgba(235, 154, 167, 0.158);    margin: 0 auto;}#article #banner #container{
       width:400px;    height:445px;    /* background:#f00; */    margin:0 auto;    /* border:1px solid #111; */    position: relative;    overflow:hidden;}#article #banner #container #pic{
       width:2000px;    height:400px;    margin:0 auto;    position:absolute;}#article #banner #container #pic img{
       float: left;}#article #banner #pageCaption{
       width:80px;    height:30px;    background-color: #BCBCBC;    position: relative;;    bottom:10;    margin-top: 410px;    margin-left: 150px;    border-radius: 20%;}#article #banner #pageCaption ul{
       width:80px;    margin:0 auto;    padding-left:7px;    /* overflow:hidden; */    /* background-color: cornflowerblue; */    }#article #banner #pageCaption ul li{
       list-style: none;    float: left;    width:10px;    height:10px;    /* background-color: cornflowerblue; */    border:1px solid white;    border-radius: 50%;    margin:6px 2px;    cursor:pointer;    /* //鼠标放上去变为小手 */}/* 中间文章部分：商品描述 */#article #discribe{
       width: 100%;    height: 489px;    /* background-color:teal; */}/* 中间文章部分：商品描述：上面文字部分 */#article #discribe div:first-child{
       width: 100%;    height: 409px;    background-color:#F2EFEF;    color:#4B4B4B;}/* 中间文章部分：商品描述：上面文字部分：对字体进行调整 */#article #discribe div:first-child p{
       font-size: 30px;    float: left;    margin: 20px 20px;}#article #discribe div:first-child p:nth-child(3){
       font-size: 20px;}#article #discribe div:first-child span:first-child{
       color: #BA0C54;    font-size: 30px;}/* 中间文章部分：商品描述：下部分查看商品详情 */#article #discribe div:last-child{
       width: 100%;    height: 80px;    /* background-color:wheat; */}#article #discribe div:last-child img:first-child{
       width: 10%;    margin:10px 10px;    float: left;}#article #discribe div:last-child p{
       font-size: 30px;    margin:20px 10px;    float: left;    color: #BBBBBB;}#article #discribe div:last-child img:last-child{
       width: 8%;    margin:14px 10px;    float: right;}/* 脚*/#footer{
       height: 80px;    width: 620px;    background-color: #A3A3A3;    margin: 0 auto;    padding-top: 15px;}/* 脚：对文字进行调整*/#footer P{
       font-size: 30px;    color: white;    width: 200px;    height: 60px;    text-align: center;    background-color: #F3008A;     border-radius: 5%;    margin-left: 200px;    padding-top: 12px;}

注册

*{
       margin: 0;    padding: 0;    list-style: none;}#header{
       width:620px;    height:76px;    background-color: #D01279;    margin: 0 auto;    }.logo{
       width: 80px;    height: 76px;    float: left;    padding-left: 20px;}#logo{
       padding-top: 23px;}.tittleText{
       width: 260px;    height: 76px;    float: left;}#tittleText{
       margin-top: 20px;    margin-left: 160px;    font-size: 30px;    color: #fefafe;}#article{
       width: 620px;    height: 1014px;    background-color:#F2EFEF;     margin: 0 auto;    padding-top: 50px;}#article div:nth-child(2n+1){
       width: 560px;    height: 80px;    margin: 0 auto;    background-color: white;    margin-bottom: 50px;    float: left;    margin-left: 30px;}#article div:nth-child(2n){
       width: 30px;    height: 80px;    margin: 0 auto;    /* background-color: red; */    float: right;    padding-top: 30px;}#article div:nth-child(2n+1) p{
       float: left;    font-size: 25px;    margin-top: 20px;    margin-left: 20px;}#article div:nth-child(2n+1) input{
       float: left;    font-size: 25px;    height: 50px;    margin-top: 15px;    border: none;}#article div:nth-child(7){
       background-color:#F2EFEF;}#article div:nth-child(7) input{
       float: left;    margin-left: 50px;    margin-top: 10px;}#article div:nth-child(7) p:last-child{
       float: right;    color: #C02060;    margin-right: 100px;}#footer{
       height: 80px;    width: 620px;    background-color:#F2EFEF;    margin: 0 auto;    padding-top: 15px;}#footer input{
       font-size: 30px;    color: white;    width: 550px;    height: 60px;    text-align: center;    background-color: #F3008A;    border-radius: 5%;    margin-left: 35px;    padding-top: 6px;}

完整文件

转载地址：http://pblwi.baihongyu.com/