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

《CSS网站布局实录》学习笔记（五）

2024-07-02 01:18:53   232人阅读

第五章 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 表单表格设计

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


联系
我们