新闻网站通常以文本新闻为主体，本单元通过对新闻网站的导航网页和文本新闻网页设计的探析与训练，重点学习HTML5中常用的文本标签、CSS文本属性、字体属性、颜色值及颜色表示方法、CSS链接属性等，学会网页元素的水平对齐、CSS导航栏的设计，掌握文本新闻网页和导航网页的设计方法。

教学导航

实例探析

【任务2-1】探析手机搜狐网的名站导航网页

【效果展示】
手机搜狐网的名站导航网页0201.html的浏览效果如图2-1所示。
手机搜狐网的名站导航网页0201.html的主体结构为上、中、下结构，顶部为标题文本，中部包括多个热点网站的链接按钮和多行分类网站导航链接，底部包括多个导航链接和版权信息。

【网页探析】
1．网页0201.html的HTML代码探析
手机搜狐网的名站导航网页0201.html的HTML代码如表2-1所示。

网页0201.html主体结构的HTML代码如表2-2所示，该网页主要包括多个名站的超链接。

2．网页0201.html的CSS代码探析
网页0201.html通用CSS代码定义如表2-3所示。

网页0201.html主体结构的CSS代码如表2-4所示。

网页0201.html其他的CSS代码定义如表2-5所示。

知识梳理

1．HTML5中常用的文本标签
（1）< details>标签与< summary>标签 < details>标签用于描述文档或文档某个部分的细节，目前只有Chrome浏览器支持< details>标签，可以与< summary>标签配合使用。
< summary>标签用于描述有关文档的详细信息，示例代码如下所示：

< summary>标签为< details>元素定义标题，< details>元素用于描述有关文档或文档片段的详细信息。< summary>标签应与< details>标签一起使用。标题是可见的，当用户单击标题时会显示出详细信息。< summary>元素应该是< details>元素的第一个子元素。
（2）< bdi>标签
< bdi>标签用于设置一段文本，使其脱离其父元素的文本方向设置。
（3）< ruby>标签、< rt>标签与< rp>标签
< ruby>标签用于定义ruby注释（中文注音或字符）。与< rt>标签一同使用。< ruby>元素由一个或多个字符（需要一个解释或发音）和一个提供该信息的< rt>元素组成，还包括可选的< rp>元素，定义当浏览器不支持< ruby>标签时显示的内容。
< rt>标签用于定义字符（中文注音或字符）的解释或发音。
< rp>标签在ruby注释中使用，以定义不支持< ruby>元素的浏览器所显示的内容。
（4）< mark>标签
< mark>标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜索关键字。
（5）< time>标签
< time>标签用于定义日期或时间，也可以两者同时。示例代码如下所示：
< p>我们在每天早上 < time>9:00< /time> 开始营业。< /p>
< p>我在 < time datetime="2015-02-14">情人节< /time>有个约会。< /p>
< time>标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，当用户把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
< time>标签不会在任何浏览器中呈现任何特殊效果，目前所有主流浏览器都不支持< time>标签。
（6）< meter>标签
< meter>标签用于定义度量衡。仅用于已知最大和最小值的度量。
（7）< progress>标签
< progress>标签用于定义任何类型任务的运行进度，可以使用< progress>元素显示JavaScript中耗时时间函数的进程。
（8）< br> 标签与< wbr>标签
< br>标签可插入一个简单的换行符，使用< br>来输入空行，而不是分割段落。< br> 标签是空标签（意味着它没有结束标签，因此这是错误的：< br>< /br>）。在XHTML中，把结束标签放在开始标签中，也就是< br />。
< br>标签只是简单地开始新的一行，而当浏览器遇到< p>标签时，通常会在相邻的段落之间插入一些垂直的间距。
< wbr>标签表示软换行，用于在文本中添加换行符。与
标签元素的区别是< br>标签表示此处必须换行；< wbr>表示浏览器窗口或父级元素足够宽时（没必要换行时）则不换行，而宽度不够时主动在此处换行。
2．CSS文本属性（Text）
CSS文本属性可定义文本的外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本，以及对文本进行缩进等。
（1）缩进文本
把Web页面中段落的第一行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本缩进。通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
text-indent属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：
p {text-indent: 5em;}
一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（如段落）的首行中有一个图像，它会随该行的其余文本移动。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
text-indent属性值还可以设置为负值，利用这种技术，可以实现很多有趣的效果，如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边，示例代码如下：
p {text-indent: -5em;}
不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距，示例代码如下：
p {text-indent: -5em; padding-left: 5em;}
text-indent属性值可以使用所有长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
在以下示例代码中，缩进值是父元素的20%，即100个像素：

（2）水平对齐
text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式，其取值left、right和center会导致元素中的文本分别左对齐、右对齐和居中。
（3）字间隔
word-spacing属性可以改变字（单词）之间的标准间隔，其默认值normal与设置值为0是一样的。word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么文字之间的间隔就会增加。为word-spacing设置一个负值，就会把文字拉近，示例代码如下：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
（4）字母间隔
与word-spacing属性一样，letter-spacing属性的可取值包括所有长度，默认关键字是normal（这与letter-spacing:0相同）。输入的长度值会使字母之间的间隔增加或减少指定的量，示例代码如下：
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。
（5）字符转换
text-transform属性处理文本的大小写，该属性有4个取值：none、uppercase、lowercase和capitalize。默认值none对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase和lowercase将文本转换为全大写和全小写字符，capitalize只对每个单词的首字母大写。
（6）文本装饰
text-decoration属性提供了很多非常有趣的行为，text-decoration有5个值：none、underline、overline、line-through、blink，不出所料，underline会对元素加下划线， overline的作用恰好相反，会在文本的顶端画一个上划线，line-through则在文本中间画一个贯穿线，blink会让文本闪烁。
none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线，如果希望去掉超链接的下划线，可以使用以下CSS来做到这一点：
a {text-decoration: none;}
注意：如果显式地用这样一个规则去掉链接的下划线，那么超链接与正常文本之间在视觉上的唯一差别就是颜色。
（7）文本阴影
在CSS3中，text-shadow可向文本应用阴影，允许规定水平阴影、垂直阴影、模糊距离及阴影的颜色。
（8）处理空白符
white-space属性会影响到对源文档中的空格、换行和tab字符的处理。通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的XHTML处理已经完成了空白符处理——它会把所有空白符合并为一个空格。所以给定以下代码，它在Web浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

可以使用以下声明显式地设置这种默认行为：
p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理——丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格也会转换为一个空格。
如果将white-space设置为pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像XHTML的< pre>元素一样，空白符不会被忽略。
3．CSS字体属性（Font）
CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
（1）CSS字体系列
在CSS中，有两种不同类型的字体系列：
① 通用字体系列：拥有相似外观的字体系统组合（如“serif”或“monospace”）。
② 特定字体系列：具体的字体系列（如“Times”或“Courier”）。
除了各种特定的字体系列外，CSS定义了5种通用字体系列：serif 字体、sans-serif 字体、monospace字体、cursive 字体和fantasy字体。
使用font-family属性定义文本的字体系列。如果希望文档使用一种sans-serif字体，但是并不关心是哪一种字体，以下就是一个合适的声明：
body {font-family: sans-serif;}
这样就会从sans-serif字体系列中选择一个字体（如Helvetica），并将其应用到body元素。因为有继承，这种字体选择还将应用到body元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。
除了使用通用的字体系列，还可以通过font-family属性设置更具体的字体。下面的实例为所有< h1>元素设置了Georgia字体：
h1 {font-family: Georgia;}
这样的规则同时会产生另外一个问题，如果计算机中没有安装Georgia字体，就只能使用默认字体来显示< h1>元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题，示例代码如下：
h1 {font-family: Georgia, serif;}
如果计算机中没有安装Georgia字体，但安装了Times字体（serif字体系列中的一种字体），就可能对< h1>元素使用Times。尽管Times与Georgia并不完全匹配，但至少足够接近。
建议在所有font-family规则中都提供一个通用字体系列，这样就提供了一条后路，在无法提供与规则匹配的特定字体时，就可以选择一个候选字体。
也许已经注意到了，上面的实例中使用了单引号。只有当字体名中有一个或多个空格（如New York），或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号。单引号或双引号都可以接受。但是，如果把一个font-family属性放在HTML的style属性中，则需要使用该属性本身未使用的那种引号，示例代码如下：
< p style="font-family: Times, 'New York', serif;">…< /p>
（2）字体风格
font-style属性最常用于规定斜体文本，该属性有3个取值：normal（文本正常显示）、italic（文本斜体显示）、oblique（文本倾斜显示）。
（3）字体变形
font-variant属性可以设定小型大写字母，小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
（4）字体加粗
font-weight属性设置文本的粗细，使用bold关键字可以将文本设置为粗体。关键字100～900为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。数字400等价于normal，而700等价于bold。
如果将元素的加粗设置为bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词lighter会导致浏览器将加粗度下移而不是上移。
（5）字体大小
font-size属性设置文本的大小，font-size 值可以是绝对或相对值。绝对值是指将文本设置为指定的大小，不允许用户在所有浏览器中改变文本大小，绝对大小在确定了输出的物理尺寸时很有用。相对大小是指相对于周围的元素来设置大小，允许用户在浏览器改变文本大小。注意：如果没有规定字体大小，普通文本（如段落）的默认大小是16px（16px=1em）。
通过像素设置文本大小，可以对文本大小进行完全控制，示例代码如下：
h2 {font-size:40px;}
p {font-size:14px;}
还可以使用em来设置字体大小，如果要避免在Internet Explorer中无法调整文本的问题，许多开发者使用em单位代替pixels。W3C推荐使用em尺寸单位，1em等于当前的字体尺寸。如果一个元素的font-size为16px，那么对于该元素，1em就等于16px。在设置字体大小时，em的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是16px，因此1em的默认尺寸是16px。
可以使用这个公式将pixels转换为em：pixels/16=em，示例代码如下：

在上面的实例中，以em为单位的文本大小与前一个实例中以pixels计的文本是相同的。不过，如果使用em单位，则可以在所有浏览器中调整文本大小。
注意，16等于父元素的默认字体大小，假设父元素的font-size为20px，那么公式需改为：pixels/20=em
在所有浏览器中均有效的方案是为< body>元素（父元素）以百分比设置默认的font-size 值，示例代码如下： body {font-size:100%;} h2 {font-size:2.5em;} p {font-size:0.875em;}
（6）CSS3 @font-face 规则
在CSS3之前，我们必须使用已在用户计算机上安装好的字体，通过CSS3，则可以使用我们喜欢的任意字体。当我们找到或购买到希望使用的字体时，可将该字体文件存放到Web服务器上，它会在需要时被自动下载到用户的计算机上。
我们自己使用的字体是在CSS3 @font-face 规则中定义的，在新的@font-face规则中，必须首先定义字体的名称（如myFont），然后指向该字体文件。如果需要为HTML元素使用字体，则通过font-family属性来引用字体的名称myFont。
以下示例代码是使用粗体字体的实例，必须为粗体文本添加另一个包含描述符的@font-face。

上述CSS定义中的文件“Sansation_Bold.ttf” 是另一个字体文件，它包含了Sansation字体的粗体字符。只要font-family为“myFont”的文本需要显示为粗体，浏览器就会使用该字体。通过这种方式，我们可以为相同的字体设置许多@font-face规则。
表2-6中列出了能够在@font-face规则中定义的所有字体描述符。

4．CSS颜色
颜色是通过对红、绿和蓝光的组合来显示的。
（1）颜色值
CSS颜色使用组合了红、绿、蓝颜色值（RGB）的十六进制（HEX）表示法进行定义。对光源进行设置的最低值可以是0（十六进制00），最高值是255（十六进制FF）。十六进制值使用3个两位数来编写，并以#符号开头。CSS常用颜色的HEX表示法与RGB表示法如表2-7所示。

从0～255种红、绿、蓝三原色的值能够组合出总共超过16000000种不同的颜色（根据256×256×256计算）。当今，大多数显示器都能显示出至少16384 种不同的颜色。多年前，当计算机只支持最多256种颜色时，216种“网络安全色”列表被定义为Web标准，并保留了40种固定的系统颜色。现在，这些都不重要了，因为大多数计算机都能显示数百万种颜色。
（2）CSS中的颜色的表示方法
① 十六进制颜色
十六进制颜色是这样规定的：#RRGGBB，其中的RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分，所有值必须介于0与FF之间。所有浏览器都支持十六进制颜色值。例如，#0000ff值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为0。
② RGB颜色
RGB颜色值的表示方式为rgb(red, green, blue)，每个参数(red、green及blue)定义颜色的强度，可以是介于0～255之间的整数，或者是百分比值（从0%～100%）。所有浏览器都支持RGB颜色值。例如，rgb(0,0,255)值显示为蓝色，这是因为blue参数被设置为最高值（255），而其他被设置为0。同样地，以下两种表示方式定义了相同的颜色：rgb(0,0,255)和rgb(0%,0%,100%)。
③ RGBA颜色
RGBA颜色值是RGB颜色值的扩展，带有一个alpha通道（它规定了对象的不透明度）。RGBA颜色值的表示方式为：rgba(red, green, blue, alpha)，其中alpha参数是介于0.0（完全透明）与1.0（完全不透明）之间的数字。RGBA颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari及Opera 10+。例如，rgba(255,0,0,0.5)值显示为红色，不透明度为0.5。
④ HSL颜色
HSL指的是Bue（色调）、Saturation（饱和度）、Lightness（亮度）。HSL颜色值的表示方式为：hsl(hue, saturation, lightness)，例如，hsl(120,65%,75%)。hue是色盘上的度数（从0～360），0（或360）是红色，120是绿色，240是蓝色；saturation是百分比值；0%意味着灰色，而100%是全彩；lightness同样是百分比值，0%是黑色，100%是白色。HSL颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari及Opera 10+。
⑤ HSLA颜色
HSLA颜色值是HSL颜色值的扩展，带有一个alpha 通道（它规定了对象的不透明度）。HSLA颜色值表示方式为：hsla(hue, saturation, lightness, alpha)，其中的alpha参数定义不透明度，alpha参数是介于0.0（完全透明）与1.0（完全不透明）之间的数字。例如，hsla(120,65%,75%,0.3)。HSLA颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari及Opera 10+。
⑥ 预定义/跨浏览器颜色名
HTML和CSS颜色规范中定义了147种颜色名（17种标准颜色加130种其他颜色）。17种标准色分别是aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。所有浏览器都支持的颜色名。
5．网页元素的水平对齐
在CSS中，可以使用多种属性来水平对齐元素。
（1）使用text-align属性水平对齐元素
块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。网页中常见的块元素有< h1>、< p>、< div>。text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
（2）使用margin属性水平对齐块元素
将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现，可通过将左和右外边距设置为“auto”来对齐块元素。把左和右外边距设置为auto，规定的是均等地分配可用的外边距，结果就是居中的元素，示例代码如下：

如果宽度是100%，则对齐没有效果。
（3）使用position属性进行左和右对齐
对齐元素的方法之一是使用绝对定位，绝对定位元素会从正常流中删除，并且能够交叠元素。示例代码如下：

（4）使用float属性来进行左和右对齐
对齐元素的另一种方法是使用float属性，示例代码如下：

6．CSS链接属性（Hyperlink）
（1）设置链接的样式
链接的特殊性在于能够根据它们所处的状态来设置它们的样式，能够设置链接样式的CSS属性有很多种（如color、font-family、background等）。链接有4种状态：a:link（普通的、未被访问的链接）、a:visited（用户已访问的链接）、a:hover（鼠标指针位于链接的上方）和a:active（链接被单击的时刻）。
设置链接样式的示例代码如下：

当为链接的不同状态设置样式时，请按照以下次序规则：a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后。 （2）常见的链接样式
① 文本修饰
text-decoration属性大多用于去掉链接中的下划线，示例代码如下：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
② 背景色
background-color属性用于设置链接的背景色，示例代码如下：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
7．CSS导航栏
拥有易用的导航栏对于任何网站都很重要，通过CSS，能够把乏味的HTML菜单转换为漂亮的导航栏。导航栏基本上是一个链接列表，因此使用< ul>和< li> 元素是非常合适的，示例代码如下：

设置样式从列表中去掉圆点和外边距的CSS代码如下：

list-style-type:none表示删除圆点，导航栏不需要列表项标记。把外边距和内边距设置为0可以去除浏览器的默认设定。

（1）垂直导航栏
如需构建垂直导航栏，我们只需要定义< a>元素的样式，除了上面的代码之外，添加以下代码：

display:block：把链接显示为块元素可使整个链接区域可单击（不仅仅是文本），同时也允许我们规定宽度。width:60px：块元素默认占用全部可用宽度，我们需要规定60px的宽度。始终规定垂直导航栏中< a>元素的宽度，如果省略宽度，IE6会产生意想不到的结果。
（2）水平导航栏
有两种创建水平导航栏的方法。使用行内或浮动列表项。两种方法都不错，但是如果希望链接拥有相同的尺寸，就必须使用浮动方法。
① 行内列表项
除了上面的标准代码，构建水平导航栏的方法之一是将< li>元素规定为行内元素，示例代码如下：

display:inline：默认地，< li>元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。
② 对列表项进行浮动
在上面的实例中，链接的宽度是不同的。为了让所有链接拥有相等的宽度，浮动< li>元素并规定< a>元素的宽度：

引导训练

【任务2-2】设计手机搜狐网的站内导航网页

【任务描述】
编写HTML代码和CSS代码，设计图2-2所示手机搜狐网的站内导航网页0202.html。

行分类的站内页面导航超链接，底部内容包括多个超链接和版权信息。
网页0202.html顶部结构使用< header>标签实现，中部结构使用< section>标签实现，底部结构使用< footer>标签实现。

【任务实施】
1．网页0202.html的主体结构设计
在本地硬盘的文件夹“02文本新闻浏览网页设计\0202”中创建网页0202.html。
（1）定义网页0202.html通用CSS代码
网页0202.html通用的CSS代码定义如表2-8所示。

（2）定义网页0202.html主体结构的CSS代码
网页0202.html主体结构的CSS代码如表2-9所示。

（3）编写网页0202.html主体结构的HTML代码
网页0202.html主体结构的HTML代码如表2-10所示。

2．网页0202.html的局部内容设计
（1）网页0202.html的顶部内容设计
网页0202.html顶部内容的CSS代码定义如表2-11所示。

在网页0202.html顶部代码“< header class="h">”与“< /header>”之间编写HTML代码，实现其功能，网页0202.html顶部内容的HTML代码如表2-12所示。

（2）网页0202.html的中部内容设计
网页0202.html中部内容的CSS代码定义如表2-13所示。

在网页0202.html中部代码“< div class="ls">”和“< /div>”之间编写HTML代码，实现其功能，网页0202.html中部内容的HTML代码如表2-14所示。

（3）网页0202.html的底部内容设计
网页0202.html底部内容的CSS代码定义如表2-15所示。

在网页0202.html底部代码“< footer class="site">”和“< /footer>”之间编写HTML代码，实现其功能，网页0202.html底部内容的HTML代码如表2-16所示。

【网页浏览】
保存网页0202.html，在浏览器Google Chrome中的浏览效果如图2-2所示。

【任务2-3】设计手机搜狐网的文本新闻网页

【任务描述】
编写HTML代码和CSS代码，设计图2-3所示手机搜狐网的文本新闻网页0203.html。

手机搜狐网的文本新闻网页0203.html的主体结构为上、中、下结构，如图2-3所示。顶部内容包括标题文字和主页链接按钮，中部内容包括文本新闻的标题和正文，底部内容包括多个超链接和版权信息。
网页0203.html顶部结构使用