A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 潘迪海 中级黑马   /  2013-4-6 16:24  /  1366 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

HTML中 DIV标签的具体用法是怎么样的  谁帮忙介绍一下  举个小例子

4 个回复

倒序浏览
本帖最后由 韦俊琳 于 2013-4-6 16:43 编辑

在css文件定义:
  1. #header {
  2. float:left;
  3. width:800px;
  4. height: 100px;
  5. margin:auto 0px;
  6. background:red;
  7. clear:both;

  8. }
复制代码
然后在html页面使用方法:
  1. <head>
  2. <title>div+css网页布局</title>
  3. </head>
  4. <body>
  5. <div id="header">  //这部分的效果就是你在css文件中定义的效果
  6. </div>
  7. </body>
  8. </html>
复制代码
注意:如果在css文件中定义为:
#header {...},引用方法为id="header"
.header{...},引用方法为class="header"


回复 使用道具 举报
  1. <div style="background:#f90; text-align:center;">test</div><div style="background:#f60"><span>usemen:</span><input type="text" style="border:1px solid #ccc; width:200px; height:20px;" ></div><div style="background:#f60"><span>usemen:</span><input type="text" style="border:1px solid #ccc; width:200px; height:20px;" ></div>
复制代码
不过div我用的可少了,我用table布局。
不知道能帮助您不??

0.jpg (28.65 KB, 下载次数: 8)

0.jpg
回复 使用道具 举报
http://developer.51cto.com/art/201008/221366.htm

这个不错的
回复 使用道具 举报
本帖最后由 黑马田杰 于 2013-4-7 18:18 编辑

试试这个:
<div>
  <div id="header">这是头部</div>
  <div id="sidebar">这是左边菜单</div>
  <div id="content">这是正文</div>
  <div id="footer">这是尾部</div>
</div>


#header { height:100px; background:red; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:green;margin-bottom:5px;}
#content { margin:0 205px; height:500px; background:yellow;}
#footer { height:60px; background:gray;}

评分

参与人数 1技术分 +1 收起 理由
苏波 + 1

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马