黑马程序员技术交流社区

标题: DIV布局问题 [打印本页]
作者: 潘迪海    时间: 2013-4-6 16:24
标题: DIV布局问题
HTML中 DIV标签的具体用法是怎么样的  谁帮忙介绍一下  举个小例子
作者: 韦俊琳    时间: 2013-4-6 16:41
本帖最后由 韦俊琳 于 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;

  9. }
复制代码
然后在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"


作者: 郑丹丹1990    时间: 2013-4-6 17:08
  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, 下载次数: 11)

0.jpg
作者: 郑丹丹1990    时间: 2013-4-6 17:10
http://developer.51cto.com/art/201008/221366.htm

这个不错的
作者: 黑马田杰    时间: 2013-4-7 18:14
本帖最后由 黑马田杰 于 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;}




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2