静态页面——Annil

页面效果

HTML

    
    
    
    


    

        

            

                
                男童
                女童
                小童
                婴童
                家居 
            
            

                关于annil
                新闻资讯
                会员权益
                加盟招商
                投资者关系
                旗舰店
            
  
        
        
    
    

        

        

            
            
        
    
    

        

            

                

                    
                    

                    男大童
                    女大童
                    明星单品
                
            
            
            
Annil 2019春夏新品
            
明星单品
        
        

            
            
Annil 2019春夏新品
            
女大童
        
        

            
            
Annil 2019春夏新品
            
男大童
        
    
    

        

            

                

                    
                    

                    男小童
                    女小童
                    配饰
                
            
            
            
Annil 2019春夏新品
            
配饰
        
        

            
            
Annil 2019春夏新品
            
婴童
        
        

            

                
                
Annil 2019春夏新品
                
男小童
            
            

                
                
Annil 2019春夏新品
                
女小童
            
        
    
    

        

            

                

                    
                    

                    家居
                    内衣
                
            
            
        
        

            
            
Annil 2019春夏新品
            
家居
        
        

            
            
Annil 2019春夏新品
            
内衣
        

    
    

    

        

            
Store Image
            
        
        

            
Prduct Video
            
        
        

            
Annil TV
            
        
    
    

        

            
实用信息
            

            会员权益
            售后服务
            加盟招商
            招贤纳士
        
        

            
网上商城
            

            天猫
            唯品会
            微商城
        
        

            
联系我们
            

            0755-28895666
            0755-28896696
            www.annil.com
            [email protected]
            深圳市安奈儿股份有限公司
            深圳市龙岗区坂田街道雪岗路2018号
            天安云谷产业园区一期3栋A座16楼
        
        

            
友情链接
            

            牧星策划
        
        

        

            
关注我们
            

            

                

                    
                    安奈儿微博
                
                

                    
                    安奈儿微博
                
            
            
            
            
            
        
        

        

            ?COPYRIGHT 2014
            粤ICP备05082467号
            技术支持：牧星策划
        
    
    

    
    
        
    
    

CSS

body,p{
    margin: 0;
}
*{
    font-style: 微软雅黑;
}
header{
    width: 100%;
    height: 30px;
    background-color: black;
}
.header_nav{
    width: 1400px;
    overflow: hidden;
    margin: auto;
}
.header_left{
    float: left;
}
.header_right{
    float: right;
}
.header_left a,.header_right a{
    display: block;
    float: left;
    text-decoration: none;
    font-size: 14px;
    color: white;
    line-height: 30px;
}
.header_left a{
    margin-right: 25px;
}
.header_right a{
   margin-left: 25px;
}
.bz{
    width: 1400px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 45px;
    margin-top: 15px;
}
.bz .logo{
    width: 127px;
    height: 35px;
    background-image: url(../images/qm/切片/logo.gif);
    background-repeat: no-repeat;
    margin: auto;
}
.bz .fj{
    display: block;
    width: 1400px;
    height: 578px;
    margin-top: 15px;
    position: relative;
}
.fj .fj_l{
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 1%;
    top: 48%;
}
.fj .fj_r{
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 1%;
    top: 48%;
}

.tro_1,.tro_2,.tro_3,.tro_4{
    width: 1400px;
    overflow: hidden;
    margin: auto;
}
.tro_1 .tro_nav,.tro_2 .tro_nav,.tro_3 .tro_nav{
    width: 446px;
    overflow: hidden;
    float: left;
}
.tro_1 .tro_nav:nth-child(2),.tro_2 .tro_nav:nth-child(2),.tro_3 .tro_nav:nth-child(2){
    margin-left: 31px;
    margin-right: 30px;
}
.tro_nav .js{
    width: 446px;
    height: 316px;
    background-color:#f5f3f3;
}
.js .kirt{
    width: 113px;
    overflow: hidden;
    margin: auto;
    padding-top: 80px;
}
.kirt .x{
    width: 20px;
    height: 10px;
    border-bottom: #bfbfbf 1px solid;
    margin: auto;
}
.kirt a{
    display: block;
    width: 113px;
    height: 20px;
    text-decoration: none;
    text-align: center;
    font-size:14px;
    font-weight: bold;
    color: black;
    margin-top: 5px;
}
.tro_nav .dp{
    width: 446px;
    height: 296px;
    display: block;
    margin-top: 16px;
}
.tro_nav p{
    font-size: 14px;
    color: #666666;
    margin-top: 15px;
}
.tro_2,.tro_3{
    margin-top: 50px;
}
.tro_nav .sm{
    width: 446px;
    overflow: hidden;
    margin-bottom: 30px;
}
.fe{
    width: 1400px;
    height: 70px;
    margin: auto;
    border-bottom: 1px solid #bfbfbf;
}
.tro_4{
    margin-top: 54px;
}
.tro_4 .nav{
    width: 440px;
    overflow: hidden;
    float: left;
}
.tro_4 .nav:nth-child(2){
    margin-left: 30px;
    margin-right: 31px;
}
.nav h2{
    margin: 0;
    padding: 0;
    font-size: 22px;
    color: #333333;
}
.nav a{
    display: block;
    margin-top: 20px;
}
.tro_5{
    width: 100%;
    overflow: hidden;
    background-color:#f6f6f6;
    margin-top: 42px;
}
.tro_5 .ys{
    overflow: hidden;
    float: left;
    margin-top: 70px;
}
.tro_5 .sx{
    width: 62px;
    height: 177px;
    border-left: black 1px solid;
    float: left;
    margin-top: 70px;
}
.tro_5 .ys:nth-child(1){
    margin-left: 180px;
}
.tro_5 .ys:nth-child(2){
    margin-left: 100px;
    margin-right: 100px;
}
.tro_5 .ys:nth-child(3){
   margin-right: 45px;
}
.tro_5 .ys:nth-child(4){
    margin-right: 108px;
}
.ys .fex{
    width: 26px;
    height: 10px;
    border-bottom: #999999 1px solid;
    margin-bottom: 10px;
}
.ys h6{
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: black;
}
.ys a{
    display: block;
    font-size: 12px;
    color: #666666;
    margin-bottom: 14px;
    text-decoration: none;
}
.ys .box{
    width: 555px;
    overflow: hidden;
}
.box .tu{
    float: left;
}
.box .tu:nth-child(1){
    margin-right: 35px;
}
.tu a{
    display: block;
    margin-top: 15ox;
}
.tro_5 .fex1{
    width: 1122px;
    height: 44px;
    border-bottom: solid 1px #e4e4e4;
    margin: auto;
    margin-top: 280px;
}
.tro_5 .xx{
    width: 400px;
    height: 20px;
    margin: auto;
    margin-top: 24px;
    margin-bottom: 15px;
}
.xx span{
    font-size: 12px;
    color: #666666;
}
.xx span:nth-child(2){
    margin-left: 20px;
    margin-right: 50px;
}
footer{
    width: 100%;
    height: 20px;
    background-color: black;
}
.dl{
    display: block;
    width: 32px;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left:46% ;
}
.dr{
    display: block;
    width: 32px;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left:48% ;
}
.ys .tel{
    height: 20px;
    background-image: url(../images/qm/切片/icon-tel.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .fox{
    height: 20px;
    background-image: url(../images/qm/切片/icon-fox.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .site{
    height: 20px;
    background-image: url(../images/qm/切片/icon-site.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .mail{
    height: 20px;
    background-image: url(../images/qm/切片/icon-mail.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .adder{
    height: 20px;
    background-image: url(../images/qm/切片/icon-adder.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}