Div+CSS布局

布局分类：

Div+CSS：

    网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”（哪块东西在哪里显示）。
   不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了 “语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，
布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。
Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。
      布局最重要的一个属性就是float，查看资料。
float，浮动。什么是浮动？
布局模式：
    1.文档流
    2.脱离文档流
        2.1   float（浮动）
        2.2   position(绝对定位)


//遇到换行的时候把单词断开
word-break:
    normal(中文会换行，普通的英文（带空格的）遇到换行会按单词换行，连续的英文不会换行)
    break-all（所有的文字该换行时都会换行，遇到单词也会把单词拆开来换行,不保留单词完整性。）
    keep-all(英文还是normal状态，中文也不换行了。)
word-wrap;
    normal
    break-word（带空格的保留单词完整性，连续的英文也会换行，兼容FF）
overflow：
    visible 
    scroll 
    hidden 
    auto
层内文字连续英文不换行的问题，word-break:break-all;
溢出处理。overflow：scroll，overflow：hide

初学不用研究太深，能读懂、会用就可以，备注有很多案例。

演示：
•两个层并排排列float:left;
•层的相对居中margin:0px auto;
•层的自动高度（填满整个屏幕）。见备注1.
•overflow:auto;zoom:1;内部层浮动以后，外部层自适应高度。(zoom:1,缩放比例，1表示1倍大小（原始大小。）)
  
  1 备注1
  2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5     <title></title>
  6     <style type="text/css">
  7       #dv1
  8         {
  9             background-color:Green;
 10             height:100%;
 11         }
 12         html,body
 13         {
 14             height:100%;
 15             padding:0px;
 16             margin:0px;
 17         }
 18     </style>
 19 </head>
 20 <body>
 21     <div id="dv1"></div>
 22 </body>
 23 </html>
 24 ======================================备注2=================================================
 25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 26 <html xmlns="http://www.w3.org/1999/xhtml">
 27  <head>
 28   <title> New Document </title>
 29   <style type="text/css">
 30     html,body
 31     {
 32         height:100%;
 33     }
 34   </style>
 35  </head>
 36 
 37  <body style="height:100%">
 38   <div style="float:left;width:100px;height:100px; border:1px solid blue;">
 39   </div>
 40    <div style="float:right;width:100px;height:100px; border:1px solid blue;">
 41   </div>
 42    <div style="margin:0px auto;;width:100px;height:100%; border:1px solid blue;">
 43   </div>
 44  </body>
 45 </html>
 46 
 47 
 48 http://www.blueidea.com/tech/site/2006/3574.asp
 49 Div+CSS布局：http://www.aa25.cn/layout/
 50 Div+CSS布局： 960.gs
 51 
 52 常用的布局样式：理解eq_2col、eq_3col即可。
 53 .mainBox
 54 {
 55     margin: 0px auto;
 56     width: 944px;
 57 }
 58 .clear {
 59     CLEAR: both
 60 }
 61 .eq_2col
 62 {
 63  float:left;width:50%;
 64 }
 65 
 66 .eq_3col
 67 {
 68  float:left;width:30%;
 69 }
 70 .rp_hfill_autoheight {
 71     MARGIN-BOTTOM: 5px; OVERFLOW: auto
 72 }
 73 
 74 案例，网页右下角的广告图片（假冒QQ消息）
 75 IE6不支持position: fixed;
 76 使用资源 51xp.gif
 77 
 78     <style type="text/css">
 79         #jb51_yxj
 80         {
 81             position: fixed;
 82             background-color: #fff66f;
 83             width: 250px;
 84             bottom: 0px;
 85             overflow: hidden;
 86             right: 0px;
 87             _position: absolute;
 88             _bottom: auto;
 89         }
 90     </style>
 91 页面中插入多个回车，以出现滚动条：
 92     <div id="jb51_yxj">
 93         <img src="51xp.gif" />
 94     </div>
 95 
 96 案例：顶部菜单
 97     <style type="text/css">
 98         #nav ul
 99         {
100             list-style-type:none;
101         }
102         #nav ul li
103         {
104             float:left;
105             margin:0 10px;
106         }
107         .menuSeparator {width:1px;height:18px;background:Red}
108     </style>
109 <div id="nav">
110     <ul>
111         <li><a href="http://www.itcast.cn">传智播客</a></li>
112         <li class="menuSeparator"></li>
113         <li><a href="http://www.rupeng.com">如鹏网</a></li>
114         <li class="menuSeparator"></li>
115         <li><a href="http://www.google.com">谷歌</a></li>
116     </ul>
117 </div>
118 li中的项横排显示是float:left;的作用，margin:0 10px;的作用是不让各个项之间紧挨着。项之间的分割竖线是用一个宽度为1，高度为18的红色背景的li做的。
119 
120 
121 常用css布局http://www.aa25.cn/layout/

 

posted @ 2013-03-21 16:57  Big.Eagle  阅读(268)  评论(0)    收藏  举报