本文介绍了一个使用HTML和CSS实现的复杂格子布局案例。通过不同的布局技巧，将页面划分为多个区域，每个区域都有特定的颜色和尺寸。文章展示了如何利用浮动、定位等属性来创建一个清晰且美观的网页布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格子布局</title>
<style>
.father{
border: 10px solid white;
width: 500px;
height: 600px;
float:left;
font-size: 40px;
text-align: center;
line-height: 100px;
}
.top div{
width: 100px;
height: 100px;
background-color: #00801F;
float:left;
}
.center_left{
float:left;
}
.left_top{
width: 300px;
height: 100px;
background-color: #FFFD4B;
}
.c_left{
width: 150px;
height: 150px;
float:left;
background-color: #7F8081;
}
.c_right{
width: 150px;
height: 150px;
float:right;
background-color: black;
color:white;
}
.left_bottom{
width: 300px;
height: 100px;
background-color:red;
float:left;
}
.center_right{
float: right;
}
.right_top{
width: 200px;
height: 200px;
background-color: #00D5D9;
}
.right_bottom{
width: 200px;
height: 150px;
background-color: #00FFFE;
}
.bottom{
width: 500px;
height: 150px;
background-color: #0026F7;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="top">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="center">
<div class="center_left">
<div class="left_top">6</div>
<div class="left_center">
<div class="c_left">8</div>
<div class="c_right">9</div>
</div>
<div class="left_bottom">11</div>
</div>
<div class="center_right">
<div class="right_top">7</div>
<div class="right_bottom">10</div>
</div>
</div>
<div class="bottom">12</div>
</div>
</body>
</html>
扫一扫
3692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
