<!DOCTYPE?html>
<html>
<head>
??<meta?charset="UTF-8">
??<title>圣杯布局練習</title>
??<style>
????/*標簽樣式區*/
????*{
??????margin:0;
??????padding:0;
??????font-family:?"微軟雅黑";
??????font-size:?16px;
????}
????body{
??????min-width:?900px;
????}
????ul{
??????list-style:?none;
????}
????a{
??????color:#fff;
??????text-decoration:?none;
????}
????.header,.footer{
??????height:?50px;
??????line-height:?50px;
??????background-color:?#333;
????}
????/*中部樣式區*/
????.container{
??????padding:0?330px?0?300px;
??????min-height:?300px;
????}
????.left,.mid,.right{
??????min-height:?300px;
??????position:?relative;
??????float:left;
????}
????.left{
??????background-color:?#999;
??????width:?300px;
????}
????.mid{
??????background-color:?pink;
????}
????.right{
??????background-color:?blue;
????}
????/*頂部樣式區*/
????.header?img{
??????height:?50px;
??????width:?160px;
????}
????.nav{
??????float:right;
??????height:?50px;
??????line-height:?50px;
????}
????.nav_li{
??????float:?left;
??????height:?50px;
??????line-height:?50px;
??????width:?80px;
????}
????/*底部樣式區*/
????.bot{
??????max-width:?500px;
??????height:?50px;
??????line-height:?50px;
??????margin:0?auto;
????}
????.bot_li{
??????height:?50px;
??????line-height:?50px;
??????width:80px;
??????float:?left;
????}
</style>
</head>
<body>
??<!--?頁面頂部?-->
??<div>
??????<img?src="http://climg.mukewang.com/590037f600016ce303000100.png"?alt="">
????<ul>
??????<li><a?href="#">課程</a></li>
??????<li><a?href="#">路徑</a></li>
??????<li><a?href="#">實戰</a></li>
??????<li><a?href="#">猿問</a></li>
??????<li><a?href="#">手記</a></li>
????</ul>
??</div>
??<!--?頁面內容區?-->
??<div>
????<div>mid</div>
????<div>left</div>
????<div>right</div>
??</div>
??<!--?頁面底部?-->
??<div>
????<ul>
??????<li><a?href="#">網站首頁</a></li>
??????<li><a?href="#">企業合作</a></li>
??????<li><a?href="#">人才招聘</a></li>
??????<li><a?href="#">聯系我們</a></li>
??????<li><a?href="#">常見問題</a></li>
??????<li><a?href="#">友情鏈接</a></li>
????</ul>
??</div>
</body>
</html>
請問這種情況怎么添加樣式實現圣杯布局？
慕婉清0895596
2017-09-06 16:14:43
