什么是样式表：
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
>
</
body
>
</
html
>
接下在<body></body>标签中加入一下内容：
<
div
id
="container"
>
<!--
页面层容器
-->
<
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}
最后我们把这两个文件index.htm和index.css保存在同一个文件夹内，然后用浏览器打开index.htm文件，我们就能在浏览器内看到页面的基本框架了。
扫一扫
3350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
