首页 > 代码库 > 《CSS网站布局实录》学习笔记(五)

《CSS网站布局实录》学习笔记(五)

第五章 CSS内容排版

5.1 文字排版

5.1.1 通栏排版

  进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距、行距、字号等样式控制,便形成了排版雏形。

5.1.2 分栏排版

  CSS2技术对普通段落文字不能够直接实现分栏排版,如果需要实现类似报纸那样的双栏或者三栏排版,则必须借助于二列布局那样的两个div浮动定位而形成二列控件,然后再将文字分别填充此二列之中。XHTML代码如下:

1 <div id="layout">
2     <div class="col">...</div>
3     <div class="col">...</div>
4 </div>

  对于二列式排版,在包含容器#layout中放置了两个div。CSS代码如下:

 1 [css]
 2 
 3 p {
 4     line-height: 180px;
 5     font-size: 12px;
 6 }
 7 
 8 #layout {
 9     width: 700px;
10     margin: 0px auto;
11 }
12 
13 .col {
14     width: 300px;
15     padding: 0 10px;
16     float: left;
17 }

  直接对用于分栏的.col编写宽度、内边距,向左浮动,从而实现了二栏式排版要求,这与二列式布局的原理是一致的。

  使用CSS2分栏排版并非很好的解决,将文字分成两段放置在两个div中,并不能很好地保证以后的扩展性。对于段落CSS3已经提供了分栏属性column-count和column-width。

5.2 图文混合排版

  传统的表格式布局中,往往通过插入一个表格,再在表格中插入图片,并对表格应用align属性来控制图片居中、居左或居右显示。而在CSS布局中,会有更多的实现效果。

5.2.1 图片基础控制

  text-align属性用于控制对象里的内容居中显示,应用这个属性后,img对象在div中也能保持居中状态。在实际应用中,有时会使文字绕图片排版,这时就可以使用浮动定位的方法,通过设定对象的float属性来使文字内容流入对象的旁边。

5.2.2 不规则文字环绕

  一种特殊的文字环绕排版方式,即希望文字能够沿着图片不规则边缘进行环绕。但是div和img都是以方块形式被插入到页面中,而且浏览器也没有办法识别图片的边缘,这时就需要使用一些技巧性的手段。

  因为图片本身是方块状的,排版无法改变其状态,所以单独插入图片在段落中是行不通的,只有将图片以背景形式放置在文本中。背景与文本是二层挂你想,使用div对象来创建接近不规则的性质,需要插入一些div在段落之前。 XHTML代码如下:

 1 <div id="layout">
 2     <h1>CSS FAQ</h1>
 3     <div id="11"></div>
 4     <div id="12"></div>
 5     <div id="13"></div>
 6     <div id="14"></div>
 7     <div id="15"></div>
 8     <div id="16"></div>
 9     <div id="17"></div>
10     <div id="18"></div>
11     <div id="19"></div>
12     <p>...</p>
13 </div>

  这里插入了9个div对象,并且保持其内容为空的状态,希望9个div方块各自拥有自己的宽高,最终形成一个类似于不规则的边缘效果。CSS代码如下:

 1 [css]
 2 
 3 #11, #12, #13, #14, #15, #16, #17, #18, #19 {
 4     float: left;
 5     clear: left;
 6 }
 7 
 8 #11 { width: 0px; height: 20px; }
 9 #12 { width: 100px; height: 38px; }
10 #13 { width: 150px; height: 20px; }
11 #14 { width: 220px; height: 38px; }
12 #15 { width: 240px; height: 38px; }
13 #16 { width: 240px; height: 38px; }
14 #17 { width: 190px; height: 38px; }
15 #18 { width: 150px; height: 40px; }
16 #19 { width: 120px; height: 20px; }

  首先9个方块都采用了float: left;进行排列,同时每个方块又采用clear: left;,使其左边不允许出现浮动对象,这样每个div之间都不会互相浮动。由于文本没有clear属性,所以就贴近所有div的右边。

5.3 全图排版

  使用CSS布局进行全图排版的核心在于,对浮动定位的控制,而且具有很好的灵活性,可以通过CSS随时改变全图排版的样式。XHTML代码如下:

 1 <div id="layout">
 2     <div>
 3         <img src="sun.jpg" width="100" height="69" />
 4         <h2>Title: Sun</h2>
 5         <h3>Date: 2014-4-29</h3>
 6     <div>
 7     <div>
 8         <img src="wind.jpg" width="100" height="69" />
 9         <h2>Title: Wind</h2>
10         <h3>Date: 2014-4-29</h3>
11     <div>
12     <div>
13         <img src="cloud.jpg" width="100" height="69" />
14         <h2>Title: Cloud</h2>
15         <h3>Date: 2014-4-29</h3>
16     <div>
17     <div>
18         <img src="rain.jpg" width="100" height="69" />
19         <h2>Title: Rain</h2>
20         <h3>Date: 2014-4-29</h3>
21     <div>

  在上述代码中,以#layout作为主容器,并使用div来放置图片。使用div的目的在于。方便控制图片的宽度。除了添加图片还可以添加一些其他信息,如图片名称与拍摄时间等。CSS代码如下:

 1 [css]
 2 
 3 #layout div {
 4     border: 1px solid #aaa;
 5     margin: 3px;
 6     padding: 2px;
 7     width: 126px;
 8     height: 126px;
 9     text-align: center;
10     float: left;
11     overflow: hidden;
12 }
13 
14 h2, h3 {
15     font-size: 11px;
16     font-family: arial;
17     margin: 0px;
18     padding: 0px;
19 }
20 
21 h3 {
22     font-weight: normal;
23     color: #777;
24 }

  在上述CSS代码中,给每个#layout下的div图片区域加上了1px的边框线,并且全部采用float: left;让图片可以顺序排列,设置外边距可以控制与其他图像的间距效果;设置div的宽度和高度,使其排列变得整齐有序;设置padding内边距使得图片与边缘有一定的空间;为了保证因文本过长而导致div被拉高的问题发生,可以设置overflow: hidden;来访问内容扩大的对象;最后在设置文字的样式。

5.4 表格排版

5.4.1 充分使用表格标签

  在传统的表格式布局设计中,往往使用的是表格的3个标签table、tr和td。XHTML还提供了许多表格专用标签,前一章已讲述,这里就不再说明了。

5.4.2 表格样式控制

  表格的样式与其他对象的样式没什么区别。还是使用margin、padding、border、background等属性来对表格进行操作。

5.4.3 表单表格设计

  由于表单中的排版也是通过表格来实现的,因此可以简单地通过表格的样式设计来完成表单设计。