如何用css进行网页布局,用CSS进行网页布局的教程

如果你是一个初学者那么学习css.html" target="_blank">css的第一步就是布局，但是实现网页布局的方法很多，很多初学者都不知道如何应用，那么现在就跟爱站小编去看看用CSS进行网页布局的教程。

一、基础概念

W3C标准：由万维网联盟制定的一系列标准：包括：

结构化标准语言(HTML和XML)；

表现标准语言(CSS)；

行为标准语言(DOM和ECMAScript)。

??倡导结构，样式，行为分离。

CSS中的定位机制：

1、标准文档流(Normal flow)：从上到下，从左到右，输出文档内容，由块级元素(从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、lu、li、d、dt、p……)和行级元素(能在同一行内显示，不会改变HTML文档结构。常见行级元素：span、strong、img、input……)组成。

2、浮动(Floats)：

3、绝对定位(Absolute positioning)：

盒子模型：网页布局的基石，有四部分组成：

边框(border)、外边距(margin)、内边距(padding)、盒子中的内容(content)。如下图：

盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸

注：块级元素和行级元素都是盒子模型。

盒子3D模型：

常见页面布局及解决方案：

二、自动居中一列布局

关键词：标准文档流，块级元素，margin属性

自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。

??auto会根据浏览器的宽度自动地设置两边的外边距

如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性

代码示例：

一列布局固定：

XML/HTML Code复制内容到剪贴板

??

??

一列布局??

????body{?margin:0;?padding:0;?font-size:30px} ??

????div{?text-align:center;?font-weight:bold} ??

????.head,?.main,?.footer{?width:960px;?margin:0?auto}?/*margin属性及具体的宽度*/ ??

????.head{?height:100px;?background:#ccc} ??

????.main{?height:600px;?background:#FCC} ??

????.footer{?height:50px;?background:#9CF} ??

??

??

??

????

head

??

????

main

??

????

footer

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yilieguding.html

一列布局自适应：

XML/HTML Code复制内容到剪贴板

html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??

??

??

一列布局??

????body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

????div{?text-align:center;?line-height:50px} ??

????.head,?.main,?.footer{width:80%;margin:0?auto}?/*margin属性及定宽为百分比*/ ??

????.head{?height:100px;?background:#ccc} ??

????.main{?height:600px;?background:#FCC} ??

????.footer{?height:50px;?background:#9CF} ??

??

??

??

????

head

??

????

main

??

????

footer

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yiliezishiying.html

三、横向两列布局

浮动布局：CSS中规定的第二种定位机制；能够实现横向多列布局；通过设置float属性实现。

??float属性：left | right | none

特点：元素会左移，或右移，直至触碰到容器为止。

注：设置了浮动的元素，仍旧处于文档流中。当元素没用设置宽度值。若设置了浮动属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指相邻后面的元素。

清除浮动的方法：

??clear属性——常用clear：both;clear:left;或者clear:right；同时设置width：100%(或固定宽度)+overflow：hidden；

横向两列布局是网页布局最常见的方式之一

主要应用技能：

??float属性——使纵向排列的块级元素，横向排列

??margin属性——设置两列之间的间距

注：(1)当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。

(2)div块的高度一般不需要设置。

代码示例

两列居中固定

XML/HTML Code复制内容到剪贴板

??

??

二列布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.left{?width:20%;?height:600px;?background:#ccc;?float:left} ??

.right{?width:80%;?height:600px;?background:#FCC;?float:right} ??

??

??

??

??

left

??

??

right

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code//Blog_demo/Codes2/liangliejuzhingguding.html

两列居中自适应：**

XML/HTML Code复制内容到剪贴板

??

??

二列布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.main{?width:80%;?height:600px;?margin:0?auto} ??

.left{?width:20%;?height:600px;?background:#ccc;?float:left} ??

.right{?width:80%;?height:600px;?background:#FCC;?float:right} ??

??

??

??

??

????

left

??

????

right

??

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/liangliejuzhongzishiyin.html

四、绝对定位布局

position属性：

拥有三种定位方式：1、静态定位 2、相对定位 3、绝对定位

可设置4个属性值：

??static(静态定位)

??relative(相对定位)——特点：相对于自身原有为止进行偏移；仍处于标准文档流中；随即拥有偏移属性和Z-index属性

??absolute(绝对定位)——特点：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性

( 1)未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置；脱离了标准文档流

(2)设置偏移量

偏移参考基准：无已定位祖先元素，以为偏移参考基准

有已定位祖先元素，以距离其最近的已定位祖先元素为偏移参照基准

注：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节

??fixed(固定定位)

使用absolute实现横向两列布局——常用于一列固定宽度，另一列宽度自适应的情况

主要应用技能：

? ?relative——父元素相对定位

?? absolute——自适应宽度元素绝对定位

注意：固定宽度列的高度>自适应宽度的列

代码举例：

三列自适应：

XML/HTML Code复制内容到剪贴板

??

??

三列布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.left{?width:20%;?height:600px;?background:#ccc;?position:absolute;?left:0;?top:0} ??

.main{?height:600px;?margin:0?20%;?background:#9CF} ??

.right{?height:600px;?width:20%;?position:absolute;?top:0;?right:0;?background:#FCC;} ??

??

??

??

??

????

left

??

????

main

??

????

right

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezishiyin.html

三列左右固定：

XML/HTML Code复制内容到剪贴板

??

??

三列布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.left{?width:240px;?height:600px;?background:#ccc;?position:absolute;?left:0;?top:0} ??

.main{?height:600px;?margin:0?240px;?background:#9CF} ??

.right{?height:600px;?width:240px;?position:absolute;?top:0;?right:0;?background:#FCC;} ??

??

??

??

??

????

left

??

????

main

??

????

right

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezuoyouguding.html

五、混合布局及结构与表现原则

混合布局01

XML/HTML Code复制内容到剪贴板

html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??

??

??????

混合布局01??

????body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

????div{?text-align:center;?line-height:50px} ??

????.head{?height:100px;background:#9CF} ??

????.left{?width:20%;?height:600px;?background:#ccc;?float:left} ??

????.right{?width:80%;?height:600px;background:#FCC;?float:right}/*宽度设置为百分数，以实现自适应*/ ??

??

??

??

????

head

??

????

left

??

????

right

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju01.html

混合布局02

XML/HTML Code复制内容到剪贴板

??

??????

????

混合布局??

????body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

????div{?text-align:center;?line-height:50px} ??

????.head,?.main,?.footer{?width:960px;?margin:0?auto} ??

????.head{?height:100px;background:#9CF} ??

????.left{?width:240px;?height:600px;?background:#ccc;?float:left} ??

????.right{?width:720px;?height:600px;background:#FCC;?float:right}/*宽度设置为固定值*/ ??

????.footer{?height:50px;?background:#9F9;?clear:both} ??

??

??

??

????

head

??

????

??

????

left

??

????

right

??

??

????

footer

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju02.html

混合布局03

XML/HTML Code复制内容到剪贴板

??

??

混合布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.head,?.main,?.footer{?width:960px;?margin:0?auto}/*head?main及footer设置固定宽度*/ ??

.head{?height:100px;background:#9CF} ??

.left{?width:220px;?height:600px;?background:#ccc;?float:left} ??

.right{?width:740px;?height:600px;background:#FCC;?float:right} ??

.r_sub_left{?width:540px;?height:600px;?background:#9C3;?float:left} ??

.r_sub_right{?width:200px;?height:600px;?background:#9FC;?float:right}/*540px+200px=740px?注意宽度值的设置*/ ??

.footer{?height:50px;?background:#9F9;?clear:both}/*使用clear：both清除浮动*/ ??

??

??

??

head

??

??

????

left

??

????

??

????????

sub_left ??

????????

??

????????

sub_right ??

????????

??

????

??

??

footer

??

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju03.html

混合布局04

XML/HTML Code复制内容到剪贴板

??

??

混合布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.main{?width:960px;?margin:0?auto}/*footer和main未设置宽度*/ ??

.head{?height:100px;background:#9CF} ??

.left{?width:220px;?height:600px;?background:#ccc;?float:left} ??

.right{?width:740px;?height:600px;background:#FCC;?float:right} ??

.r_sub_left{?width:540px;?height:600px;?background:#9C3;?float:left} ??

.r_sub_right{?width:200px;?height:600px;?background:#9FC;?float:right}/*540px+200px=740px?注意宽度值的设置*/ ??

.footer{?height:50px;?background:#9F9;?clear:both}/*使用clear：both清除浮动*/ ??

??

??

??

head

??

??

????

left

??

????

??

????????

sub_left ??

????????

??

????????

sub_right ??

????????

??

????

??

??

footer

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju04.html

混合布局05(自适应)

XML/HTML Code复制内容到剪贴板

??

??

混合布局??

body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold} ??

div{?text-align:center;?line-height:50px} ??

.head{?height:100px;background:#9CF} ??

.left{?width:20%;?height:600px;?background:#ccc;?float:left} ??

.main{margin:0?30%;height:600px;?background:#9CC?} ??

.right{?width:20%;?height:600px;background:#FCC;?float:right}/*宽度均设为百分比*/ ??

.footer{?height:50px;?background:#9F9;?clear:both} ??

??

??

??

????

head

??

????

left

??

????

right

??

????

main

??

????

footer

??

??

??

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju05.html

在网页制作中，面对设计图，网页制作人员一般要遵循的原则是：先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和变现形式。

倡导结构，样式，行为分离。举例：网页换肤——相同HTML结构，不同CSS样式。

这篇文章主要为大家分享了用CSS进行网页布局的教程，介绍了绝对定位布局、混合布局及结构与表现原则，感兴趣的小伙伴们可以参考一下。

原文链接:https://js.aizhan.com/web_authoring/css/6184.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有