静态网页——Veer

页面效果

HTML

    
    
    
    


    

        

            照片
            插画
            矢量图
            设计素材
            免费专区
        
        

            价格
            帮助
            |
            

                收藏夹
                
            
            登录
            注册
        
        

    
    

    

        

            
精选内容
            选一张好图，让你的项目脱颖而出。
        
        

            

                

                    
                    风景图片
                
                

                    
                    科技图片
                
                

                    
                    城市矢量图
                

                    
                    母亲节矢量图
                
            
            

                
                国际护士节
            
            查看全部专题 >
        
        
热门活动
        

            
            
            
        

    
    

        

            

                

                

                    关于VEER
                    关于我们
                    产品介绍
                    合作伙伴
                
                

                    帮助中心
                    常见问题
                    购买套餐
                    联系我们
                
                

                    了解更多
                    内容授权协议
                    使用条款
                    隐私政策
                    友情链接
                
                

                  客服中心  
                  400-6868-200
                  在线客服
                

            
            

                

                    © 2020 汉华易美视觉科技有限公司. 
                    All Rights Reserved.
                    苏ICP备19044258号-2
                    苏 B2-20191025号  
                
                

                    京公网安备 11010502038309号
                
              
            
        
        

    
    

        
    
    

        
        
    

CSS

body,p{
    margin: 0;
}
*{
    font-family: 微软雅黑;
}
header{
    width: 1300px;
    height: 85px;
    background-color: #0c0d0d;
    margin: auto;
    padding-top: 13.5px;
}
header .header_left{
    height: 35px;
    float: left;
    margin-left: 30px;
    margin-top: 25px;
}
.header_left a{
    display: block;
    float: left;
    text-decoration: none;
    margin-right: 20px;
    color: #b6baba;
    font-size:14px ;
}
.header_left a:nth-last-child(1){
    width: 75px;
    text-align: center;
    border: #ee409a 1px solid;
    background-color: #0c0d0d;
    color: #ee409a;
    border-radius: 35px;
}
header .header_right{
    float: right;
    right: 30px;
    height: 16px;
    margin-top: 25px;
    margin-right: 30px;
}
header .bj{
    width: 114px;
    height: 58px;
    background-image: url(../images/cs/logo.png);
    background-repeat: no-repeat;
    margin: auto;

}
.header_right a{
    font-size: 14px;
    display: block;
    color: #b6baba;
    margin-left: 20px;
    text-decoration: none;
    float: left;
}
.header_right span{
    float: left;
    color:#b6baba ;
    margin-left: 20px;
}
.header_right .scj{
    float: left;
    margin-left: 20px;
    width: 75px;
    height: 16px;
    color: #fff;
    background-image: url(../images/cs/shouchang.png);
    background-repeat: no-repeat;
    padding-left: 18px;

}
.scj span{
    margin-left: 0;
    color: #fff;
}
.header_right .a1{
    color: #fff;
}
.center{
    width: 1300px;
    height: 560px;
    margin: auto;
}
.tro{
    width: 1300px;
    margin: auto;
    background-color: #e8eded;
}
.tro .box1{
    width: 256px;
    margin: auto;
    padding-top: 40px;
    padding-bottom: 40px;
}
.box1 h2{
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #444;
    font-style: normal;
    text-align: center;
}
.box1 span{
    display: block;
    color: #444;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
}
.tro .box2{
    width: 1188px;
    height:664px;
    margin: auto;
}
.box2 .box2_1{
    width: 788px;
    height: 624px;
    float: left;
    margin-right: 16px;
}
.box2 .tu1{
    width:384px ;
    height: 624px;
    float: left;
    background-color: white;
}
.box2_1 .tu{
    width: 386px;
    height: 304px;
    background-color: white;
    float: left;
}
.box2_1 .tu:nth-child(1){
    margin-right: 16px;
    margin-bottom: 16px;
}
.box2_1 .tu:nth-child(3){
    margin-right: 16px;
}
.tu a,.tu1 a{
    display: block;
    margin: 8px 8px;
}
.tu span,.tu1 span{
    font-size: 14px;
    color: #444;
    display: block;
    text-align: center;
}
.box2 .t{
    display: block;
    height: 40px;
    font-size: 20px;
    color: #008774;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
}
.tro .r{
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-style: normal;
    color: #444;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 40px;
}
.tro .box3{
    width: 1190px;
    height: 222px;
    margin: auto;
}
.box3 a{
    display: block;
    float: left;
}
.box3 a:nth-child(2){
    margin-right: 16px;
    margin-left: 16px;
}
footer{
    width: 1300px;
    margin: auto;
}
footer .f1{
    width: 1300px;
    overflow: hidden;
    background-color: #0c0d0d;
}
footer .f2{
    width: 1300px;
    height: 30px;
    background-color: #444;
}
.f1 .js{
    width: 1150px;
    overflow: hidden;
    margin: auto;
    border-bottom: #444 1px solid;
}
.js .js_bj{
    width: 114px;
    height: 58px;
    background-image: url(../images/cs/logo.png);
    background-repeat: no-repeat;
    float: left;
    margin-top: 50px;
    margin-right: 200px;
}
.js .nav{
    width: 84px;
    float: left;
    margin-right: 120px;
    margin-top: 50px;
}
.js .nav:nth-last-child(1){
    width: 150px;
    margin-right: 0;
}
.js .nav:nth-child(3){
    margin-bottom: 90px;
}
.nav a{
    float: left;
    font-size: 14px;
    color: #d4d4d4;
    text-decoration: none;

}
.nav a:nth-child(1){
    font-size: 12px;
    color: #888;
    padding-bottom: 26px;
}
.nav span{
    float: left;
    font-size:18px ;
    color: #d4d4d4;
    background-image: url(../images/cs/phone.png);
    background-repeat: no-repeat;
    padding-left: 20px;

}
.nav button{
    width: 140px;
    height: 44px;
    font-size: 20px;
    color: #d4d4d4;
    background-color:#02a388 ;
    margin-top: 28px;
    border: none;
}
.f1 .lx{
    width: 1000px;
    overflow: hidden;
    margin: auto;
    text-align: center;
}
.lx .lx_1{
    width: 600px;
    margin: auto;
    overflow: hidden;
    margin-top: 28px;
}
.lx_1 a{
    color: #888;
    font-size: 12px;
    text-align: center;
}
.lx .lx_2{
    width: 600px;
    overflow: hidden;
    margin: auto;
    margin-top: 26px;
    margin-bottom: 60px;
}
.lx_2 a{
    color: #888;
    font-size: 12px;
    text-align: center;
    background-image: url(../images/cs/gongan.png);
    background-repeat: no-repeat;
    padding-left: 20px;
}
.kf{
    position: fixed;
    bottom: 40px;
    right: 150px;
}
.an{
    position: fixed;
    bottom: 6px;
    left: 48%;
    width: 80px;
    height: 32px;
}