Dreamweaver 教程-div和span标签在CSS中的应用
资源介绍
源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>下载吧-div和span演示</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
<!－－
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}
－－>
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div>
</body>
</html>上述例子中，首先在页面内定义了一个class为box的div，在它的内部又定义了一个class为boxhead的div。
box属性：width: 30%;表示这个box div占整个页面宽度的30%，而浮动属性float: left; 则表示box div浮动在页面的左侧。
boxhead属性：width: 100%;由于boxhead div在box div之内，那么这里的100%是指box的宽度。
行级标签<span>(行内标签)
修改上个例子中的第一个“<p>我在div内</p>”，修改后的代码如下：
<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>
展开全部