资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Web开发系列【1】实用的网页布局（PC端）

Web开发系列【1】实用的网页布局（PC端）

Andrman / 1359人阅读

摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验

在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。刚开始写页面的时候我们会迷糊，那么多的标签、属性，我该用哪个，有什么区别等等，然后写出来的几个页面都是乱七八糟的，分不动定位和浮动等很多属性，接下来我介绍一些我对网页布局的理解。

一、入门

1、盒子模型
在写网页的最开始，我们需要清楚记住一个东西：盒子模型。
这是从浏览器上截图下来的一个盒子模型的图，我们可以清晰的看到从内到外依次是content（内容）、padding（内填充）、border（边框）、margin（外边距），看起来很简单，但是总有新手会记不住，至少我学生时代老师第一次讲我是听不明白的。

2、页面结构
随便打开一个网站，都可以清晰的看到网站大致有头部、中间、底部三部分构成，这样我们就知道一个网页首先可以分成三个部分，我的建议是先写头部、底部最后写中间内容。头部、底部一般都是公共的，整个网站共用一个，那么，就可以多带带建一个文件header.html、footer.html分开来写头部、底部，然后用一个模块插件在每个页面对应的位置引入。

头部主要是一个导航栏，整个网站根据这个导航栏开发细致功能，而底部主要是开发这个网站公司的信息和备案号等。中间内容：这里就是整个网站的主要内容，展示给用户看的数据，根据不同类别网站有不同程度复杂的布局，还有编写习惯，我建议把网页分成头部、底部、Banner、内容几个大块去写，写完一块看下效果再继续写。

3、推荐几个入门实例
一开始写页面新建的项目文件夹大致是这样的目录：
demo文件夹 > css文件夹 + images文件夹 + index.html

31、百度一下首页
网站地址：https://www.baidu.com/
这是一个很简单的页面，页面元素比较少，是我入门的第一个静态页面。

32、企业类首页（猫咪领养网）
网站地址：http://www.maomilingyang.com/
这类型的网站首页比较简洁，功能不多，中间内容一般是两列布局。

33、电商类网站首页（蘑菇街）
网站地址：http://www.mogujie.com/
这类型的网站布局复杂，功能繁多，最重要的是在写页面的时候要细致，要有耐心，在目前热门的电商网站有很多，我建议是选择比较复杂的网站首页去写布局。

二、常用布局

经过以上3个实例的练习，基本上把学习过的HTML+CSS语法都过一遍，平时会用到的大多数属性都用上了，下面就来分析常用的布局。

1、默认布局（已省略Banner）

</>复制代码 
  2.     
  3.     
  4.         
    我是内容1
  5.         
    我是内容2
  6.     
  7.     
</>复制代码 
  1. #Page{
  2.     text-align: center;
  3. }
  4. .bg{
  5.     background-color: pink;
  6. }
  7. #Header{
  8.     width: 100%;
  9.     height: 60px;
  10.     line-height: 60px;
  11. }
  12. #Content{}
  13. #Content div{
  14.     /*高度不是写死，内容撑开*/
  15.     min-height: 500px;
  16.     line-height: 500px;
  17. }
  18. #Footer{
  19.     width: 100%;
  20.     height: 200px;
  21.     line-height: 200px;
  22. }

2、单列布局
该布局比较简单，大多用于功能不多的网站首页，该布局通常有固定的宽度，并且居中，高度由内容撑开，有以下两个应用场景：

21、需求：上下固定，中间滚动，这种布局移动端使用的更多。
只需要给头部和底部加上绝对定位，再添加内容标签（注意：父元素不能有定位）
PS：固定可以使用Fixed，但是有兼容性问题

</>复制代码 
  1. #Header{
  2.     position: absolute;
  3.     top: 0;
  4. }
  5. #Content{
  6.     position: absolute;
  7.     top: 60px;
  8.     bottom: 200px;
  9.     width: 100%;
  10.     overflow-y: scroll;
  11. }
  12. #Footer{
  13.     position: absolute;
  14.     bottom: 0;
  15. }

22、需求：内容过少时底部固定，过多时正常排列。
有时候页面内容很少，高度不满一屏看起来就很不舒服，版面很丑，主要是因为高度不够，所以最重要就是要设置html,body的高度。

</>复制代码 
  1. html{
  2.     height: 100%;
  3. }
  4. body{
  5.     min-height: 100%;
  6.     position: relative;
  7. }
  8. #Footer{
  9.     position: absolute;
  10.     bottom: 0; 
  11. }

3、两列布局
多用在后台管理系统和分栏展示内容的页面，这里讲解的是后台上的两列布局，一边导航一边内容的。大多是左/右边固定宽度，右/左边宽度自适应，或者左右宽度都自适应的情况。实现的方法有很多种，这里以左边导航右边内容为例。

</>复制代码 
  1. #Page{
  2.     text-align: center;
  3. }
  4. .bg{
  5.     background-color: pink;
  6. }
  7. #Header{
  8.     width: 100%;
  9.     height: 60px;
  10.     line-height: 60px;
  11. }
  12. #Content div{
  13.     height: 500px;
  14.     line-height: 500px;
  15. }
  16. #Footer{
  17.     width: 100%;
  18.     height: 200px;
  19.     line-height: 200px;
  20. }

31、Float + BFC
利用左侧浮动，右侧盒子通过overflow: auto;形成了BFC。（注意：父元素要清浮动）

</>复制代码 
  1. #Content{
  2.     width: 100%;
  3.     overflow: hidden;
  4. }
  5. .cont-left{
  6.     float: left;
  7. }
  8. .cont-right{
  9.     overflow: auto;
  10.     background-color: skyblue;
  11. }

32、Flex: 弹性布局的方法，兼容性有些不足，很好的一个方法。

</>复制代码 
  1. #Content{
  2.     display: flex;
  3.     /*高度自动*/
  4.     align-items: flex-start;
  5. }
  6. .cont-left{
  7.     /*固定宽度才设置，自适应不设*/
  8.     width: 100px;
  9.     flex: 0 0 auto;
  10. }
  11. .cont-right{
  12.     flex: 1 1 auto;
  13.     background-color: skyblue;
  14. }

33：Grid：栅格布局，兼容性有些不足。

</>复制代码 
  1. #Content{
  2.     display: grid;
  3.     grid-template-columns: 120px 1fr;
  4.     align-items: start;
  5. }
  6. .cont-left{
  7.     box-sizing: border-box;
  8.     grid-column: 1;
  9. }
  10. .cont-right{
  11.     box-sizing: border-box;
  12.     grid-column: 2;
  13.     background-color: skyblue;
  14. }

3、三列布局
这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。实现的方法同样有很多种，如Float、BFC、圣杯、双飞翼、Flex、绝对定位。
31、BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠

</>复制代码 
  2.     
  3.     
  4.         
    我是内容1
  5.         
    我是内容2
  6.         
    我是内容0
  7.     
  8.     
</>复制代码 
  1. .cont-left{
  2.     float: left;
  3.     width: 100px;
  4. }
  5. .cont-right{
  6.     float: right;
  7.     width: 100px;
  8. }
  9. .cont-middle{
  10.     overflow: hidden;
  11.     background-color: skyblue;
  12. }

32、圣杯：左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整

</>复制代码 
  2.     
  3.     
  4.         
    我是内容0
  5.         
    我是内容1
  6.         
    我是内容2
  7.     
  8.     
</>复制代码 
  1. #Content{
  2.     overflow: hidden;
  3. }
  4. .cont-left{
  5.     position: relative;
  6.     float: left;
  7.     width: 100px;
  8.     margin-left: -100%;
  9.     background-color: skyblue;
  10. }
  11. .cont-right{
  12.     position: relative;
  13.     float: left;
  14.     width: 100px;
  15.     margin-left: -100px;
  16.     background-color: skyblue;
  17. }
  18. .cont-middle{
  19.     float: left;
  20.     width: 100%;
  21. }

33、绝对定位：简单，优先加载主体。

</>复制代码 
  1. #Content{
  2.     height: 500px;
  3. }
  4. .cont-middle{
  5.     position: absolute;
  6.     left: 200px;
  7.     right: 200px;
  8. }
  9. .cont-left{
  10.     position: absolute;
  11.     left: 0;
  12.     width: 200px;
  13.     background-color: skyblue;
  14. }
  15. .cont-right{
  16.     position: absolute;
  17.     right: 0;
  18.     width: 200px;
  19.     background-color: skyblue;
  20. }
三、分享主流网站初始化

考虑到浏览器的兼容问题，不同浏览器对标签有不同的默认值，我们在每个页面的开始会进行初始化CSS，最简单的初始化方法是*{margin:0;padding:0;},一开始我也是这么写的，这样写最快，但是如果网站很大，就不建议这样写，这样网站加载需要很久，会把所有标签初始化一遍。我们先看一下网上能找到的主流网站的初始化方案：

[默认效果]

</>复制代码 
  2.     
    •         
    • 小幸运
    •         
    • 原来你是我最想留住的幸运
    •         
    • 原来我们和爱情，曾经靠得那么近
    •         
    • 那为我对抗世界的决定
    •         
    • 那陪我淋的雨，一幕幕都是你
    •         
    • 一尘不染的真心，与你相遇 好幸运
    •

1、网易官网

</>复制代码 
  1. html {overflow-y:scroll;} 
  2. body {margin:0; padding:29px00; font:12px"5B8B4F53",sans-serif;background:#ffffff;} 
  3. div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
  4. table,td,tr,th{font-size:12px;} 
  5. li{list-style-type:none;} 
  6. img{vertical-align:top;border:0;} 
  7. ol,ul {list-style:none;} 
  8. h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
  9. address,cite,code,em,th {font-weight:normal; font-style:normal;}

2、腾讯官网

</>复制代码 
  1. body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
  2. body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
  3. a{color:#2d374b;text-decoration:none} 
  4. a:hover{color:#cd0200;text-decoration:underline} 
  5. em{font-style:normal} 
  6. li{list-style:none} 
  7. img{border:0;vertical-align:middle} 
  8. table{border-collapse:collapse;border-spacing:0} 
  9. p{word-wrap:break-word}

3、新浪官网

</>复制代码 
  1. body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
  2. body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
  3. ul,ol{list-style-type:none;} 
  4. select,input,img,select{vertical-align:middle;} 
  5. a{text-decoration:none;} 
  6. a:link{color:#009;} 
  7. a:visited{color:#800080;} 
  8. a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

4、淘宝官网

</>复制代码 
  1. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
  2. body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; } 
  3. h1, h2, h3, h4, h5, h6{ font-size:100%; } 
  4. address, cite, dfn, em, var { font-style:normal; } 
  5. code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
  6. small{ font-size:12px; } 
  7. ul, ol { list-style:none; } 
  8. a { text-decoration:none; } 
  9. a:hover { text-decoration:underline; } 
  10. sup { vertical-align:text-top; } 
  11. sub{ vertical-align:text-bottom; } 
  12. legend { color:#000; } 
  13. fieldset, img { border:0; } 
  14. button, input, select, textarea { font-size:100%; } 
  15. table { border-collapse:collapse; border-spacing:0; }

5、雅虎

</>复制代码 
  1. html {overflow-y: scroll;} 
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
  3. body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  4. td,th,caption { font-size:14px; }
  5. h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
  6. address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
  7. a { color:#555; text-decoration:none; }
  8. a:hover { text-decoration:underline; }
  9. img { border:none; }
  10. ol,ul,li { list-style:none; }
  11. input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
  12. table { border-collapse:collapse; }
  13. .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
  14. .clearfix { *zoom:1; }
四、网页开发流程

入门和学习了布局之后，接下来就是开始正式写页面的准备工作，一个P端网页在开发的时候有很多准备工作，准备工作做好了对于后面的维护也是比较简单、友好，要争取页面一次写完就很好，不要后期又反过来调整页面，因此，在写页面的时候一定要专心、精准、仔细。

1、网站初始化：其实用哪个初始化方案都没关系，重要的是对不同项目进行细微调整，我们分析一下个人的初始化方案怎么写：

</>复制代码 
  1. 11、重置样式：主要有以下6点，不是写死，按需添加标签与属性
  2.     11-1、去除默认边距（不是所有，是使用到的）
  3.     11-2、整体（背景颜色、字体）
  4.     11-3、标题
  5.     11-4、列表
  6.     11-5、表单
  7.     11-6、超链接
  8.     11-7、图片
  9. 12、通用样式：主要有字号、a的状态、清除浮动、居中等等，其中清除浮动和居中这些方式有很多，这里展示的是我个人喜欢用的。
  10. 13、模块样式：即页面每一大模块区域的共用样式。
  11. 14、书写顺序：编辑器中有格式化工具，可以去配置表中配置成自己喜欢的格式，建议定位和自身属性放在前面。
</>复制代码 
  1. reset.css
  2. /* ==========================================================================
  3.   1、重置项
  4. ============================================================================ */
  5. body { margin: 0; padding: 0;}
  6. body { background-color: #fff; font: 12px"微软雅黑";}
  7. h1, h2, h3, h4, h5, h6 { font-weight: normal;}
  8. ol, ul, li { list-style: none;}
  9. select, input, button, textarea { border: 0; outline: none; background-color: #fff;}
  10. a { text-decoration: none; color: #000;}
  11. img { border: none; border: 0;}
  12. /* ==========================================================================
  13.   2、公共项
  14. ============================================================================ */
  15. /* 页面容器 */
  16. #Page {}
  17. /* 展示区域 */
  18. .contBase { min-width: 980px; margin: 0 auto;}
  19. /* 字号 */
  20. .font-s { font-size: 10px;}
  21. .font-m { font-size: 14px;}
  22. .font-l { font-size: 16px;}
  23. .font-xl { font-size: 18px;}
  24. /* a的4个状态 */
  25. a:link {}
  26. a:visited {}
  27. a:hover {}
  28. a:active {}
  29. /* 清除浮动的2种方式 */
  30. .clearBFC { overflow: hidden;}
  31. .clearFix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}
  32. .clearFix { zoom: 1;}
  33. /* 水平居中的3种方式 */
  34. .center-block{margin: 0 auto;}
  35. .center-inline{text-align: center;}
  36. .center-auto{position: absolute;left: 0;right: 0;margin: auto;}

2、模块代码：网站进行初始化之后可以写页面了，我建议把公共的模块抽取出来，样式写到同一个文件内。

</>复制代码 
  1. section.css
  2. /* ==========================================================================
  3.   1、Header
  4. ============================================================================ */
  5. #Header{}
  6. /* ==========================================================================
  7.   2、Banner
  8. ============================================================================ */
  9. #Banner{}
  10. /* ==========================================================================
  11.   3、Footer
  12. ============================================================================ */
  13. #Footer{}

3、接着就是这个页面的代码，如index.css，注意的是，建议在每个页面的样式文件里加上适配屏幕的代码，1920设计图上的效果适应大部分屏幕，但是小屏幕、大屏幕的效果还是有偏差，或者希望在手机上打开页面也不会是乱，就需要写一写简单的适配代码，如单列布局的宽度等。

</>复制代码 
  1. index.css
  2. /* 大屏幕 */
  3. @media (min-width:2560px){}
  4. /* 中小屏幕 */
  5. @media (min-width:1024px) and (max-width:1365px){}
  6. /* 小屏幕 */
  7. @media (min-width:980px) and (max-width:1023px){}
五、兼容IE

很不幸的，如果你的网站被要求兼容IE8，那么，需要按需加载文件，可以在head部分加判断条件，具体兼容方案在这里就不做分析了。

</>复制代码
云服务器 GPU云服务器 web移动端布局 web服务端开发 web移动端开发 web后端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54657.html

相关文章

  • Web开发系列【1】实用的网页布局（PC端）

    摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验 在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。...

    jerryloveemily 评论0 收藏0

  • Web网页布局的主要方式

    摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。 一、静态布局（static layout） 　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

    blastz 评论0 收藏0

  • Web网页布局的主要方式

    摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。 一、静态布局（static layout） 　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

    shiina 评论0 收藏0

  • 前端实用知识

    摘要：开发中的实践尽量使用更换实现样式变化。原因事件存在毫秒延时。解决方法移动端使用事件。文本显示省略号显示省略号的基本条件元素定长。单行显示省略号多行显示省略号目前只有内核支持此属性和手机端内核以及浏览器默认字体浏览器默认字体是。 1、输入URL到显示网页，中间发生了什么 DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url，设置请求头、主体)-...

    luckyw 评论0 收藏0

发表评论

登陆后可评论

0条评论

Andrman

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<