效果显示:
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
li {
list-style : none;
}
.top {
height: 155px;
background-color : gray;
}
.top .up {
height: 64px;
background-color : pink;
}
.top .down {
height: 91px;
}
.banner {
width : 1180px;
height : 110px;
margin : 10px auto;
background-color : gray;
}
.banner .left {
float : left;
width : 132px;
height: 72px;
background-color : skyblue;
margin-right : 8px;
}
.banner .middle {
float : left;
width : 762px;
height: 66px;
background-color : skyblue;
margin-right : 30px;
}
.banner .right {
float : left;
width : 244px;
height: 66px;
background-color : skyblue;
}
.box {
width : 1180px;
height : 600px;
margin : 0 auto;
background-color : gray;
}
.box li {
float : left;
width : 290px;
height: 145px;
background-color : pink;
margin : 5px 0 0 5px;
}
.footer {
height: 60px;
background-color : gray;
margin-top : 10px;
}
</style>
</head>
<body>
<div class="top">
<div class="up">top上面的设置</div>
<div class="down">top下面的设置</div>
</div>
<div class="banner">
<div class = "left">左边的内容</div>
<div class = "middle">中间的内容</div>
<div class = "right">右边的内容</div>
</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>