分享一个简易网站DIV布局图文
发布于：2015-11-22 23:13
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
text-align:center;
margin:0 auto;
}
#waiceng{
width:902px;
height:auto;
border:1px solid black;
/*background:pink;*/
}
#topbox{
width:900px;
height:150px;
/*background:#ebebeb;*/
}
#middlebox{
width:900px;
height:600px;
/*background:red;*/
}
#footbox{
width:900px;
height:200px;
background:green;
}
.nav{
width:100%;
height:10px;
}
#top_logo{
width:200px;
height:100px;
background:red;
}
#top_right{
width:690px;
height:100px;
background:blue;
}
#nav{
/*background:#ffff00;*/
width:100%;
height:10px;
}
#menu,#lianjie{
width:100%;
height:40px;
background:#8b0000;
}
#top_logo,#menu,#middle_left,#nav,#mi_left{float:left;}
#middle_right,#top_right,#mi_right{float:right;}
#middle_left{
width:200px;
height:600px;
background:#ebebeb;
}
#middle_right{
width:690px;
height:100%;
/*background:pink;*/
}
#ri_top,#ri_middle,#ri_foot{
width:100%;
height:193px;
background:#ebebeb;
}
#mi_left{
width:340px;
height:100%;
background:red;
}
#mi_right{
width:340px;
height:100%;
background:blue;
}
</style>
</head>
<body>
<div id="waiceng"><!--外层的DIV-->
<div id="topbox"><!--头部DIV-->
<div id="top_logo">
左边box
</div>
<div id="top_right">
右边box
</div>
<div id="nav"></div>
<div id="menu">
40PX
</div>
</div>
<div></div>
<div id="middlebox"><!--中间部分的DIV-->
<div id="middle_left">
中间左盒子
</div>
<div id="middle_right"><!--右侧盒子-->
<div id="ri_top"><!--右侧上面的盒子-->
右侧上面的盒子
</div>
<div></div>
<div id="ri_middle"><!--右侧中间的盒子-->
<div id="mi_left"><!--中间第二层左侧中间小盒子-->
中间第二层左侧中间小盒子
</div>
<div id="mi_right"><!--中间第二层右侧中间小盒子-->
中间第二层右侧中间小盒子
</div>
</div>
<div></div>
<div id="ri_foot"><!--右侧下面的盒子-->
<div id="mi_left"><!--中间第二层左侧中间小盒子-->
中间第二层左侧中间小盒子
</div>
<div id="mi_right"><!--中间第二层右侧中间小盒子-->
中间第二层右侧中间小盒子
</div>
</div>
</div>
</div>
<div></div>
<div id="footbox"><!--底部的DIV-->
<div id="lianjie"></div>
</div>
</div>
</body>
</html>
0
今日新帖
0
昨日新帖
14
帖子总数
HTML5 CSS3 JS 各种JS框架集干货合集～
Dreamweaver 2015-06-04 10:35
浓缩的精华！从零开始带你认识最新的图片格式WEBP
Dreamweaver 2015-11-18 08:56
经验之谈！前端工程师的简历到底要怎么写？
Dreamweaver 2015-11-20 17:39
进阶篇——什么时候应该避免写代码注释？
Dreamweaver 2015-11-30 15:25
不是我开玩笑，2018 年你还需要学习 JavaScript
Dreamweaver 2017-12-27 19:42
【干货】一名专业的前端开发工程师都能拿多少钱？
Dreamweaver 2018-09-07 14:59
回复:分享一个简易网站DIV布局图文