《CSS网站布局实录》学习笔记（五）
2020-11-15 18:54
标签：com http blog style class div img code java c log 第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时，只要直接将段落文字放置于p或者其他对象中，再对段落文字应用间距、行距、字号等样式控制，便形成了排版雏形。 5.1.2 分栏排版 CSS2技术对普通段落文字不能够直接实现分栏排版，如果需要实现类似报纸那样的双栏或者三栏排版，则必须借助于二列布局那样的两个div浮动定位而形成二列控件，然后再将文字分别填充此二列之中。XHTML代码如下： 对于二列式排版，在包含容器#layout中放置了两个div。CSS代码如下： 直接对用于分栏的.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代码如下： 这里插入了9个div对象，并且保持其内容为空的状态，希望9个div方块各自拥有自己的宽高，最终形成一个类似于不规则的边缘效果。CSS代码如下： 首先9个方块都采用了float: left;进行排列，同时每个方块又采用clear:
left;，使其左边不允许出现浮动对象，这样每个div之间都不会互相浮动。由于文本没有clear属性，所以就贴近所有div的右边。 5.3 全图排版 使用CSS布局进行全图排版的核心在于，对浮动定位的控制，而且具有很好的灵活性，可以通过CSS随时改变全图排版的样式。XHTML代码如下： 在上述代码中，以#layout作为主容器，并使用div来放置图片。使用div的目的在于。方便控制图片的宽度。除了添加图片还可以添加一些其他信息，如图片名称与拍摄时间等。CSS代码如下： 在上述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 表单表格设计 由于表单中的排版也是通过表格来实现的，因此可以简单地通过表格的样式设计来完成表单设计。 《CSS网站布局实录》学习笔记（五）,搜素材,soscw.com 《CSS网站布局实录》学习笔记（五） 标签：com http blog style class div img code java c log 原文地址：http://www.cnblogs.com/janessasmith/p/3698799.html1 div id="layout">
2 div class="col">...div>
3 div class="col">...div>
4 div>
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 }
1 div id="layout">
2 h1>CSS FAQh1>
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>
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; }
1 div id="layout">
2 div>
3 img src="sun.jpg" width="100" height="69" />
4 h2>Title: Sunh2>
5 h3>Date: 2014-4-29h3>
6 div>
7 div>
8 img src="wind.jpg" width="100" height="69" />
9 h2>Title: Windh2>
10 h3>Date: 2014-4-29h3>
11 div>
12 div>
13 img src="cloud.jpg" width="100" height="69" />
14 h2>Title: Cloudh2>
15 h3>Date: 2014-4-29h3>
16 div>
17 div>
18 img src="rain.jpg" width="100" height="69" />
19 h2>Title: Rainh2>
20 h3>Date: 2014-4-29h3>
21 div>
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 }
上一篇：如何消除网页下方多余的空白