#头条创作挑战赛#

第一种：标准流上中下结构

* {
  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盒子宽度随浏览器窗口大小变化，中间部分内容宽度固定

今天先总结这三种布局方式，后续学到了再逐渐添加。