软件发布| 专题库| 优优资讯| 苹果专区| 安卓专区| 软件下载| 首页
优优资讯 电脑教程 安卓教程 安卓攻略 苹果教程 苹果攻略 新闻资讯

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>
 

用户评论

(已有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