div布局

最新推荐文章于 2024-06-17 22:21:26 发布

Mi_Yol

最新推荐文章于 2024-06-17 22:21:26 发布

阅读量380

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/m0_52032201/article/details/110572372

版权

div布局

今天刚刚学完div，想总结一下 div相当于一个盒子，div中包含了一个div，既是一个大盒子里装着一个小盒子，作用就是方便网页布局

例子：
三行二列结构：
在这里插入图片描述
HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#header{width:100%;height:120px;background:#099}
#main{width:100%;height:400px;background:#09F}
#left{width:30%;height:100%;float:left;background:#96C}
#right{width:70%;height:100%;float:left;background:#0FC}
#foot{width:100%;background:#F99}
</style>
</head>

<body>
<div id="header"> header</div>
<div id="main">
      <div id="left">left</div>
      <div id="right">right</div> 
</div>
<div id="foot">foot</div>
</body>
</html>

三行三列结构：在这里插入图片描述
HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#header{width:100%;height:120px;background:#00F}
#main{width:100%;height:400px;background:#0CC}
#left{width:30%;height:100%;float:left;background:#99C}
#middle{width:20%;height:100%;float:left;background:#3F9}
#right {width:50%;float:left;height:100%}
#foot{width:100%;height:80px;background:#93C}
</style>
</head>

<body>
<div id="header"> header</div>
<div id="main">
      <div id="left">left</div>
      <div id="right">right</div> 
      <div id="middle">middle</div>
</div>
<div id="foot">foot</div>
</body>
</html>

以此类推，多行多列代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#container{width:100%;height:40px;background:#069}
#nav{width:100%;height:40px;background:#966}
#header{width:100%;height:40px;background:#09F}
#main{width:100%;height:400px;background:#0CC}
#left{width:30%;height:100%;float:left;background:#99C}
#left_up_1{width:100%;background:#069;height:100px}
#left_up_2{width:100%;background:#963;height:100px}
#left_up_3{width:100%;background:#999;height:200px}
#middle{width:20%;height:100%;float:left;background:#3F9}
#center_up_1{width:100%;background:#3CC;height:60px}
#center_up_2{width:100%;background:#93C;height:340px}
#right {width:50%;float:left;height:100%}
#right_up_1{width:100%;background:#366;height:70px}
#right_up_2{width:100%;background:#CF9;height:80px}
#right_up_3{width:100%;background:#3F9;height:120px}
#right_up_4{width:100%;background:#036;height:130px}
#foot{width:100%;height:80px;background:#930}
</style>
</head>

<body>
<div id="container"> header 1</div>
<div id="nav"> header 2</div>
<div id="header"> header 3</div>
<div id="main">
      <div id="left">
      <div id="left_up_1">left_up_1</div>
      <div id="left_up_2">left_up_2</div>
      <div id="left_up_3">left_up_3</div>    
      </div>
      <div id="middle">
      <div id="center_up_1">center_up_1</div>
      <div id="center_up_2">center_up_2</div>
      </div>
      <div id="right">
      <div id="right_up_1">right_up_1</div>
      <div id="right_up_2">right_up_2</div>
      <div id="right_up_3">right_up_3</div>    
      <div id="right_up_4">right_up_4</div>
      </div>

其效果图如下：
在这里插入图片描述

哈哈！第一次做，有点丑哈^_
有什么不对的地方各位大佬指点一下

Mi_Yol

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
div布局

## div与CSS的布局*今天刚刚学完div，想总结一下 div相当于一个盒子，div中包含了一个div，既是一个大盒子里装着一个小盒子，作用就是方便网页布局例子：三行二列结构：HTML代码：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#header{width:100%;height:120
复制链接

扫一扫