第6讲 布局设计
复习回顾:在第4讲和第5讲中,我们对CSS的书写以及CSS中布局常用的float属性进行了详细的讲解.本讲将通过第2讲的网页分析学-布局分析对一些页面进行布局分析,然后通过4,5讲的内容进行基本框架构建的实例解说.
本讲主要内容:
通过第5讲的内容,我们已经了解了如何使用float,当然光了解原理而不实践是网页设计制作的大忌,所以,本讲将通过对页面的分析,构建基本的框架而让大家慢慢熟悉网页的布局分析和构建.
我们直接用以前的几个页面来做示范:
都是我们在第2讲中用到的几个页面
然后再继续分析,中层部分为左右分栏布局,这样我们就可以初步划分了他的布局,写出了我们的制作走向.(数字为制作走向,即制作顺序)
1 上层--2 中层主框架--3 中层左栏--4 中层右栏--5 下层
下面我们来做示范内容, 源代码请依次往下看,注意注释语句
HTML文档
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!--W3C XHTML声明-->
<head><!--头部开始-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--声明编码,类型-->
<title>无标题文档</title><!--题目-->
<link href="Untitled-2.css" rel="stylesheet" type="text/css" /><!--CSS调用-->
</head><!--头部结束-->
<body><!--主部分开始-->
<div id="daohang" style="background:#000000;"></div><!--导航,为容易区分,所以加上不同背景色及高度,下同-->
<div id="main" style="background:#FFFFFF;"><!--主框架开始-->
<div id="top" style="background:#0033FF;"></div><!--顶部框架-->
<!--注意:使用浮动开始-->
<div><!--限制层开启-->
<div id="center_l" class="float_l" style="height:50px; background:#FF0000;"></div><!--左框架-->
<div id="center_r" class="float_r" style="height:300px; background:#3300FF;"></div><!--右框架-->
<div class="clear"></div><!--清除浮动-->
</div><!--限制层闭合-->
<div id="bottom" style="background:#FF6600; height:100px;"></div><!--底部框架-->
</div><!--主框架结束-->
</body><!--主部分结束-->
</html>CSS文档
复制内容到剪贴板
代码:
/* CSS Document */
/*重定义部分敏感内容*/
body{margin:0; text-align:center; background:#333333;}/*距离边缘空隙0,页内内容居中,背景颜色深灰*/
img{border:0px;}/*图片边框0*/
/*书写部分常用class*/
.clear{clear:both;}/*清除浮动*/
.float_l{float:left;}/*左浮动*/
.float_r{float:right;}/*右浮动*/
/*ID书写*/
#daohang{position:absolute; top:0px; left:0px; width:100%; height:20px;} /*顶部导航框架:绝对定位,距离顶部及左部0px,宽度100%,高度20px*/
#main{width:900px; text-align:left; margin:20px; padding-top:0px;}/*主框架:宽度900px,为消除body所定义的所有内容居中导致的文字居中,所以区域重定义全部靠左,向下移动20px,以免被导航遮盖,顶部相隔0,使层及内容置顶*/
#top{width:900px; height:80px;}
/*顶部框架:宽度900px,高度80px*/
#center_l{width:20%;}/*中部左框架:宽度20%*/
#center_r{width:78%;}/*中部右框架:宽度78%,为中间保留2%的空隙*/
#bottom{width:100%;}/*底部框架:宽度100%,使宽度完全充满整个主框架,也可以用width:900px代替*/相信看过本节之后各位能对基本的方法有所熟悉,希望能在学习后通过分析模仿各站点的框架来练习
预告:第7讲...内容细化:<list>的应用,下周更新
[
本帖最后由 水月あ无痕 于 2008-1-27 20:19 编辑 ]
我的助手
