您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>建站知识>>>建站与网页制作知识>>>CSS入门教程——div和span
CSS入门教程——div和span
发表日期:2007/7/19 1:43:00 出处:中国教程网 作者:未知 发布人:gxlan88 已被访问 1817

 

   div和span是什么意思?

    相对与其他XHTML标签,div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签,你知道里面是标题,当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签,他可以将网页分成几个区块。div里面可能包含一个标题,一个段落,也可能包含图片在内的很多元素,甚至div也可以再包含div。而span是行级元素(行内标签),通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行,而span则不会。

当然了,div和span的具体意义和区别脱离开实践是很难说清楚的。下面我们就来看看div和span的应用实例。

   块级标签<div>

     实例页面。源代码如下:

<!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>我真惨!被用来演示CSS!</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内,属性为box。</p>
<p>我在div内,属性为box。</p>
<p>我在div内,属性为box。</p>
<p>我在div内,属性为box。</p>
</div>
</body>
</html>

    在上面的例子中,我们首先在页面内放了一个class为box的div,而在它的内部又放了一个class为boxhead的div。为了便与观察,我们为div添加了背景颜色。下面我们来看看对这两个div定义的前面教程中没有的属性:

    对box的属性:width: 30%;表示这个box div占页面宽度的30%,而浮动属性float: left; 则表示box div浮动在页面的左侧。

    对boxhead的属性:width: 100%;由于boxhead div在box div之内,那么这里的100%是指box的宽度。

   行级标签<span>(行内标签)

    实例页面。本实例在上面实例的基础之上,只修改一段文本的颜色。修改如下代码:

    将第一个“<p>我在div内,属性为box。</p>”修改为

<p><span style="color:red">我在div内,也在span内,</span>属性为box。</p>

    以上只是关于div和span的简单介绍,而实际应用中div和span的用法是非常灵活的。

 

    上篇:CSS入门教程——列表

    下篇:CSS入门教程——盒子

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

山里人网站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:313538590 752398505 联系人:山里人