中财网大庆邱洪江:CSS网页布局全精通 - 建站学
来源：百度文库 编辑：中财网 时间：2024/04/29 14:29:42
- TAG标签
- 收藏本站
- 网站地图
- RSS订阅
- 首页
- 网页设计
- 网页软件
- 图像设计
- 网站开发
- 网站运营
- 建站指南
- 数据库
- 服务器
- 视频教程
- 书籍下载
- 专题
- 网页配色
- 网页布局
- html/xhtml
- css教程
- 网页特效
- 心得技巧
CSS网页布局全精通
来源：蓝色理想 作者：zergine 时间：2008-09-12 Tag：布局 网页 CSS在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密.
要如何以CSS作出两栏版面布局?
答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾.
我的愿望是:你能以本章作为指引开始构建一个网站,并发挥本书其他章节之内的方法制作内容.
我们将讨论的四种方法都应用在文档的
与标签之间,同时我会在开始讨论每种方法之前介绍将会使用的标记语法结构.为了让你了解围绕着每种方法的页面结构,让我们大致看一下还需要加入些什么:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...方法示范...
为了让你可以了解要达成的版面配置,请看图12-1:这就是我们想要完成的分栏版面布局.
图12-1 两栏布局的框线图
方法A:浮动侧边栏
...页头部分...
...主体部分...
上面就是我们要以CSS的float属性制作成分栏布局的标记源代码,使用
- #header: 包含标题图片,导航栏等
- #sidebar: 包含额外的内容链接与相关资讯
- #content: 包含主要的文字内容,也是页面的焦点所在.
- #footer: 包含版权信息,作者,辅助链接等
把这些页面段落拆开,能让我们能完全控制版面布局,只要指定几条CSS规则,就可以马上完成两栏布局.
为页首与页尾指定样式
要把内容结构转化成分栏布局的第一步,是为页首,页尾加上一点背景颜色以及一点内补丁,这样能使内容更容易凸显出来.
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
为方法A的结构加上前面这段CSS会使它显示成图12-2这样,我为各个段落加了一些假象的内容.
图12-2 为页首,页尾指定样式
当然,在#header与#footer里,可以继续为这些段落指定适当的样式,像是font-family,color,链接色彩等等.现在让我们把两栏版面制造出来.
浮动侧边栏
方法A的精华,在于它以float属性把#sidebar放到主要内容
浮动#sidebar的关键在于,在标记源代码中,必须出现在主内容
接着,为#sidebar加上float属性,同时把它的宽度设为30%,指定背景颜色:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
- 2 楼 建站学网友 (220.178.61.*) 发表于：09-11-17 12:30:50
- 那是用框架做出来的。。。
- 1 楼 建站学网友 (59.41.252.*) 发表于：08-10-05 00:20:10
- 我想问 一下啊 在 左右两个侧边栏中会有很多链接的，点击链接后，链接的内容如何显示在中间（content）这边啊？
- 用户名： 验证码：
- 特别推荐
- 精通Javascript+jquery视频教程
- 随着Ajax技术的不断风靡，其核心技术JavaScript越来越受到人们的关注，各种JavaScript的框架层出不穷。jQuery作为JavaScript框架的优秀代表，为广大开发者提供了诸多便利。
- PHP+MYSQL网站设计入门视频
- 本视频包括理论篇，高级应用篇和实战篇！ PHP 全名 Hypertext Preprocessor，它是个被广泛运用在WEB开发的语言尤其是它能够嵌入HTML文件之中与数据库结合互动。PHP的目地是
- Photoshop基础视频教程
- Photoshop CS是 Adobe 公司出品的迄今为止最优秀的图像处理软件。应用领域涉及平面设计、照片处理、产品包装、网页设计等，是做为一个网站开发人员必会软件之一。本教程是
- Fireworks视频教程
- 欢迎您来到建站学视频教程，下面列出的是Fireworks视频教程列表，我们还会不断地推出相关的课程， 如果您有兴趣，欢迎您常来这里看一看！
- 精通DIV+CSS网页样式与布局视频
- 欢迎您来到建站学视频教程栏目，下面列出的是DIV+CSS网页设计视频教程。这组视频教程是配合《精通DIV+CSS网页样式与布局》图书制作的，每一课对应于图书中的每一章。希望对
