HTML傳統網頁佈局

時間 2020-10-04

標籤 css html 佈局 spa code htm blog three class 欄目 HTML 简体版

原文原文鏈接

頁面效果展現以下：
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;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。