您的位置：首页 > Web前端 > HTML

html第二天div布局盒模型概念

2016-05-04 19:36 489 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*自适应: margin:0px auto;*/

/*margin特性：
1/上下相邻的普通元素，上下边距不会相加，会产生重叠现象。
2/两者重叠取最大值。
3/父子div也会发生重叠现象。
*/
/*内联元素，块状元素转换：
1/display:none;//无
2/display:inline;//内联
3/displya:block;//块状
*/
/*段落控制:
1/text-indent:20px;//段落缩进
2/text-align:center;//居中
*/
/*字体控制：
1/font-weight:bold;
2/font-size:20px;//字体
3/line-height:46px;//行高
4/font-family:"微软雅黑";//字体
5/font:bold 23px/46px "微软雅黑";
6/font-family:sans-serif sansif;//无衬线字体和有衬线字体
*/
body {
color:white;
font-size:24px;
}
#body{
width:1002px;
margin:0px auto;

}
#header{
width:1002px;
height:100px;
background:blue;
}
#main{
width:1002px;
height:600px;
background: yellow;
}
#lside{
width:700px;
height:600px;
background: yellow;
float:left;
}
#rside{
width:302px;
height:400px;
float:right;
}
#footer{
width:1002px;
height:100px;
background: grey;
}
#lside .l_part{
width:320px;
height:270px;
margin:10px;
background: black;
float:left;
border:white 5px outset;
}
#rside .r_part1{
width:292px;
height:350px;
background:pink;
margin-top:10px;
margin-right:10px;

}
#rside .r_part2{
width:292px;
height:220px;
background:brown;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

</style>
</head>
<body>

<div id = "body">
<div id = "header">头部</div>
<div id = "main">
<div id = "lside">
<div class = "l_part">左上1</div>
<div class = "l_part">左上2</div>
<div class = "l_part">左下1</div>
<div class = "l_part">左下2</div>
</div>
<div id = "rside">
<div class = "r_part1">右上</div>
<div class = "r_part2">右下</div>
</div>
</div>
<div id = "footer">脚部</div>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html div布局

相关文章推荐

新的分享

章节导航