前端 HTML+CSS实战篇（云道首页）

这是我自己练习着玩写的静态页面，仅用到html+css,源代码以及网页中所需图片文件已经放入百度网盘中地址链接：https://pan.baidu.com/s/1PdrZS8UMz1CS7t1KVA4Efw
提取码：ze82
自己也传上了github上一份，做成了静态网页，点击后面云道首页几个字可访问网页云道首页

效果图

代码

HTML代码

    
    
    



     

          

              

                    
                

              

                   

                       
首页
                       
云道商城
                       
云道商城
                       
云道商城
                       
云道商城
                       
云道商城
                   
              
          
     

     


     




     

         

             

             
shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
         
         

             

                 

                     
                     
我是卖家
                     
shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和                      品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！
                     我要建站
                 

                 

                     
                     
我是卖家
                     
shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和                      品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！
                     我要建站
                 

                 

                     
                     
我是卖家
                     
shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和                      品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！
                     我要建站
                 
             
         
     




     

         

             

         
         

             

                 

                     
                     
帮助中小企业快速开启阿萨德打撒电子商务
                     

                 
                 

                     
                     
帮助中小企业快速开启阿萨德打撒电子商务
                     

                 
                 

                     
                     
帮助中小企业快速开启阿萨德打撒电子商务
                     

                 
             
             <
             >
         
     



    

        

    
    

        

            

                
                    
                  
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
        
        <
        >
    





   

       shopcmd |
       首页 |
       官网云商城 |
       官网云商城 |
       官网云商城 |
       官网云商城 |
       官网云商城 |
       官网云商城 |
       官网云商城 |
   
    
@Copyright 2015 苏州海云网络科技有限公司版权所有 | 苏ICP备15038170号 -3

css代码

*{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
a{
    text-decoration: none;
}
.clear:after{
    display:block;
    content:"";
    clear:both;/**清除浮动--兼容高版本浏览器**/
}
.clear{
    *zoom:1;/**兼容低版本浏览器**/
}
body{
    background: #fafafa;
}
.header{
    height:100px;
    background-color:#fff;
}
.inner{
    width:1200px;
    height:100px;
    margin:0 auto;
    line-height: 100px;
}
.logo{
    float: left;
}
.nav{
    float:right;
}
.nav li{
    float:left;
    margin:0 20px;
}
.nav li a{
    color:#333;
    text-decoration: none;
}
.nav li a:hover{
    color:#2288f6;
}
.banner{
    height:620px;
    background: url("../images/banner.jpg") no-repeat center;
}
.service,.case{
    width:1055px;
     margin:75px auto 0;
}
.service-hd{
    border-top:1px solid #ccc;
    margin:0 25px;
}
.service-hd h3{
    width: 167px;
    height: 46px;
    margin:-15px auto 0;
}
.service-hd p{
    font-size:12px;
    color:#666;
    line-height: 26px;
    text-align: center;
    width: 830px;
    margin:15px auto 0;
}
.service-bd{
    margin-top:40px;
    overflow: hidden;
}

.service-bd li{
    width: 320px;
    height: 510px;
    float:left;
    text-align: center;

}
.service-bd img{
    margin: 40px 35px;
}
.service-bd h3{
    text-align: center;
    font-size: 18px;
    height: 40px;
    font-weight: normal;/*取消加粗*/
}
.service-bd p{
    width: 234px;
    font-size:12px;
    color:#666;
    margin: 0 auto;
    line-height: 26px;
}
.service-bd a{
    display:block;
    width: 148px;
    height: 38px;
    border:1px solid  #ff9412;
    margin:0 auto;
    text-align:center;
    line-height: 38px;
    font-size:12px;
    color:#ff9412 ;
    border-radius:5px;
}
.service-bd a:hover{
    color:#fff;
    background: #ff9412 ;
}
.yingxiao{
    margin: 0 45px;
}
.case-bd{
    margin-top: 80px;
    position: relative;
}
.case-bd li{
    width: 325px;
    height: 210px;
    float: left;
    position: relative;
}
.case-bd-m{
    margin:0 40px;
}
.text{
    height: 45px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    text-align: center;
    line-height: 45px;
    color:#fff;
    font-size:12px ;
}
.mask{
    width: 100%;
    height:100%;
    position: absolute;
    top:0;
    left: 0;
    background: rgba(0,0,0,.5) url(../images/fdj.png) center no-repeat;
    display: none;
}
.case li:hover  .mask{
    display:block;
}
.left, .right{
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,.2);
    position: absolute;
    top:50%;
    margin-top: -30px;
    text-align: center;
    line-height: 60px;
    color:#fff;
    font-size: 25px;
    border-radius: 50%;

}
.left{
    left: -90px;
}
.right{
    right:-90px;
}
.case-bd a:hover{
    background:rgba(0,0,0,.4);
}
.media-bd{
    width: 1048px;
    height: 240px;
    overflow:hidden;
    margin-top: 40px;
}
.media-bd ul{
    width: 1060px;
}
.media-bd li {
    width: 210px;
    float: left;
    height: 60px;
    border-right: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    text-align: center;
    padding-top: 20px;
}
.footer{
    height: 165px;
    background: #212425;
    overflow: hidden;
    margin-top: 100px;
}
.subnav{
    text-align: center;
    margin-top: 50px;
    color:  #f0f1f1;
}
.subnav a{
    color: #f0f1f1;
    padding: 0 5px;
    font-size: 14px;
}
.subnav a:hover{
    color:#2288f6;
    text-decoration: underline;
}
.footer p{
    text-align: center;
    color:#888888;
    margin-top: 30px;
}