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

时间  2019-11-10
标签 web 开发 系列 实用 网页 布局 栏目 HTML 繁體版
原文   原文链接

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

1、入门

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

图片描述

二、页面结构
随便打开一个网站，均可以清晰的看到网站大体有头部、中间、底部三部分构成，这样咱们就知道一个网页首先能够分红三个部分，个人建议是先写头部、底部最后写中间内容。头部、底部通常都是公共的，整个网站共用一个，那么，就能够单独建一个文件header.html、footer.html分开来写头部、底部，而后用一个模块插件在每一个页面对应的位置引入。web

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

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

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

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

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

2、经常使用布局

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

一、默认布局（已省略Banner）flex

<div id="Page">
    <div id="Header" class="bg">我是头部内容</div>
    <div id="Content">
        <div class="cont-left">我是内容1</div>
        <div class="cont-right">我是内容2</div>
    </div>
    <div id="Footer" class="bg">我是底部内容</div>
</div>
#Page{
    text-align: center;
}
.bg{
    background-color: pink;
}
#Header{
    width: 100%;
    height: 60px;
    line-height: 60px;
}
#Content{}
#Content div{
    /*高度不是写死，内容撑开*/
    min-height: 500px;
    line-height: 500px;
}
#Footer{
    width: 100%;
    height: 200px;
    line-height: 200px;
}

二、单列布局
该布局比较简单，大多用于功能很少的网站首页，该布局一般有固定的宽度，而且居中，高度由内容撑开，有如下两个应用场景：

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

#Header{
    position: absolute;
    top: 0;
}
#Content{
    position: absolute;
    top: 60px;
    bottom: 200px;
    width: 100%;
    overflow-y: scroll;
}
#Footer{
    position: absolute;
    bottom: 0;
}

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

html{
    height: 100%;
}
body{
    min-height: 100%;
    position: relative;
}
#Footer{
    position: absolute;
    bottom: 0; 
}

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

#Page{
    text-align: center;
}
.bg{
    background-color: pink;
}
#Header{
    width: 100%;
    height: 60px;
    line-height: 60px;
}
#Content div{
    height: 500px;
    line-height: 500px;
}
#Footer{
    width: 100%;
    height: 200px;
    line-height: 200px;
}

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

#Content{
    width: 100%;
    overflow: hidden;
}
.cont-left{
    float: left;
}
.cont-right{
    overflow: auto;
    background-color: skyblue;
}

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

#Content{
    display: flex;
    /*高度自动*/
    align-items: flex-start;
}
.cont-left{
    /*固定宽度才设置，自适应不设*/
    width: 100px;
    flex: 0 0 auto;
}
.cont-right{
    flex: 1 1 auto;
    background-color: skyblue;
}

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

#Content{
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}
.cont-left{
    box-sizing: border-box;
    grid-column: 1;
}
.cont-right{
    box-sizing: border-box;
    grid-column: 2;
    background-color: skyblue;
}

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

<div id="Page">
    <div id="Header" class="bg">我是头部内容</div>
    <div id="Content">
        <div class="cont-left">我是内容1</div>
        <div class="cont-right">我是内容2</div>
        <div class="cont-middle">我是内容0</div>
    </div>
    <div id="Footer" class="bg">我是底部内容</div>
</div>
.cont-left{
    float: left;
    width: 100px;
}
.cont-right{
    float: right;
    width: 100px;
}
.cont-middle{
    overflow: hidden;
    background-color: skyblue;
}

3二、圣杯：左、中、右三栏都经过float进行浮动，而后经过负值margin进行调整

<div id="Page">
    <div id="Header" class="bg">我是头部内容</div>
    <div id="Content">
        <div class="cont-middle">我是内容0</div>
        <div class="cont-left">我是内容1</div>
        <div class="cont-right">我是内容2</div>
    </div>
    <div id="Footer" class="bg">我是底部内容</div>
</div>
#Content{
    overflow: hidden;
}
.cont-left{
    position: relative;
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: skyblue;
}
.cont-right{
    position: relative;
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: skyblue;
}
.cont-middle{
    float: left;
    width: 100%;
}

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

#Content{
    height: 500px;
}
.cont-middle{
    position: absolute;
    left: 200px;
    right: 200px;
}
.cont-left{
    position: absolute;
    left: 0;
    width: 200px;
    background-color: skyblue;
}
.cont-right{
    position: absolute;
    right: 0;
    width: 200px;
    background-color: skyblue;
}

3、分享主流网站初始化

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

[默认效果]
图片描述

<div class="box">
    <ul>
        <li>小幸运</li>
        <li>原来你是我最想留住的幸运</li>
        <li>原来咱们和爱情，曾经靠得那么近</li>
        <li>那为我对抗世界的决定</li>
        <li>那陪我淋的雨，一幕幕都是你</li>
        <li>一尘不染的真心，与你相遇 好幸运</li>
    </ul>
</div>

一、网易官网

html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
table,td,tr,th{font-size:12px;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
ol,ul {list-style:none;} 
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
address,cite,code,em,th {font-weight:normal; font-style:normal;}

二、腾讯官网

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

三、新浪官网

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

四、淘宝官网

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; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }

五、雅虎

html {overflow-y: scroll;} 
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; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

4、网页开发流程

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

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

十一、重置样式：主要有如下6点，不是写死，按需添加标签与属性
    11-一、去除默认边距（不是全部，是使用到的）
    11-二、总体（背景颜色、字体）
    11-三、标题
    11-四、列表
    11-五、表单
    11-六、超连接
    11-七、图片
十二、通用样式：主要有字号、a的状态、清除浮动、居中等等，其中清除浮动和居中这些方式有不少，这里展现的是我我的喜欢用的。
1三、模块样式：即页面每一大模块区域的共用样式。
1四、书写顺序：编辑器中有格式化工具，能够去配置表中配置成本身喜欢的格式，建议定位和自身属性放在前面。
reset.css

/* ==========================================================================
  一、重置项
============================================================================ */
body { margin: 0; padding: 0;}
body { background-color: #fff; font: 12px"微软雅黑";}
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
ol, ul, li { list-style: none;}
select, input, button, textarea { border: 0; outline: none; background-color: #fff;}
a { text-decoration: none; color: #000;}
img { border: none; border: 0;}

/* ==========================================================================
  二、公共项
============================================================================ */
/* 页面容器 */
#Page {}

/* 展现区域 */
.contBase { min-width: 980px; margin: 0 auto;}

/* 字号 */
.font-s { font-size: 10px;}
.font-m { font-size: 14px;}
.font-l { font-size: 16px;}
.font-xl { font-size: 18px;}

/* a的4个状态 */
a:link {}
a:visited {}
a:hover {}
a:active {}

/* 清除浮动的2种方式 */
.clearBFC { overflow: hidden;}
.clearFix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.clearFix { zoom: 1;}

/* 水平居中的3种方式 */
.center-block{margin: 0 auto;}
.center-inline{text-align: center;}
.center-auto{position: absolute;left: 0;right: 0;margin: auto;}

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

section.css
/* ==========================================================================
  一、Header
============================================================================ */
#Header{}

/* ==========================================================================
  二、Banner
============================================================================ */
#Banner{}

/* ==========================================================================
  三、Footer
============================================================================ */
#Footer{}

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

index.css
/* 大屏幕 */
@media (min-width:2560px){}

/* 中小屏幕 */
@media (min-width:1024px) and (max-width:1365px){}

/* 小屏幕 */
@media (min-width:980px) and (max-width:1023px){}

5、兼容IE

很不幸的，若是你的网站被要求兼容IE8，那么，须要按需加载文件，能够在head部分加判断条件，具体兼容方案在这里就不作分析了。

<!--[if gt IE 7]><link rel="stylesheet" type="text/css" href="ie8.css"/><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="ie8.css"/><![endif]-->

<!--[if lte IE 8]>
    <div style="width:980px;margin:0 auto;text-align:center;font-size:18px;">
        建议升级您的IE浏览器，或使用Google Chrome、Firefox等高级浏览器，将会获得更好的体验！
    </div>
<![endif]-->
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程