《CSS网站布局实录》学习笔记(五)
第五章 CSS内容排版
5.1 文字排版
5.1.1 通栏排版
进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距、行距、字号等样式控制,便形成了排版雏形。
5.1.2 分栏排版
CSS2技术对普通段落文字不能够直接实现分栏排版,如果需要实现类似报纸那样的双栏或者三栏排版,则必须借助于二列布局那样的两个div浮动定位而形成二列控件,然后再将文字分别填充此二列之中。XHTML代码如下:
<div id="layout">
<div class="col">...</div>
<div class="col">...</div>
</div>
对于二列式排版,在包含容器#layout中放置了两个div。CSS代码如下:
[css] p {
line-height: 180px;
font-size: 12px;
} #layout {
width: 700px;
margin: 0px auto;
} .col {
width: 300px;
padding: 0 10px;
float: left;
}
直接对用于分栏的.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代码如下:
<div id="layout">
<h1>CSS FAQ</h1>
<div id="11"></div>
<div id="12"></div>
<div id="13"></div>
<div id="14"></div>
<div id="15"></div>
<div id="16"></div>
<div id="17"></div>
<div id="18"></div>
<div id="19"></div>
<p>...</p>
</div>
这里插入了9个div对象,并且保持其内容为空的状态,希望9个div方块各自拥有自己的宽高,最终形成一个类似于不规则的边缘效果。CSS代码如下:
[css] #11, #12, #13, #14, #15, #16, #17, #18, #19 {
float: left;
clear: left;
} #11 { width: 0px; height: 20px; }
#12 { width: 100px; height: 38px; }
#13 { width: 150px; height: 20px; }
#14 { width: 220px; height: 38px; }
#15 { width: 240px; height: 38px; }
#16 { width: 240px; height: 38px; }
#17 { width: 190px; height: 38px; }
#18 { width: 150px; height: 40px; }
#19 { width: 120px; height: 20px; }
首先9个方块都采用了float: left;进行排列,同时每个方块又采用clear: left;,使其左边不允许出现浮动对象,这样每个div之间都不会互相浮动。由于文本没有clear属性,所以就贴近所有div的右边。
5.3 全图排版
使用CSS布局进行全图排版的核心在于,对浮动定位的控制,而且具有很好的灵活性,可以通过CSS随时改变全图排版的样式。XHTML代码如下:
<div id="layout">
<div>
<img src="sun.jpg" width="100" height="69" />
<h2>Title: Sun</h2>
<h3>Date: 2014-4-29</h3>
<div>
<div>
<img src="wind.jpg" width="100" height="69" />
<h2>Title: Wind</h2>
<h3>Date: 2014-4-29</h3>
<div>
<div>
<img src="cloud.jpg" width="100" height="69" />
<h2>Title: Cloud</h2>
<h3>Date: 2014-4-29</h3>
<div>
<div>
<img src="rain.jpg" width="100" height="69" />
<h2>Title: Rain</h2>
<h3>Date: 2014-4-29</h3>
<div>
在上述代码中,以#layout作为主容器,并使用div来放置图片。使用div的目的在于。方便控制图片的宽度。除了添加图片还可以添加一些其他信息,如图片名称与拍摄时间等。CSS代码如下:
[css] #layout div {
border: 1px solid #aaa;
margin: 3px;
padding: 2px;
width: 126px;
height: 126px;
text-align: center;
float: left;
overflow: hidden;
} h2, h3 {
font-size: 11px;
font-family: arial;
margin: 0px;
padding: 0px;
} h3 {
font-weight: normal;
color: #777;
}
在上述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网站布局实录》学习笔记(五)的更多相关文章
- 《CSS网站布局实录》学习笔记(一)
今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...
- 《CSS网站布局实录》学习笔记(六)
第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核 ...
- 《CSS网站布局实录》学习笔记(四)
第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...
- 《CSS网站布局实录》学习笔记(三)
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
- 《CSS网站布局实录》读书笔记
从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...
- 《css网站布局实录》(李超)——读书札记
1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6. ...
- 《CSS网站布局实录》学习笔记(二)
第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
随机推荐
- 柔性数组-读《深度探索C++对象模型》有感 (转载)
最近在看<深度探索C++对象模型>,对于Struct的用法中,发现有一些地方值得我们借鉴的地方,特此和大家分享一下,此间内容包含了网上搜集的一些资料,同时感谢提供这些信息的作者. 原文如下 ...
- 转:微博CacheService架构浅析
文章来自于:http://www.infoq.com/cn/articles/weibo-cacheservice-architecture 微博作为国内最大的社交媒体网站之一,每天承载着亿万用户的服 ...
- 转:更改 centos yum 源
centos下可以通过yum很方便快捷的安装所需的软件和库,如果yum的源不好,安装速度会非常慢,centos默认官方源似乎都是国外的,所以速度无法保证,我一直使用163的源,感觉速度不错.下面就说说 ...
- protractor protractor.conf.js [launcher] Process exited with error code 1 undefined:1190
y@y:karma-t01$ protractor protractor.conf.js [launcher] Process exited with error code undefined: vl ...
- pl/sql 程序块里打印问题
declare v_number NUMBER; v_number2 NUMBER; begin select count(*) into v_number from dual; DBMS_OUTPU ...
- Java NIO 和 IO 的区别详解
Java NIO为jdk1.4提供了新的API,本文主要来比较一下Java中NIO和IO的区别,Java初学者可以了解一下. 下表总结了Java NIO和IO之间的主要差别,我会更详细地描述表中每部分 ...
- 网络智能和大数据公开课Homework3 Map-Reduce编程
Web Intelligence and Big Data by Dr. Gautam Shroff 这门课是关于大数据处理,本周是第一次编程作业,要求使用Map-Reduce对文本数据进行统计.使用 ...
- 关于this的使用
一.关于this的使用 javaScript的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境 二.具体到实际应用中,this指向大致可以分为 ...
- maven + selenium + jenkins 教程收集
maven + selenium + jenkins 教程收集 Complete Guide for Selenium integration with jenkins Maven http://le ...
- ECLIPSE/MYECLIPSE OPERATES
Eclipse相关操作 1.删除所有注释 1.eclipse删除所有注释 Ctrl+F: /\*{1,2}[\s\S]*?\*/ 选择正则表达式,替换全部即可.