HTML传统网页布局

时间 2020-10-04 标签 css html 布局 spa code htm blog three class

页面效果展现以下：
css

<!DOCTYPE html>
<html lang="en">
<head>html

<meta charset="UTF-8">
<title>网页布局</title>

</head>
<link rel="stylesheet" href="网页布局.css">
<body>
<div class="top">布局

top

</div>
<div class="banner">spa

banner

</div>
<div class="box">code

<div class="up">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
</div>
<div class="down">
    <div class="a">5</div>
    <div class="b">6</div>
    <div class="c">7</div>
    <div class="d">8</div>
</div>

</div>
<div class="footer">htm

footer

</div>
</body>
</html>
css代码：blog

{
padding: 0;
margin: 0;

}
.top {three

width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background-color: pink;

}
.banner {it

margin: 10px auto;
width: 1200px;
height: 200px;
line-height: 200px;
background-color: skyblue;
text-align: center;

}
.box {class

width: 1200px;
height: 510px;
margin: 0 auto 10px auto;

}
.box .up>div { /子代选择器/
width: 292.5px;/能够用总宽度减去margin-left的值而后除以小box数，最后一个box再为0/
height: 150px;

line-height: 150px;
text-align: center;
margin-right: 10px;
float: left;
background-color: purple;

}
.box .up .four {

margin-right: 0;

}
.box .down>div {

height: 350px;
margin-top: 10px;
width: 292.5px;
margin-right: 10px;
float:left;
line-height: 350px;
text-align: center;
background-color: greenyellow;

}
.box .down .d {

margin-right: 0;

}
.footer {

width: 100%;
height: 250px;
line-height: 250px;
text-align: center;
background-color: #5141dd;

}