项目七李白代表作品页面（素材）

 【项目目标】

• 掌握表格样式以及列表样式的设置。
• 能够记忆各类选择器的使用规则。

【项目内容】

• 灵活运用选择器，选定页面中的任一元素。
• 灵活运用table 标签进行页面布局的方法。
• 能够运用优先级处理冲突。

【项目步骤】

项目七的素材文件是项目三的结果文件 libai-representativeworks2.html 和 main.css，将此素材网页文件另存为 libai-representativeworks3.html，本次实践将完成李白代表作品页面的CSS部分，libai-representativeworks.css 文件用来存放本页面独有的css 属性样式。在此文件中设置以下部分。

1. guidance 子目录部分

（1）#guidance：设置宽度为100%；文本对齐方式居中；背景设置为渐变色。

background:linear-gradient（to bottom.rgba（245, 129, 35,0.5）.rgba（0.0,0,0））：

（2） #guidance ul li： 设置其背景色为黑色，列表项无圆点，行内块级元素，宽度为

150px，圆角矩形半径为30%，字号18px。

（3） 子目录项，链接悬浮状态

#guidance ul li:hover 当鼠标悬浮时，背景色为白色。

#guidance ul li:hover a

•鼠标仅悬浮在|i上时，a标签前景色为黑色。

#guidance a［href:hover 背景色为白色，前景色为黑色。

（4） 链接未访问状态

#guidance a:link 前景色为白色。

（5） 链接已访问状态

#guidance a[href]:visited

前景色为 orange。

（6） 链接点击状态

#guidance a[href]

思考：

#guidance ul li:hover{ background-color:white;}
#guidance a:hover{ background-color: white; color:black;}

请比较这两行代码，是否重复？请尝试解释。

2.main主体部分
（1）设置边框为100px，实线。
（2）设置图片边框：文件为7-border.png.
内偏移为：border-image-slice:20%20%20%
20%；如项目图7-1所示。

         项目图7-1图片边框                                           项目图7-3表格效果图

（3）设置表格及名句赏析部分
#theme，#Appreciation：高度为350px。
（4）进行表格布局
对main部分进行局部布局，设置为5行2列的表格。其中仅第二行分为两列。效果如
项目图7-2所示。第二行第一列“题材介绍“部分是嵌套表格。

 项目图7-2main部分的table布局

3.#themelntro表格部分
（1）#themelntro：将边框合并为单一边框border-collapse:collapse：，行高30px，宽度
500px；前景色浅灰色#999；
（2）#themelntrotd：边框下线为：1pxdotted#a5a5a5；如项目图7-3所示。
4.设置名句赏析的列表
#Appreciationul：没有列表项的圆点，行高为30px。
5.设置所有的section
（1）盒子阴影为：005px；
（2）背景色为：rgb（233,241,240）；

6. 设置文本

（1）设置 h1、h2 两个部分：字体设置为华文新魏，隶书，黑体。

（2）设置 h3、类名 test 和段落P部分：首行缩进两个字符。

（3） 除了 guidance 内 h2 标签外所有的 h2 标签 h2:not（#guidance h2）：

①左边框线 10px 实线

顔色rgbÿ