Div+CSS基础教程(二)

日期：2008年6月24日作者：查看:[大字体中字体小字体]

二、写入整体层结构与Css

　　接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
程序代码 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

　　这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

　　下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：
程序代码
<div id="container">
　　<div id="Header">
　　</div>
　　<div id="PageBody">
　　　　<div id="Sidebar">
　　　　</div>
　　　　<div id="MainBody">
　　　　</div>
　　</div>
　　<div id="Footer">
　　</div>
</div>

　　为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

程序代码
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/
#container {width:100%}

/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
[1] [2] [3] 下一页
Div+CSS基础教程(二) 相关文章：
·冰点还原精灵图文教程
·Excel XP函数实用教程精华集
·C语言教程第六章:指针
·用ASP+Access制作论坛教程
·FLASH 8实例教程：瀑布动画制作方法
·PS初学者实例教程——简单水中倒影制作
·Flash百叶窗制作教程
·Auto CAD三维基础实例：弯管制作教程
·传奇私服架设教程
·C语言教程第五章:函数
Div+CSS基础教程(二) 相关软件
·Photoshop视频实例教程系列电子书 V1.0
·《猎杀潜航3》完美全图文教程
·极品五笔教程 2007
·软件破解入门教程和解密常用手册
·动态HTML教程
·MS-DOS基础教程 V4.5
·ACDSEE中文教程
·视频播放、编辑、RMVB压片全教程 V2.0
·3D Max教程 V1.1
·大师之路Photoshop教程 V2.0

上一篇:成功解决编辑器多个问题，自动增加代码，编辑死机问题

下一篇:网页设计技巧：如何隐藏网页中的层DIV

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

Div+CSS基础教程(二)

精品推荐

热点TOP10

特别推荐