您的位置:首页> 前端教程> HTML教程
文章导航

HTML <div>标签

2018-5-26 13:11| 作者: admin| 查看: 3010| 评论: 0|来自: 蚂蚁部落

div是块级元素,主要用作大的框架布局,比如将网页划分左中右结构。

也就是说网页的骨架主要通过div来架设的,而网页的血肉则是有span、p或者ul等元素完成。

关于块级元素可以参阅CSS 块级/内联元素一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{background:#ffcc99;}
#header {
  margin:0px auto;
  width:1000px;
  height:100px;
  background:#FFFFCC;
}
#menu {
  margin:5px auto;
  width:1000px;
  height:30px;
  line-height:30px;
  color:#99FF99;
  font-weight:bold;
  font-size:14px;
  background:#6699FF;
}
#content {
  margin:5px auto;
  width:1000px;
  height:400px;
  background-color:#cccccc;
}
.content_left {
  float:left;
  width:200px;
  height:400px;
  background:#cc99ff;
}
.content_center {
  float:left;
  width:590px;
  height:400px;
  margin-left:5px;
  background:#cc99ff;
}
.content_right {
  float:left;
  width:200px;
  height:400px;
  margin-left:5px;
  background:#cc99cc
}
#footer1 {
  margin:5px auto;
  background-color:#5185E6;
  color:#FFFFFF;
  border-top:0px solid #F7F7F6;
  height:30px;
  line-height:30px;
  width:1000px;
  padding:5px 0;
  text-align:center;
}
#footer2 {
  margin:5px auto;
  background-color:#3333FF;
  color:#FFFFFF;
  border-top:0px solid #F7F7F6;
  height:30px;
  line-height:30px;
  width:1000px;
  padding:5px 0;
  text-align:center;
}
a{text-decoration:none;}
</style>
</head>
<body>
<div id="header">页面头部</div>
<div id="menu"> </div>
<div id="content">
  <div class="content_left">左侧栏</div>
  <div class="content_center">中间内容</div>
  <div class="content_right">右侧栏</div>
</div>
<div id="footer1">滚动信息栏</div>
<div id="footer2">底部</div>
</body>
</html>
3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

最新评论

返回顶部