Web前端笔记（4）

前端完整页面设计：

1. PC端布局：

通栏：自适应浏览器的宽度

版心 ：固定一个宽度，并让容器居中

页面中需要用到的图片：(由于本人未能找到原版的图片资源，所以只是利用截屏到的图片，进行简单截图后使用，清晰度不够，单用于学习前端学习已足够)

图片资源链接：https://pan.baidu.com/s/1ZhaQ8oc2pGuH5uZvXsxjlQ 
提取码：vj93 

    
    
    
    


    

        

            
                
            
        
        

            

                HOME
            
            

                ABOUT
            
            

                PORTFOLIO
            
            

                SERVICE
            
            

                NEWS
            
            

                CONTACT
            
        
    
    
     
        

            

                
            
            

                
            
            

                
            
            

                
            
        
        

            

            

            

            

        
    
    

        

            
服务范围
            
OUR SERVICE
        
        

            

                


                
                
1.WEB DESIGN
                
企业品牌网站设计/手机网站制作
                
动画网站创意设计
            
            

                


                
                
2.GRAPHIC DESIGN
                
标志LOGO设计/产品宣传册设计
                
企业广告/海报设计
            
            

                


                
                
3.E-BUSINESS PLAN
                
淘宝天猫装修设计及运营推广
                
企业微博，微信营销
            
            

                


                
                
4.MAILBOX AGENT
                
腾讯/网易企业邮箱品牌代理
                
个性化邮箱定制开发
            
        
    
    

        

            

                
{客户案例}
                
with the best professional technology
            
            

                

                    
                        
                    
                
                

                    
                        
                    
                
                

                    
                        
                    
                
            
            

                view more
            
        
    
    

        

            
最新资讯
            
THE LATEST NEWS
        
        

            

                
            
            

                

                    

                        

                            09
                            Jan
                        
                        

                            
网站排名进入前三的技巧排名
                            

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

                        

                            09
                            Jan
                        
                        

                            
网站排名进入前三的技巧排名
                            

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

                        

                            09
                            Jan
                        
                        

                            
网站排名进入前三的技巧排名
                            

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

                        

                            09
                            Jan
                        
                        

                            
网站排名进入前三的技巧排名
                            

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

        

            

                CopyRight 2006-2014 Bowenshangmei Culture All Rights Reserved
            
            

                Home | About | Portfolio |
                Contact
            
        
    

通用的CSS样式 common.css

*{
    margin: 0;
    padding: 0;
}
ul, ol{
    list-style: none;
}
img{
    display: block;
}
a{
    text-decoration: none;
    color: #464646;
}
h1, h2, h3, h4, h5, h6{
    font-size: 16px;
}
body{
    font-family: Arial, "Microsoft YaHei UI";
}

.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;
}

.area-title{
    margin-top: 60px;
}

.area-title h2{
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    color: #363636;
    text-align: center;
}

.area-title p{
    color: #9f9f9f;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
}

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

}

页面的效果：

顺便附上谷歌浏览器截全屏的方法:

参考博客：https://blog.csdn.net/llwy1428/article/details/92834705