当前位置:首页>优优资讯 > 软件教程 > 电脑软件教程 > Dreamweaver入门之块级标签div与行级标签span

Dreamweaver入门之块级标签div与行级标签span

作者:本站整理时间:2015-03-05

　　今天小编要跟大家介绍网页设计中比较特殊的两个标签：块级标签div与行级标签span。特殊并不代表使用的少，反而恰当地使用div标签和span标签能够让网页内容显得更有条理。下面我们就具体来看看。

　　div和span是什么?

　　与其他XHTML标签相比，被div和span包含的元素是没有意义的。例如<h1></h1>标签代表标题，<p></p>标签代表新的自然段。但div和span标签并无此意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含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>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>

上一篇:如何创建创建定数等分点下一篇:Dreamweaver入门之列表属性list的使用

标签块级标签div 行级标签span

相关文章

相关推荐

最新攻略

用户评论

（已有0条评论）

昵称：

表情

注：您的评论需要经过审核才能显示哦，请文明发言！

还没有评论，快来抢沙发吧！

快速检索 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z