相关文章
围绕网店不断催生服务新行当
让ASP.NET主机走向平民化
网站建设HTML中DOCTYPE的定义及用法
网站设计Photoshop照片合成：天空更加美丽
企通互联简化网页 优化WEB应用的方法
北京网站设计将内容自动添加到指定文本域的JS
网站建设本地检验网页是否符合标准的几种方法
北京网页设计HTML语言剖析（九）图形标记
北京网站建设网页设计技巧－－文本排版
网站制作网页颜色的使用风格
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网页设计网站建设CSS floats创建三栏网页布局
北京网页设计网站建设CSS floats创建三栏网页布局
北京网站建设
绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局的网页。
现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从 网页设计XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。
基本方法网页设计
网站制作
基本的布局包含五个 网站制作div 北京网站制作，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。 站.长站
北京网站设计三栏布局的一个例子
站.长.站
请看看用本文所介绍的技术进行三栏布局的例子。网页设计
这个例子用鲜艳的颜色来区分布局的各个div。 Www~Chinaz~com
XHTML代码：网站设计
Example Source Code Chinaz.com
<body>网站设计
<div id="header">网站设计
<h1>Header</h1>北京网页设计
</div>北京网站建设
<div id="left">网站设计
Port side text...网站制作
</div>北京网站建设
<div id="right">北京网站制作
Starboard side text...企通互联
</div>网站制作
<div id="middle">北京网站建设
Middle column text...网站制作
</div>北京网站制作
<div id="footer">网站设计
Footer text...北京网站设计
</div>网站设计
</body>
下面是CSS代码：网站建设
Example Source Code 北京网页设计
北京网站设计
body {企通互联
margin: 0px;企通互联
padding: 0px;网站建设
}网站建设
div#header {北京网站建设
北京网站建设 clear: both;网站制作
网站建设height: 50px;网站设计
background-color: aqua;北京网站建设
padding: 1px;网站设计
} 网站设计网页设计
div#left {北京网站制作
float: left;北京网站设计
width: 150px;网站设计
background-color: red;网站设计
}北京网站制作
div#right {北京网页设计
float: right;北京网站设计
width: 150px;网站建设
background-color: green;网站设计
}北京网站制作
div#middle {网站设计
padding: 0px 160px 5px 160px;网站设计
margin: 0px;网页设计
background-color: silver;北京网页设计
}北京网站建设
div#footer {网站设计
clear: both;网页设计
background-color: yellow;北京网页设计
} 中.国.站.长.站