console
<!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>
.div1 {
width: 50px;
height: 30px;
border: 1px solid rgb(123, 202, 5);
background-color: rgb(123, 202, 5);
margin: 0;
padding: 8px 1px 1px 1px;
text-align: center;
float: left;
}
.div2 {
width: 50px;
height: 30px;
border: 1px solid gray;
background-color: gray;
margin: 0;
padding: 8px 1px 1px 1px;
text-align: center;
float: left;
}
.div3 {
width: 95px;
height: 30px;
border: 1px solid gray;
background-color: gray;
margin: 0;
padding: 8px 1px 1px 1px;
text-align: center;
float: left;
}
.div4 {
width: 95px;
height: 30px;
border: 1px solid gray;
background-color: gray;
margin: 0;
padding: 8px 1px 1px 1px;
text-align: center;
float: left;
}
.div5 {
width: 820px;
height: 39px;
border: 1px solid gray;
background-color: gray;
}
.div6 {
width: 155px;
height: 30px;
border: 1px solid rgb(233, 232, 232);
background-color: rgb(233, 232, 232);
margin: 20px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
z-index: 2;
position: absolute;
}
.div13 {
width: 400px;
height: 110px;
border: 1px solid rgb(57, 120, 255);
background-color: rgb(57, 120, 255);
margin: 20px 0px 0px 205px;
padding: 15px 0px 0px 195px;
float: left;
z-index: 1;
position: absolute;
}
.div13,
.div13 h1 {
color: white;
}
.div7 {
width: 155px;
height: 30px;
border: 1px solid rgb(51, 130, 235);
background-color: rgb(51, 130, 235);
margin: 65px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
}
.div8 {
width: 155px;
height: 30px;
border: 1px solid rgb(233, 232, 232);
background-color: rgb(233, 232, 232);
margin: 5px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
}
.div9 {
width: 155px;
height: 30px;
border: 1px solid rgb(233, 232, 232);
background-color: rgb(233, 232, 232);
margin: 5px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
}
.div14 {
width: 595px;
height: 190px;
margin: 0px 0px 0px 205px;
z-index: 1;
position: absolute;
text-align: left;
}
.div14,
.div14 h1 {
color: black;
}
.div10 {
width: 155px;
height: 30px;
border: 1px solid rgb(233, 232, 232);
background-color: rgb(233, 232, 232);
margin: 5px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
}
.div11 {
width: 155px;
height: 30px;
border: 1px solid rgb(233, 232, 232);
background-color: rgb(233, 232, 232);
margin: 5px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
}
.div12 {
width: 155px;
height: 30px;
border: 1px solid rgb(233, 232, 232);
background-color: rgb(233, 232, 232);
margin: 5px 0px 0px 10px;
padding: 8px 0px 0px 8px;
text-align: left;
clear: both;
}
.div15 {
width: 810px;
height: 50px;
border: 1px solid rgb(65, 64, 64);
background-color: rgb(65, 64, 64);
z-index: 1;
position: absolute;
text-align: left;
margin: 30px 0px 0px 0px;
color: white;
padding: 20px 0px 0px 10px;
}
</style>
</head>
<body>
<div class="div1">主页</div>
<div class="div2">新闻</div>
<div class="div3">联系我们</div>
<div class="div4">关于我们</div>
<div class="div5"></div>
<div class="div6">The Flight</div>
<div class="div13">
<h1>The City</h1>
</div>
<div class="div7">The City</div>
<div class="div8">The lsland</div>
<div class="div14">
<h1>关于</h1>
<p>
查尼亚是克里特岛查尼亚地区的首府。这个城市可以分为两部分,老城区和现代城区。
</p>
<p>
你将在后面的章节了解更多关于响应性网页。
</p>
</div>
<div class="div9">The Food</div>
<div class="div10">The People</div>
<div class="div11">The History</div>
<div class="div12">The Oceans</div>
<div class="div15">底部文本</div>
</body>
</html>