关于html:HTML传统网页布局

46次阅读

共计 1242 个字符,预计需要花费 4 分钟才能阅读完成。

页面成果展现如下:

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

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

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

top

</div>
<div class=”banner”>

banner

</div>
<div class=”box”>

<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”>

footer

</div>
</body>
</html>
css 代码:

  • {
    padding: 0;
    margin: 0;

}
.top {

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

}
.banner {

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

}
.box {

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;

}

正文完
 0