|
首先打个比方， 把网页比做中国地图，DIV 则是中国地图上的每个省，也就是说，一个DIV 是一个网页中的一个指定区域
[img]http://album.sina.com.cn/pic/48c1f4d0020007ep[/img]
上图中，一个网页中，有三个区域，2个静态的区域，一个不断漂动的区域，网页上漂浮的广告就是这种了:em15:
中国那么多省，每个省都有一个自己的名字， 同样 网页中每个DIV 都应该有一个自己的名字，这样才能加以区别的
把中国当做一个网页来写
<!--CHINA -->
<DIV ID=湖北></div>
<DIV ID=山东></div>
<DIV ID=四川></div>
<DIV ID=浙江></div>
。
。
。
网页中只需要这样写
那么 湖北。山东。四川 这些位置的特征 我们又怎么样控制呢？
这里就得用到CSS:em20:
有的人或许听过，有的人没听过，CSS是一种 给网页 各个元素 增加 特征的语言
比如说 网页的字体颜色，网页的背景颜色，都可以通过CSS来控制
同样，做为网页的元素之一的DIV 标签 ，其各种属性 都可以通过CSS 来控制
CSS可以直接写在网页的<style> ... </style>标签中
例子如下
<style>
body{ background:#0066cc;font-size:9pt;}
</style>
上面的 body{ background:#0066cc;font-size:9pt;} 可以写成这样
body
{
background:#0066cc;
font-size:9pt;
}
这样看的清楚点
标签名/DIV的ID/CLASS
{
属性名1:属性值;
属性名2:属性值;....
}
还是继续拿 中国这个 实例来说名
现在我要说明 湖北 的属性
#湖北 /*这里是注释，这个是DIV的ID ，ID名字前 一定要带上# 这个符号哦*/
{
面积:100WM2; /*这里是注释，我随便写的个，不是真实面积哦，呵呵*/
人口:100W个; /*这个数据也是假的*/
}
这样网页上的 湖北 就显示出 相应的 特征了
再拿网页来说
给下面 实例 代码 大家 拿到记事本里 保存为HTML ，然后不断 修改，自己添加 ，仔细琢磨下
<style>
#gn /*ID为gn的这个区域的属性*/
{
background:#0066cc; /*背景颜色蓝色*/
width:100px; /*这个区域宽100PX*/
height:100px; /*这个区域高100PX*/
left:100px; /*这个区域到网页左边的距离为100PX*/
top:100px; /*这个区域到网页顶部的距离为100PX*/
color:yellow; /*这个区域字体颜色为黄色*/
font-size:9pt; /*这个区域字体大小为9PT*/
position:absolute; /*这个区域位置关系为绝对*/
}
</style>
<div id=gn>test by gainover</div>
看见上面这个例子 中的 <div id=gn>test by gainover</div>
在 div 区域中可以添加 其他的代码
当 DIV 区域的 属性改变时， 其 区域内的 相应 属性 也跟着改变
反正我说的也不是很清楚
你们自己多多揣摩了
另外DIV 还有一个 CLASS 属性
<DIV ID=gn class=tt></div> <!--大小写在HTML里是无所谓的-->
它的用法和ID 一样
不同的是 ID 在 CSS 里 前面是 # ，而 CLASS 是 .
看下面的例子
<style>
#gn /*ID为gn的这个区域的属性*/
{
background:#0066cc; /*背景颜色蓝色*/
width:100px; /*这个区域宽100PX*/
height:100px; /*这个区域高100PX*/
left:100px; /*这个区域到网页左边的距离为100PX*/
top:100px; /*这个区域到网页顶部的距离为100PX*/
color:yellow; /*这个区域字体颜色为黄色*/
font-size:9pt; /*这个区域字体大小为9PT*/
position:absolute; /*这个区域位置关系为绝对*/
}
.tt /*这里就是用CLASS来控制DIV的属性*/
{
width:200px;
}
</style>
<div id=gn class=tt>test by gainover</div>
再自己测试下吧。。。 就写这么多了。。。 还没吃早饭。饿。。
http://www.beewind.com/archiver/?tid-31429.html
|
