HTML <div>标签

小灰灰 2020-05-16 20:44 812阅读 0赞

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

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

代码实例如下:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<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>
```

发表评论取消回复

表情：

评论列表（有 0 条评论，812人围观）

还没有评论，来说两句吧...

相关阅读

相关 html的无语义标签：div & span

html的无语义标签:div标签和span标签的学习

我会带着你远行/ 2024年05月06日 21:22/ 0 赞/ 27 阅读

相关 HTML＜DIV＞常用标签

目录 1. 什么是DIV 1.1 div是什么意思？ 1.2 div标签怎么用？ 1.3 div布局优势? 1.4 DIV作用是什么？ 1.5 有哪些DIV方式

刺骨的言语ヽ痛彻心扉/ 2023年10月11日 19:37/ 0 赞/ 11 阅读

相关抛弃 div 标签：改用这些 HTML 标签

Div标签是一种 HTML 元素，可用于将网页划分为多个部分，并可使用CSS设置样式。虽然div标签对于创建页面布局和分隔内容很有用，但不应过度或不必要地使用它们。通常最好为您

小咪咪/ 2023年09月26日 23:53/ 0 赞/ 103 阅读

相关 html中的main标签,html中div标签、section标签和acticle标签三者有啥区别,main和div

html中div标签、section标签和acticle标签三者有啥区别什么是html中的div标签、section标签和acticle标签的区别， ![64422808f6

骑猪看日落/ 2022年10月10日 11:21/ 0 赞/ 152 阅读

相关 html5 div标签属性,HTML: <div> 标签

HTML: 标签 HTML 标签定义了HTML文档中的通用容器，该容器通常用于对元素进行分组。此标签通常也称为元素。在线示例文档中创建了三个标签：示例

ゞ浴缸里的玫瑰/ 2022年10月06日 06:57/ 0 赞/ 369 阅读

相关 HTML中 <div>标签内背景图片自适应div大小

只需通过css设置`background-size`属性为`contain`，即`background-size:contain` 注意：一定要在先设置`backgr

左手的ㄟ右手/ 2022年06月05日 12:28/ 0 赞/ 469 阅读

相关 html切换div标签

实现切换table标签实例，如下代码可以直接copy，根据自己需要的样式调试使用。 <!DOCTYPE html> <html lang="en"> <head>

古城微笑少年丶/ 2022年06月01日 01:05/ 0 赞/ 316 阅读

相关 HTML DIV标签布局

这个代码是我学习制作网页时候在网上搜索的到的一篇文章，我也是第一次学，当我看到这个代码的时候首先想到的是创建文本然后复制，保存为test.html。打开先看看实现了怎么样的功能

╰半橙微兮°/ 2022年02月01日 19:13/ 0 赞/ 493 阅读

相关 HTML DIV标签

1. 标签分类常见的html标签大体上分为两种：内联标签、块级标签。内联标签：不会新起一行显示。（常见的有：label、span、a、input、img、select、

男娘i/ 2021年09月14日 02:02/ 0 赞/ 429 阅读

相关 HTML <div>标签

div是块级元素，主要用作大的框架布局，比如将网页划分左中右结构。也就是说网页的骨架主要通过div来架设的，而网页的血肉则是有span、p或者ul等元素完成。

小灰灰/ 2020年05月16日 20:44/ 0 赞/ 813 阅读