- CSS3+DIV网页样式与布局从入门到精通（微课精编版）
- 前端科技编著
- 5765字
- 2021-03-31 19:11:16
3.4 案例实战
下面结合案例讲解网页字体样式和文本版式设计，同时介绍各种网页设计的技巧。
3.4.1 设计Logo样式
视频讲解
本案例将利用CSS3自定义字体模拟百度公司Logo字体样式，设计效果如图3.22所示。百度Logo的字体样式：“百度”二字是在“综艺体”的基础上稍加修改而成，英文字体是Handel Gothic BT。
图3.22 模拟百度Logo效果
【操作步骤】
第1步，新建HTML文档，保存为index.html。构建简单的网页结构，其中<p>标签中包含两个<span>标签和一个<img>标签，预览效果如图3.23所示。
<p>
<span class="g1">Bai</span>
<img src="images/baidu.jpg" border="0">
<span class="g2">百度</span>
</p>
图3.23 构建百度Logo示例的页面结构
第2步，规划整个页面的基本显示属性，包括字体颜色、字体基本类型、网页字体大小等。由于本页面中的字体颜色是一致的，所以在<p>标签中定义了网页的字体颜色，并让文本居中显示。
p {
color: #eb0005;
text-align: center
}
第3步，使用@font-face引入外部字体文件。
第4步，分别设置两个<span>标签的样式。由于在本案例中，既有中文又有西文，而中文和西文在显示上差别较大，所以分别进行设置，本案例中对第一个<span>，也就是英文“Bai”的样式设置如下。
第5步，设置第2个<span>，也就是中文“百度”。具体类样式如下。
.g2{
font-size:50px;
font-family:MS Ui Gothic,Arial,sans-serif;
letter-spacing:1px;
font-weight:900; /* 字体粗细为900 */
}
第6步，使用相对定位position: relative;设置中间的图标向下偏移8px，让图像与文字垂直居中对齐显示。
p img { position: relative; top: 8px;}
3.4.2 设计标题样式
视频讲解
本案例以设计标题为例，介绍CSS在控制文字时的各种技法，效果如图3.24所示。
图3.24 标题样式的演示效果
【操作步骤】
第1步，新建HTML文档，保存为index.html。
第2步，构建网页结构。在本案例中使用了<h1>标签，并加入了<img>标签，用于插入图片进行装饰。
<h1><img src="images/tang.png" >《唐诗三百首》</h1>
第3步，定义网页基本属性。定义背景为bg.jpg的图片，上下左右的边界均为20px，字体大小为16px，字体为黑体。此时的显示效果如图3.25所示。
图3.25 定义网页基本属性
第4步，定义标题样式。居中显示，字体颜色为#086916。
此时<h1>标签加入了简单的CSS样式，包括对齐方式和字体颜色，效果如图3.26所示。
第5步，在文字下面添加一条2px宽的灰色边框，以增强效果，并在文字的下方增加补白，适当调整标题底边界。
此时的效果如图3.27所示。由于<h1>是一个块级元素，所以它的边界不仅仅到文字，而是与页面的水平宽度灵活地保持一致。需要特别指出的是，这种创建边框的方法（border-bottom:2px solid#cecaca）是一个由3个部分组成的语句：宽度、样式、颜色。读者可以试着改变它们的值，看看会产生什么不同的效果。
图3.26 对标题进行简单的CSS设置
图3.27 添加灰色下边框
第6步，定义<img>标签的图片样式。为了使图片位置下移，对图片进行了相对定位position：relative，并向下移动24px。
img {
position: relative;
height:80px;
bottom: -24px;
}
3.4.3 设计正文样式
视频讲解
本案例通过设置正文样式进一步介绍CSS文字和段落的排版方法，效果如图3.28所示。
图3.28 正文样式效果
【操作步骤】
第1步，构建网页结构。本案例中<h1>标签与上例相同，同时增加了3个<p>标签，添加段落文本。此时显示效果仅仅是简单的文字和标题，如图3.29所示。
图3.29 未加入CSS样式的网页基本结构
第2步，定义网页基本属性和标题属性，与上例基本相同。
第3步，设置正文样式，即<p>标签中的段落内容。此时<p>标签加入了CSS样式，包括字体大小、字体颜色和行间距等，但是并没有设置字体类型，所以<p>将会继承其父级属性，显示为宋体。
3.4.4 规划网页字体大小
视频讲解
利用em和%作为网页字体大小的单位，可以设计出一套科学的网页字体大小方案。本案例设计网页字体大小配置方案如下。
☑ 网站标题字体大小为16像素。
☑ 栏目标题字体大小为14像素。
☑ 导航菜单字体大小为13像素。
☑ 正文字体大小为12像素。
☑ 版权、注释信息字体大小为11像素。
【操作步骤】
第1步，新建文档，在<body>标签内输入下面代码，定义网页的HTML框架。
第2步，新建内部样式表，定义网页字体大小，(12px/16px)×1em = 0.75em，也就是说初始化网页字体大小为0.75em（相当于12px），代码如下。
body {
font-size:0.75em;
}
第3步，以body元素的字体大小为参考，来定义其他栏目或版块的字体大小。
☑ 网站标题的字体大小：(16px/12px)×1em = 1.333em，也就是说网站标题的字体大小是body字体大小的16/12倍，即等于1.33em。
为什么不是(16px/12px)×0.75em = 1em？因为body的字体大小被定义为0.75em。
根据CSS继承规则，子元素的字体大小都是以父元素的字体大小为1em作为参考来计算的，也就是说，如果网站标题定义为1em，而body字体大小为0.75em，则网站标题也应该为0.75em，即等于12px，而不是16px。
☑ 栏目标题的字体大小：(14px/12px)×1em = 1.167em，也就是说，栏目标题的字体大小是body字体大小的14/12倍，即等于1.167em。
☑ 导航菜单的字体大小：(13px/12px)×1em = 1.08em，也就是说，栏目标题的字体大小是body字体大小的13/12倍，即等于0.812em。
☑ 正文的字体大小：(12px/12px)×1em = 1em，也就是说，正文的字体大小是body字体大小的1倍，即等于1em。
☑ 版权、注释信息的字体大小：(11px/12px)×1em = 0.917em，也就是说，版权、注释信息的字体大小是body字体大小的11/12倍，即等于0.917em。
第4步，针对上面的HTML结构，定义的CSS样式如下，其中正文字体直接继承body元素的字体大小，因此不需要重复定义，演示效果如图3.30所示。
<style type="text/css">
body {font-size:0.75em;}
#header h1 {font-size:1.333em;}
#main h2 {font-size:1.167.em;}
#nav li{font-size:1.08em;}
#footer p {font-size:0.917em;}
</style>
图3.30 在IE新版本中预览网页字体大小搭配效果
上面的字体大小配置方案，适合用在嵌套层次比较浅的字体大小继承中，且要注意相互的干扰性。例如，如果创建一个样式ol {font-size:60%;}，那么在列表嵌套中就会出现严重问题，内部的<ol>标签所包含的字体会实际显示为36%（60%×60%）。所以，在使用em为单位定义字体大小时，要考虑网页结构的层次问题，原则上不要嵌套使用以em为单位定义字体大小超过两层，否则会为网页字体大小的统筹设计带来很多麻烦。
3.4.5 设计居中显示
视频讲解
CSS的text-align属性仅能够作用于文本等行内对象，而无法对块元素进行对齐操作。
【示例1】本示例的代码在标准浏览器中是无法居中显示的，如图3.31所示。不过在div元素内包含文本可以居中显示，这是因为text-align属性拥有继承特性。
<style type="text/css">
body {text-align:center;}
div {
border:solid 1px red;
width:60%;}
</style>
<div><img src="images/1.png" /></div>
图3.31 网页默认对齐方式
【示例2】在现代标准浏览器中，可以通过定义margin属性实现居中显示，即定义其左右边距都为自动，则标准浏览器就会自动把块状元素置于居中的位置，代码如下。
<style type="text/css">
body { text-align: center; }
div {
margin-left: auto;
margin-right: auto;
border: solid 1px red;
width: 60%;
}
</style>
<div><img src="images/1.png" /></div>
【提示】
当网页嵌套层次比较深时，所设置的样式相互影响，由于对齐属性具有继承性，如果在body元素中声明居中对齐（text-align:center;），则网页内所有文本都会居中对齐。为了避免类似问题，必须在内部声明向左对齐进行纠正。
【示例3】对于下面这个框架结构：
<div id="wrap">
<h2>标题文本</h2>
<div id="main"></div>
<div id="footer"></div>
</div>
如果希望网页居中显示，则可以定义如下样式来兼容不同类型的浏览器。
虽然上面的方法实现了网页在不同类型浏览器中的对齐效果，但是文本也跟着居中对齐了，为了防止此问题的发生，可以在#wrap选择器中补加一条规则，代码如下。
#wrap {
margin:0 auto;
text-align:left;
}
这样所有问题都解决了。如果希望网页内某个元素内文本居中对齐，则只需要单独定义一个样式即可。例如，再补加一个样式声明标题文本居中对齐，代码如下。
#wrap h2 {
text-align:center;
}
3.4.6 设计对象垂直对齐
视频讲解
【示例1】各主流浏览器对vertical-align的支持并不统一。输入下面的代码，会发现在IE或Firefox等不同类型浏览器中所显示的效果都没有对齐底部，如图3.32所示。
<style type="text/css">
div {
vertical-align: bottom;
width: 12em;
height: 6em;
border: solid 1px red;}
</style>
<div>文本垂直对齐</div>
图3.32 无效的垂直对齐底部
原来，vertical-align仅能够作用于单元格或图像显示。因此，如果要在上面的样式内增加display:table-cell;声明，则在标准浏览器中能够正确显示，如图3.33所示。
<style type="text/css">
div {
vertical-align: bottom;
display: table-cell;
width: 12em;
height: 6em;
border: solid 1px red;
}
<div>文本垂直对齐</div>
图3.33 垂直对齐底部显示
如果在表格单元格标签内定义vertical-align属性，则不同类型的浏览器都能够很好地支持。
【示例2】对于下面的垂直对齐样式，IE和Firefox等浏览器的解析效果是相同的。
但是在其他元素内，IE怪异模式就不能够很好地支持vertical-align属性了，即使声明了display:table-cell;也是如此。为此只能另辟蹊径，下面介绍一下单行文本垂直居中对齐设计技巧。
【示例3】单行文本垂直居中对齐是经常需要解决的问题，可以使用下面的方法巧妙地解决。
<style type="text/css">
div {
line-height: 6em;
width: 12em;
height: 6em;
border: solid 1px red;}
</style>
<div>文本垂直居中对齐</div>
通过定义单行文本的高度和行高相同，就能够间接地实现文本垂直居中显示的问题了，如图3.34所示。当然对于多行文本来说，这种方法无效。
图3.34 单行文本垂直居中显示
3.4.7 隐藏和截取网页文字
视频讲解
在页面制作的过程中，经常会考虑如何控制页面中某个区域的文字内容的量，使其不会因为内容过多而撑开容器，甚至导致页面的错位。
【示例】在一个宽度为300px、高度为54px的段落<p>标签中有一大段文字，由于文字过多导致无法正常显示在段落<p>标签内，代码如下，效果如图3.35所示。
图3.35 超出文档容器的效果示意图
但根据CSS样式所定义的，只需要段落<p>标签的高度是54px，多余的应该是不需要的。给段落<p>标签的样式加上overflow属性，让多余的部分“消失”，代码如下。
p {
width:300px;
height:54px;
overflow:hidden; /* 隐藏超出段落<p>标签容器的内容 */
background-color:#EEEEEE;
}
添加overflow:hidden;让超出段落<p>标签容器的部分在页面中“消失”，效果如图3.36所示。
图3.36 添加overflow:hidden;后段落<p>标签的表现形式效果图
文字隐藏的功能并不仅仅表现在能解决页面错位的问题上，还可以实现以图代替文字显示在页面中。所谓以图代替文字，其实就是隐藏文字，然后以背景图的方式显示文字。这种方式很常用，因为在设计页面时经常会有比较美观的被处理过的文字，如图3.37所示。
图3.37 页面中经过处理的文字
经过处理的文字效果是用图片在页面中表现，但又不希望HTML结构中是使用图片<img>标签插入，而是使用<h1>标题标签表明该图片是一个标题，而且是全文中权重值最高的标题。那么HTML结构就会如此编码：
<h1>乐淘正品鞋城</h1>
在前面已经讨论过，如果要将文字隐藏，必须将容器的宽高固定，并且设置隐藏，现在要添加一张图片做背景，设置CSS样式代码如下，效果如图3.38所示。
h1 {
width:250px;
height:80px;
overflow:hidden;
background:url(images/logo.jpg) no-repeat 0 0;
}
图3.38 并未“消失”的文字
既然已经设置overflow:hidden;为什么文字还在呢？其实忘了一件很重要的事情，那就是只有当容器中的内容超过容器的宽高后才会隐藏。
在分析首行缩进时，曾学习了如何利用text-indent属性隐藏文字。现在就是text-indent发挥其作用的时候了。修改CSS样式代码，利用text-indent属性将文字往旁边“推”，远远地“抛”出容器之外。
h1 {
width:250px;
height:80px;
overflow:hidden;
text-indent:-9999px; /* 利用text-indent属性将文字“推”到容器之外 */
background:url(images/logo.jpg) no-repeat 0 0;
}
在浏览器中预览效果，如图3.39所示，文字“消失”了，以图代替文字的方法生效。
图3.39 文字“消失”（1）
文字既然可以左右移动很大的数值导致其超出容器的宽度而隐藏，那么如果将行高的值设置很大并超出容器的高度，不是也可以隐藏文字吗？
h1 {
width:250px;
height:80px;
overflow:hidden;
line-height:9999px; /* 将行高的值设置很大，超出容器之外，使其不可见 */
background:url(images/logo.jpg) no-repeat 0 0;
}
如图3.40所示，文字因为行高的关系被“推”到了容器之外，并隐藏了。
图3.40 文字“消失”（2）
CSS样式对于隐藏文字的处理不仅仅只有将元素“推”出容器之外这一个方法，还可利用CSS样式本身所具备隐藏特性的属性。
☑ visibility:hidden;可设置元素不可见，但会占据页面中其原本所应该占有的空间位置。
☑ display:none;可设置元素不可见，不占据页面中任何空间位置。
这两种方式的唯一区别就是，是否还会在原有的位置上保留其不可见后的元素空间，相同之处就是标签元素内的内容不可见。
使用这两种方式都需要在<h1>标题标签内多添加一个标签，这里添加一个<span>标签，代码如下。
<h1><span>乐淘正品鞋城</span></h1>
那么样式中首先需要设置<h1>标签的宽高以及背景图片的属性；其次，要对<h1>标题标签内的<span>标签中的元素设置不可见，代码如下。
h1 {
width:250px;
height:80px;
background:url(images/logo.jpg) no-repeat 0 0;
}
h1 span {
visibility:hidden; /* 设置<span>标签内的文字不可见，但在页面中占据其原本所占据的空间 */
}
最终虽然文字“消失”了，但是在其原有的位置上还是保留着消失之前的空间位置。了解了关于使用visibility:hidden;方法隐藏文字之后，再看一下使用display:none;隐藏文字后的效果，代码如下。
h1 {
width:250px;
height:80px;
background:url(images/logo.jpg) no-repeat 0 0;
}
h1 span {
display:none; /* 设置<span>标签内的文字不可见，并且不会在页面中占据其空间 */
}
修改CSS样式中对<h1>标题标签所包含的<span>标签的样式定义方式，把原有的visibility:hidden;隐藏文字方法改成display:none;的方法来隐藏文字。利用Firebug也并无发现隐藏后的文字还保留着其原有的物理空间。
隐藏截取文字的方式虽然有多种，但并不是任何时候都是可行的，还应根据实际的情况去选用。只有掌握了如何使用这些方法，才能够设计出适合当前页面的效果。
3.4.8 设计文章版式
视频讲解
本案例将展示一个简单的中文版式：段落文本缩进，标题居中显示，正文之前设计一个题引，题引为左右缩进的段落文本显示效果，正文以首字下沉效果显示。演示效果如图3.41所示。
图3.41 报刊式中文格式效果
【操作步骤】
第1步，设计网页结构。本示例的HTML文档结构依然采用禅意花园的结构，截取第一部分的结构和内容，并把英文全部译为中文。
第2步，定义网页基本属性。定义背景色为白色，字体为黑色。多数浏览器默认网页就是这个样式，但是考虑到部分浏览器会以灰色背景显示，显式声明这些基本属性会更加安全。设置字体大小为14px，字体为宋体。具体代码如下。
第3步，定义标题居中显示，适当调整标题底边距，统一为一个字距。间距设计的一般规律：字距小于行距，行距小于段距，段距小于块距。检查的方法可以尝试将网站的背景图案和线条全部去掉，看是否还能保持想要的区块感。
第4步，为二级标题定义一个下划线，并调暗字体颜色，目的是使一级标题、二级标题和三级标题在同一个中轴线显示时产生一个变化，避免单调。由于三级标题字数少（4个汉字），可以通过适当调节字距来设计一种平衡感，避免因为字数太少而使标题看起来很单调。
第5步，定义段落文本的样式。统一清除段落间距为0，定义行高为1.8倍字体大小。
第6步，定义第一文本块中的第一段文本字体为深灰色，定义第一文本块中的第二段文本右对齐，定义第一文本块中的第一段和第二段文本首行缩进两个字距，同时定义第二文本块的第一段、第二段和第三段文本首行缩进两个字距。
第7步，为第一个文本块定义左右缩进样式，设计引题的效果。
第8步，定义首字下沉效果。CSS提供了一个首字下沉的属性：first-letter，这是一个伪对象（关于伪、伪类和伪对象，将在超链接设计章节中进行详细讲解）。但是first-letter属性所设计的首字下沉效果存在很多问题，所以还需要进一步设计。例如，设置段落首字浮动显示（关于浮动请参阅CSS布局章节），同时定义字体大小很大，以实现下沉效果。为了使首字下沉效果更明显，这里设计首字加粗、反白显示。
注意，由于IE早期版本浏览器存在Bug，无法通过:first-letter选择器来定义首字下沉效果，故这里重新定义了一个首字下沉的样式类（first），然后手动把这个样式类加入HTML文档结构对应的段落中。
<p class="p1 first"><span>不同浏览器随意定义标签，导致无法相互兼容的<acronym title="document object model">DOM</acronym>结构，或者提供缺乏标准支持的<acronym title="cascading style sheets">CSS</acronym>等陋习随处可见，如今当使用这些不兼容的标签和样式时，设 计之路会很坎坷。</span></p>
提示：在阅读信息时，段落文本的呈现效果多以块状存在。如果说单个字是点，一行文本为线，那么段落文本就成面了，而面以方形呈现的效率最高，网站的视觉设计大部分其实都是在拼方块。在页面版式设计中，建议坚持如下设计原则。
☑ 方块感越强，越能给用户方向感。
☑ 方块越少，越容易阅读。
☑ 方块之间以空白的形式进行分隔，从而组合为一个更大的方块。
其他样式以及整个案例效果请参阅本节实例源代码。