请选择 进入手机版 | 继续访问电脑版

驱动 化学 物理论文 酒店管理系统 08cms 第七章 qq空间 放大电路 英语论文 下载 脆梨漫画 起诉 精品课 奇迹MU 站帮网 片资源库 爱家 智能门铃 数据库清空 翻译软件

查看: 1860|回复: 0

教你了解DIV+CSS系列教程(第6讲)

[复制链接]
发表于 2012-4-25 00:44:01 | 显示全部楼层 |阅读模式
通过第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\" c /><!--声明编码,类型-->
<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代替*/
相信看过本节之后各位能对基本的方法有所熟悉,希望能在学习后通过分析模仿各站点的框架来练习
回复

使用道具 举报

使用 高级模式(可批量传图、插入视频等)
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表