css网页布局方式 css布局的几种方式

html-css027

css网页布局方式 css布局的几种方式,第1张

1、一列布局:一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等。

2、两列布局:说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。

3、三列布局:两侧定宽中间自适应,首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响。

4、混合布局:在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。

CSS英文全称:Cascading Style Sheets(层叠样式表)

是为了丰富网页布局的样式,在CSS没有出来之前,大家会用表格来进行分割布局,很不方便,CSS出来后就好多了。

我们平时所访问的都是服务器反馈到浏览器的HTML页面,但是正如上面说的,HTML无法满足新时代网站拥有者的表达需求,我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。

例如:

<html>

<head>

<title>测试页<title>

<style type="text/css">

.cs{width:100%height:160pxtext-align:centerline-height:160pxbackground:#f0f0f0}

.csl{width:20%height:160pxfloat:leftbackground:#fff}

.csr{width:20%height:160pxfloat:rightbackground:#fff}

</style>

</head>

<body>

<div class="cs">

<div class="csl">

<p>左框内容</p>

</div>

<div class="csr">

<p>右框内容</p>

</div>

</div>

</body>

</html>