console
<body>
<div id='container'>
<div id='header'>
<div id='logo'>
<span>ZXCCHEN</span>
<div id='search'>
<input type="text">
<button>搜索</button>
</div>
</div>
<div id='banner_ul'>
<ul>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
</ul>
</div>
<div id="banner_search">
<a href='#'>something</a>
<a href='#'>something</a>
</div>
</div>
<section id='section1'>
<div id='nav'>
<ul>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
</ul>
</div>
<div id='slide'>
<div id='introduction'>介绍</div>
<div id='scroll_banner'>轮播图</div>
<div id='btn_left'></div>
<div id='btn_right'></div>
<div id='blogname'>ZXCCHEN</div>
<div id='scroll_btn'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="section2">
<span id='headline'>标题</span>
<table border='1'>
<tr>
<th>
<div class="item_display"></div>
<div class="item_description">
<span>小标题</span>
<span>内容</span>
</div>
</th>
<th>
<div class="item_display"></div>
<div class="item_description">
<span>小标题</span>
<span>内容</span>
</div>
</th>
<th>
<div class="item_display"></div>
<div class="item_description">
<span>小标题</span>
<span>内容</span>
</div>
</th>
</tr>
<tr>
<th>
<div class="item_display"></div>
<div class="item_description">
<span>小标题</span>
<span>内容</span>
</div>
</th>
<th>
<div class="item_display"></div>
<div class="item_description">
<span>小标题</span>
<span>内容</span>
</div>
</th>
<th>
<div class="item_display"></div>
<div class="item_description">
<span>小标题</span>
<span>内容</span>
</div>
</th>
</tr>
</table>
</section>
<section id="section3">
<div></div>
<div></div>
<div></div>
</section>
<div id='footer'>
<div id='social_contact'>
<ul>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
<li><a href='#'>something</a></li>
</ul>
<span></span>
<span></span>
</div>
<div id='social_text'>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
*{
margin:0;
padding:0;
font-family:'黑体';
}
div{
border:1px solid black;
box-sizing:border-box;
}
ul{
list-style:none;
}
li{
display:inline-block;
}
a{
text-decoration:none;
color:black;
}
#container{
width:80%;
margin:0 auto;
}
#header{
height:200px;
}
#header #logo,#banner_ul,#banner_search{
display:inline-block;
height:180px;
vertical-align:bottom;
margin-top:20px;
}
#header #logo{
width:50%;
}
#header #logo span{
position:relative;
top:5%;
font-size:46px;
font-weight:800;
letter-spacing:2px;
}
#header #logo #search{
position:relative;
top:10%;
}
#header #logo #search button{
border:none;
}
#header #banner_ul{
width:30%;
}
#header #banner_ul li{
width:35%;
margin-left:20px;
margin-top:10px;
}
#header #banner_search{
width:18%;
}
#header #banner_search a{
display:inline-block;
margin-top:10px;
}
#section1{
height:400px;
}
#section1 #nav{
height:18%;
}
#section1 #nav ul{
width:100%;
margin:0 auto;
}
#section1 #nav ul li{
width:12%;
text-align:center;
margin-right:10px;
line-height:60px;
font-size:18px;
}
#section1 #nav ul li:nth-of-type(1){
margin-left:1%;
}
#section1 #slide{
height:82%;
font-size:0;
}
#section1 #slide #introduction,#scroll_banner{
display:inline-block;
height:100%;
}
#section1 #slide #introduction{
width:32%;
}
#section1 #slide #scroll_banner{
width:68%;
position:relative;
}
#section1 #slide #btn_left,#btn_right{
width:30px;
height:30px;
position:relative;
}
#section1 #slide #btn_left{
top:-40%;
left:1%;
}
#section1 #slide #btn_right{
top:-52%;
left:94%;
}
#section1 #slide #blogname{
position:relative;
top:-50%;
left:26%;
width:120px;
height:40px;
font-size:30px;
}
#section1 #slide #scroll_btn{
position:relative;
top:-43%;
margin-left:16px;
width:28%;
height:1%;
}
#section1 #slide #scroll_btn ul li{
width:19%;
border:1px solid black;
}
#section2{
height:400px;
background-color:yellow;
}
#section2 #headline{
font-size:30px;
font-weight:800px;
}
#section2 table{
border-collapse:collapse;
width:100%;
height:80%;
}
#section2 table .item_display{
background-color:red;
float:left;
width:40%;
height:60%;
}