HTML/CSS——PC端博文尚美网页

源代码

HTML

    
    
    
    
    


    

        

            
        
        

                

                    HOME
                
                

                    ABOUT
                
                

                    PROTFOLIO
                
                

                    SERVICE
                
                

                    NEWS
                
                

                    CONTACT
                
        
    
    

        

            

                
            
            

                
            
            

                
            
            

                
            
        
        

            
 
            
 
            
 
            
        
        
    
    

        

            
服务范围
            
OUR SERVICE
        
        

            

                

                
1.WEB DESIGN
                

                    企业品牌网站设计/手机网站制作
                    

                    动画网站创意设计
                
            
            

                

                
2.WEB DESIGN
                

                    企业品牌网站设计/手机网站制作
                    

                    动画网站创意设计
                
            
            

                

                
3.WEB DESIGN
                

                    企业品牌网站设计/手机网站制作
                    

                    动画网站创意设计
                
            
            

                

                
4.WEB DESIGN
                

                    企业品牌网站设计/手机网站制作
                    

                    动画网站创意设计
                
            
        
    
    

        

            

                
{客户案例}
                
With the best professional technology,to design the best innocative site
            
            

                

                    
                
                

                    
                
                

                    
                
            
            

                VIEW MORE
            
        
    
    

        

            
最新资讯
            
TEN LATEST NEWS
        
        

            

                
            
            

                

                    

                        

                            09
                            Jan
                        
                        

                            
网站排名进入前三的技巧说明
                            
很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...
                        
                    
                    

                        

                            08
                            Jan
                        
                        

                            
网站排名进入前三的技巧说明
                            
很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...
                        
                    
                    

                        

                            07
                            Jan
                        
                        

                            
网站排名进入前三的技巧说明
                            
很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...
                        
                    
                    

                        

                            06
                            Jan
                        
                        

                            
网站排名进入前三的技巧说明
                            
很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...
                        
                    
                
            
        
    
    

        

            

                Copyright 2019 Bowenshangmei Culyure All Rights Reserved
            
            

                    Home|About|Portfolio|Contact
            
        
    

CSS

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #646464}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial;}
.l{float: left;}
.r{float:right;}
.clear:after{content:"";display:block;clear: both;}
.container{width: 1080px;margin:0 auto;position: relative;}
.container-fluid{width: 100%;}



#head{height: 81px;}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{ float: left;margin-left: 58px; }

#banner{position: relative;}
#banner .banner_list{width: 100%;height: 469px;position: relative;}
#banner .banner_list li{width: 100%;height: 100%; 
    background: center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;z-index: 1;}
#banner .banner_list li.active{opacity: 1;z-index: 10;}
#banner .banner_list a{display: block;width: 100%;height: 100%;}


#banner .banner_btn{width:100%;position: absolute;bottom: 39px;left: 0px; z-index: 20;
    font-size: 0;text-align: center;}
#banner .banner_btn li{display:inline-block;width: 12px;height: 12px; border: 2px solid white;
    border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
#banner .banner_btn li.active{background: white;}


#service{overflow: hidden;min-height: 407px;}
#service .service_list{text-align: center;margin-top: 34px;}
#service .service_list li{float: left;width: 250px;margin: 0 10px;}
#service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
#service .service_list li:nth-last-of-type(1) div{background-image: url(../image/mini_ico.png)}
#service .service_list li:nth-last-of-type(2) div{background-image: url(../image/mini_ico.png)}
#service .service_list li:nth-last-of-type(3) div{background-image: url(../image/mini_ico.png)}
#service .service_list li:nth-last-of-type(4) div{background-image: url(../image/mini_ico.png)}
#service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}
#service .service_list p{font-size: 14px;color: #6d6d6d;line-height: 22px;}




.area_title{margin-top: 61px; text-align: center;}
.area_title p{font-size: 14px;line-height: 34px;color: #9f9f9f;}
.area_title h2{font-size: 20px;line-height: 20px;height: 20px;color: #363636;font-weight: normal}



#case{background-color: #f8f8f8;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 55px;text-align: center;}
#case .area_title h2{color:#66C5B4 }
#case .case_list{margin-top: 28px;}
#case .case_list li{float: left;width:340px;margin: 0 10px;}
#case .case_btn{width:176px;height: 37px;background-color:#66C5B4;margin: 0 auto;border-radius: 25px;
    line-height: 37px; text-align: center;font-size: 14px;margin-top: 36px;}
#case .case_btn a{display: block;width: 100%;height: 100%;color: white;}


#news{min-height: 450px;overflow: hidden;}
#news .area_title{margin-top: 65px;text-align: center;}
#news dl{margin-top: 48px;}
#news dt{width:234px;}
#news dd{width:846px;}
#news .news_list{width: 100%}
#news .news_list li{width: 50%;float: left;margin-bottom: 48px;}
#news .news_date{width: 70px;height: 70px; border-right: 2px solid #dcdcdc;text-align: center;}
#news .news_date i{font-size: 39px;color: #66C5B4;display: block;font-weight: bold;}
#news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}
#news .news_text{width: 310px;margin-left: 20px;}
#news .news_text h3{font-size: 14px;}
#news .news_text h3 a{color: #3f3f3f;}
#news .news_text p{color: #4a4a4a;font-size: 12px;line-height: 21px;margin-top: 17px;}


#foot{background-color: #66C5B4;}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{color: white;margin: 0 10px;}

运行效果 

原作品效果：

仿制品效果：

素材资源

https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html

https://www.zcool.com.cn/work/ZNjIzOTEwNA==.html?switchPage=on