实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.man_box{
width:800px;
}
.top_head{
height:150px;
background-color:gray;
font-size:30px;
color:white;
display:flex;
justify-content:left;
align-items:center;
padding:10px;
}
.list_box{
width:150px;
float:left;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{
margin-bottom:8px;
padding:8px;
background-color:#33b5eb;
}
a{
text-align:left;
color:white;
text-decoration:none;
}
li:hover{
background-color:blue;
} .content_box{
width:650px;
float:right;
}
.footer_box{
display:flex;
justify-content:left;
align-items:center;
background-color:gray;
height:100px;
color:white;
clear:both;
padding:10px;
}
.content_p{
font-size:20px;
text-indent:2em;
padding:10px;
}
</style>
</head>
</body>
<h1>web 布局实例</h1>
<div class="man_box">
<div class="top_head">
<div>ShanHai</div>
</div>
<div class="list_box">
<ul>
<li><a href="https://www.dwoke.com">The Flight</a></li>
<li><a href="https://www.dwoke.com">The City</a></li>
<li><a href="https://www.dwoke.com">The Attractions</a></li>
<li><a href="https://www.dwoke.com">The Food</a></li>
</ul>
</div>
<div class="content_box">
<h1 style="text-align:center;">This Is Content Title!</h1>
<p class="content_p"> this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content.this is some content.</p>
</div>
<div class="footer_box">
<p class="fotter_p">Fotter text</p>
</div>
</div>
</body>
</html>
运行效果：
评论