当前位置:首页>优优资讯 > 软件教程 > 电脑软件教程 > Dreamweaver教程之div标签详细介绍

Dreamweaver教程之div标签详细介绍

作者:本站整理 时间:2015-02-10

  在Dreamweaver工具中,div是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。

  块级标签<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的宽度。
 

相关文章

相关推荐

最新攻略

用户评论

(已有0条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!