常見的幾種網頁布局

#頭條創作挑戰賽#

第一種：标準流上中下結構

* {
  margin: 0 auto;
  padding:0;
}
div {
  width: 800px;
  text-align: center;
  line-height: 100%;
  margin-bottom: 10px;
}
div>div {
  background-color: #f5f5f5;
  border: 1px dashed black;
}
.boxTop {
  height: 100px;
  line-height: 100px;
}
.boxBanner {
  height: 50px;
  line-height: 50px;
}
.boxMain {
  height: 300px;
  line-height: 300px;
}
.boxFooter {
  height: 150px;
  line-height: 150px;
}           

<div>
  <div class="boxTop">top</div>
	<div class="boxBanner">banner</div>
	<div class="boxMain">main</div>
	<div class="boxFooter">footer</div>
</div>           

标準流布局

第二種：内容左右分欄浮動布局

* {
  margin: 0 auto;
  padding:0;
}
div {
  width: 800px;
  text-align: center;
  line-height: 100%;
  margin-bottom: 10px;
}
div>div {
  background-color: #f5f5f5;
  border: 1px dashed black;
}
.boxTop {
  height: 100px;
  line-height: 100px;
}
.boxBanner {
  height: 50px;
  line-height: 50px;
}
.boxMain {
  height: 300px;
  background-color: white;
  border: 0;
}
.boxCommon {
  height: 300px;
  line-height: 300px;
}
.boxMLeft {
  width: 300px;
  float: left;
}
.boxMRight {
  width: 480px;
  float: right;
}
.boxFooter {
  height: 150px;
  line-height: 150px;
}           

<div>
  <div class="boxTop">top</div>
	<div class="boxBanner">banner</div>
  <div class="boxMain">
    <div class="boxMLeft boxCommon">left</div>
    <div class="boxMRight boxCommon">right</div>
  </div>
  <div class="boxFooter">footer</div>
</div>           

main内容分左右兩欄浮動

第三種：頭尾寬度按照浏覽器寬度自适應，中間内容寬度固定。

* {
  margin: 0 auto;
  padding:0;
}
div {
  background-color: #f5f5f5;
  margin-bottom: 10px;
  text-align: center;
  border: 1px dashed black;
}
.top {
  height: 50px;
  line-height: 50px;
}
.banner {
  width: 800px;
  height: 100px;
  line-height: 100px;
}
.box {
  width: 800px;
  height: 415px;
  background-color: white;
  border: 0;
}
.box li {
  width: 194px;
  list-style: none;
  background-color: #f5f5f5;
  margin-right: 5px;
  float: left;
  border: 1px dashed black;
}
.boxFul li {
  height: 98px;
  margin-bottom: 15px;
}
.boxTul li {
  height: 298px;
}
.box .clearMr {
  margin-right: 0;
}
.footer {
  height: 200px;
  line-height: 200px;
}           

<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
		<!-- ul*2>li*4{$} -->
  	<ul class="boxFul">
    	<li></li>
			<li></li>
			<li></li>
			<li class="clearMr"></li>
		</ul>
		<ul class="boxTul">
  		<li></li>
			<li></li>
			<li></li>
			<li class="clearMr"></li>
		</ul>
</div>
<div class="footer">footer</div>           

top盒子和footer盒子寬度随浏覽器視窗大小變化，中間部分内容寬度固定

今天先總結這三種布局方式，後續學到了再逐漸添加。