053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css排版详解

时间:2017-08-16

css排版的观念需要大家掌握的是如何用div来分块。如图:

css排版详解

我们分别用container,banner,content,links,和footer.这五个id选择器来分块。其中container是页面的一个容器。#banner是网页的头部。#content是网页的主体内容。#link是导航链接,footer是网页的尾部。
 
接着,我通过css 设置可以把每个块调整位置。我们看看代码:
 

以下为引用的内容:

<html>
<head>
<style type="text/css">
<!--
body {
 margin:0px;
 font-size:13px;
 font-family:Arial;

#container{
 position:relative;
 width:100%;
}
#banner{
 height:80px;
 border:1px solid #000000;
 text-align:center;
 background-color:#a2d9ff;
 padding:10px;
 margin-bottom:2px;
}
#content{
 float:left;
 text-align:center;
 padding-right:200px; /* 内容往回挤200px */
}
#links{
 float:right;
 width:200px;
 border:1px solid #000000;
 margin-left:-200px;  /* 强行往左拉回200px */
 text-align:center;
}
#footer{
 clear:both;    /* 不受float影响 */
 text-align:center;
 height:30px;
 border:1px solid #000000;
}
-->
</style>
<title>CSS排版</title><body>
<div id="container">
 <div id="banner">banner</div>
 <div id="content">
  <div class="blog">
   <div class="date">date</div>
   <div class="blogcontent">
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
   </div>
  </div>
  <div class="others">others</div>
 </div>
 <div id="links">
  <div class="calendarhead">links<br>links<br>links<br>links</div>
  <div class="calendartable">links<br>links<br>links<br>links</div>
  <div class="side">links<br>links<br>links<br>links</div>
  <div class="syndicate">links<br>links<br>links<br>links</div>
  <div class="friends">links<br>links<br>links<br>links</div>
 </div>
 <div id="footer">footer</div>
</div>
</body>
</html>
 

其中的css代码要注意的重点就是;
#content{
 float:left;
#links{
 float:right;
还有
#footer{
 clear:both;    /* 不受float影响 */
 
这三个css代码就实现css定位排版。
相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP