HTML DIV标签布局

╰半橙微兮° 2022-02-01 19:13 572阅读 0赞

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

<!DOCTYPE HTML>

<html>  
<head>  
  
<style type="text/css">  
body\{  
margin: auto;  
width: 800px;  
\#max-width: 100%;  
\}  
.header\{  
width: 100%;  
height:30px;  
background-color: blue;  
\}  
.content\{  
width:100%;  
height: 100px;  
background-color: \#f8f8f8;  
\}  
.content-left\{  
float:left;  
height:100%;  
width:100px;  
background-color: yellow;  
\}  
.content-mid\{  
height:100%;  
float:left;  
width:200px;  
background-color: green;  
\}  
.content-right\{  
height:100%;  
float:right;  
width:300px;  
background-color: \#167676;  
\}  
.footer\{  
width: 100%;  
height: 50px;  
background-color: gray;  
\}  
</style>  
</head>  
  
<body>  
<div class="header">  
I am Header  
</div>  
  
  
<div class="content">  
<div class="content-left">  
I am content left  
</div>  
<div class="content-mid">  
I am content mid  
</div>  
<div class="content-right">  
I am content right  
</div>  
</div>  
  
<div class="footer">  
I am footer  
</div>  
</body>

</html>

效果演示如下：

![Center][]

[Center]: /images/20220126/3dec4f3f1dc24f64b550e5cd9db3f61c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 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 赞/ 36 阅读

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

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

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

相关 html container标签_HTML 布局元素

网站布局大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。大多数网站可以使用或者网页布局对改善网站的外观非常重要，请慎重

不念不忘少年蓝@/ 2023年01月10日 13:08/ 0 赞/ 216 阅读

相关 html布局垂直居中显示,【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为： .style\{margin:0 auto;\} 数

╰半橙微兮°/ 2022年10月09日 04:58/ 0 赞/ 266 阅读

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

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

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

相关 HTML - 布局div

http://[blog.csdn.net/pipisorry/article/details/78929615][blog.csdn.net_pipisorry_articl

今天药忘吃喽~/ 2022年06月02日 01:28/ 0 赞/ 545 阅读

相关 html切换div标签

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

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

相关 HTML DIV标签布局

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

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

相关 HTML DIV标签

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

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

相关 HTML <div>标签

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

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