CSSDIV三栏式网页排版设计

三栏式的网页排版设计是应用非常普遍的版型配置方式,优点是网页内的区块更多,尤其是边栏上还可以加入许多不同的字段,随着 CSS 的持续普及,现在的网页设计师经常使用 CSS DIV 的区块规划,来设计三栏式网页排板,透过每个 DIV 区块的宽度、高度、浮动等技巧,搭配上不同的背景颜色,就可以很轻松的规划出以下这三栏式网页的样貌,本文就以这个示例示意图的原代码来介绍如何使用 CSS DIV 设计出三栏式网页,首先要看的是比较简单的 HTML 部分,接着就是稍微复杂的 CSS 语法部分,但整体而言还算是 CSS 排版的基础。

三栏式网页设计架构示意图

如上图三栏式网页示意图,我们规划了几个大区块,分别为最上方的网页标头区 header、左右两的边栏 sidebar_left 与 sidebar_right、中间的网页内文区 content 以及最下方的网页脚区 footer,以下示例语法将告诉您如何设计出这样的网页版型。

HTML 语法架构<div id=”sitebody”>
 <div id=”header”>header</div>
 <div id=”sidebar_left”>sidebar_left</div>
 <div id=”sidebar_right”>sidebar_right</div>
 <div id=”content”>content</div>
 <div id=”footer”>footer</div>
</div>在 HTML 的部分相当简单,最外围使用区块 sitebody 将所有的元素都包起来,里面就依序建立 header、sidebar_left、sidebar_right、content 以及 footer 等 DIV 区块,有了这样的架构,就可以使用 CSS 将每个区块的位置设计好。

CSS 语法<style type=”text/css”>
#sitebody{
 width:600px;
 margin:0 auto;
 font-size:13px;
}
#header{
 background-color:#FFD4D4;
 height:80px;
 text-align:center;
 line-height:80px;
}
#sidebar_left{
 background-color:#FFECC9;
 width:120px;
 height:400px;
 text-align:center;
 line-height:400px;
 float:left;
}
#sidebar_right{
 background-color:#FFECC9;
 width:120px;
 height:400px;
 text-align:center;
 line-height:400px;
 float:right;
}
#content{
 margin-left:120px;
 margin-right:120px;
 height:400px;
 background-color:#F2FFF2;
 text-align:center;
 line-height:400px;
}
#footer{
 clear:both;
 background-color:#FFD4D4;
 height:80px;
 text-align:center;
 line-height:80px;
}
</style>这段 CSS 语法中的几个重点还是要提一下,首先每个 # 开头接着的英文就是 DIV 的 id 名,代表的就是要替该 DIV 区块做样式设计,由最上方开始,先对整个网页主体的大区块 sitebody 做规划,依序接着对 header、sidebar_left、sidebar_right、content、footer 做设计,要做出三栏式的网页重点就在于 DIV 的浮动技巧,也就是 float,示例在左边栏 sidebar_left 使用 float:left 代表向左浮动,右边栏使用 float:right 代表要向右浮动,两个边栏向两边浮动,那网页内文区 content 区块自然就在中间呈现罗!以下为示例用到的各种语法说明。
float – DIV 区块浮动width – DIV 宽度height – DIV 高度
margin – DIV 区块的外距
font-size – 文字大小
background-color – 背景颜色text-align – 文字对齐line-height – 文字行高clear – 清除浮动
这里稍微提示一下,为了示例呈现清楚,所以我们在左边栏 sidebar_left、右边栏 sidebar_right 以及内文区 content 的 DIV 区块内使用了高度 height,实际应用时并不一定要使用 DIV 高度,通常都是让内文的长度去决定网页所呈现的长度。

只要开一个空白的文件文件,将 CSS 语法贴进去,然后接着粘贴 HTML 语法架构内的内容,顺序是先 CSS 然后再 HTML,接存成 test.html 的文件,用浏览器开起来就可以看到本文一开始的那个三栏式网页示例示意图,原则上 Chrome、FireFox、IE、Safari、Opera 等主流的浏览器都可以顺利显示。这只是透过 CSS DIV 设计出三栏式网页的一种方法,网页设计师当然有自己的一套设计方式,但大原则通常都是使用类似的手法,DIV 区块的配置、DIV 宽度、margin、float、background … 等,只要掌握这些基本的 CSS 概念,就可以灵活运用的设计出各种三栏式网页。最后,想知道如何设计出单栏式网页或两栏式网页吗?还有两篇详细的介绍,可以比较与三栏式设计有什么差异。

网页设计

JavaScriptinnerHTML与innerText的差异

2022-6-23 2:49:56

网页设计

mysql_error函数,回传错误消息

2022-6-23 16:44:57

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yp10086@vip.qq.com 举报,一经查实,本站将立刻删除。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索