什么是样式表:
CSS 是
Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
DIV结构如下:
│body {} /*HTML元素*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
下面开始创建index.htm和index.css这两个文件:
首先创建index.htm文件:
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > div+css </ title >
< link href ="css.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > div+css </ title >
< link href ="css.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
</ body >
</ html >
接下在<body></body>标签中加入一下内容:
<
div
id
="container"
>
<!--
页面层容器
-->
< div id ="Header" > 我的主页 <!-- 页面头部 -->
</ div >
< div id ="PageBody" > 页面主体 <!-- 页面主体 -->
</ div >
< div id ="Footer" > 页面底部 <!-- 页面底部 -->
</ div >
</ div >
< div id ="Header" > 我的主页 <!-- 页面头部 -->
</ div >
< div id ="PageBody" > 页面主体 <!-- 页面主体 -->
</ div >
< div id ="Footer" > 页面底部 <!-- 页面底部 -->
</ div >
</ div >
其次,接下来在index.css文件内写入一下内容:
/**/
/*基本信息*/
body {...} {font:12px Tahoma;margin:0px ;text-align:center;background;#ffffff;}
/**/ /*页面层容器*/
#container {...} {width:100%}
/**/ /*页面头部*/
#Header {...} {font:36px Tahoma ;width:800px;margin:0 auto;height:150px;background:#eecc99}
/**/ /*页面主体*/
#PageBody {...} {width:800px;margin:0 auto;height:400px;background:#ccff00}
/**/ /*页面底部*/
#Footer {...} {width:800px;margin:0 auto;height:50px;background:#00ffff}
body {...} {font:12px Tahoma;margin:0px ;text-align:center;background;#ffffff;}
/**/ /*页面层容器*/
#container {...} {width:100%}
/**/ /*页面头部*/
#Header {...} {font:36px Tahoma ;width:800px;margin:0 auto;height:150px;background:#eecc99}
/**/ /*页面主体*/
#PageBody {...} {width:800px;margin:0 auto;height:400px;background:#ccff00}
/**/ /*页面底部*/
#Footer {...} {width:800px;margin:0 auto;height:50px;background:#00ffff}
最后我们把这两个文件index.htm和index.css保存在同一个文件夹内,然后用浏览器打开index.htm文件,我们就能在浏览器内看到页面的基本框架了。