上传资源的地方：http://download.csdn.net/
项目要求部分（1） ：
支撑知识点：
1.CSS附加方式——外部样式表：
--->链接式外部样式表
语法：
在head标签里边写link单标签，其中再写上三个属性，分别是rel，href，type
解释：
1）rel="stylesheet"
定义被链接的文档与当前文档的关系，链接到样式表时，属性值往往是stylesheet
2）href="------.css"
提供css文件所在的位置
3）type="text/css"
表示样式表的数据类型是text/css
实例：
<link rel="stylesheet" href="./css/libai-representativeworks.css">2.列表样式
1）列表项的标志类型
定义：
在一个无序列表中，列表项的标志是指出现在各列表项旁边的圆点或其他符号
修改方式：
修改list-style-type的属性值
1.none 列表项不显示列表符号，这一点在将列表作为导航栏时非常有用
2.circle 空心圆
3.square 实心方块
4.upper-roman 大写罗马数字
5.lower-alpha 小写英文字母
6.默认值为disc 实心圆
3.设置圆角矩形边框
1）设置方式：
设置border-radius的属性值
圆角半径属性，包括四个角半径的设置
1.border-bottom-left-radius 左下角
2.border-bottom-right-radius 右下角
3.border-top-left-radius 左上角
4.border-top-left-radius 左下角
4.前景色和背景色
1）前景色：
元素的前景色主要是指文本和边框等元素的颜色
设置方式：color
2）背景色：
设置background-color的属性值
项目要求部分（2） ：
支撑知识点：
1.设置边框
注意：
边框样式时最重要的，如果不设置边框样式，那么边框将无法显示。
边框相关的所有属性均不可被继承。
属性：
1）边框样式
border-style
a.它的取值有：
1.none 无边框，默认值
2.dotted 点线边框
3.solid 实线边框（使用最多）
4.dashed 虚线边框
5.double 双线边框
6.groove 凹槽边框
7.inset 内嵌效果边框
8.outset 外凸效果边框
b.也可以同时写四个，分别控制上，右，下，左边框样式
c.也可以单独用border-top-style等分别设置一个边的边框样式
2）边框宽度
border-width
thin
thick
medium
也可以自己设置---px
3）边框颜色
border-color
4)同时设置三个属性
border: border-width , border-style , border-color
ps:设置图片边框不知道为啥我一直不能成功，所以emm，有大佬会的请告诉我，我是这样写的
main{
border-width: 100px;
border-style: solid;
border-image-source:url('images/7-border.png'); <!--就这个边框不知道为啥放不进去-->
border-image-slice: 20% 20% 20% 20%;
}
项目要求部分（3） ：
支撑知识点：
1.将边框合并为单一边框
border-collapse 属性，合并 table 表格边框
css 中的 border-collapse 属性可以将表格的边框合并为单一的边框。
其值如下：
collapse：将边框合并为单一的边框
separate：默认值，边框被分开，不会合并
inherit：继承父元素的 border-collapse 属性值。
注意：如果使用 collapse 值时，推荐设置 border-spacing 属性的值为 0。
2.盒子阴影
box-shadow
用于为div元素添加一个或多个阴影边框
其属性值
h-shadow (必填) 设置水平阴影的位置
v-shadow (必填) 设置垂直阴影的位置
blur (选填) 设置模糊距离
color (选填) 设置颜色，默认为黑色
box-shadow: 0 0 5px;3.首行缩进
test-indent ，一般缩进两个字符就是2em
示例：
text-indent：2em;
4.文本阴影
text-shadow
属性和box-shadow一样
示例CSS代码
#guidance{
width: 100%;
text-align: center;
background:linear-gradient(to bottom,rgba(245,129,35,0.5),rgba(0,0,0,0));
}
#guidance ul li{
background-color: black;
display: inline;
width: 150px;
list-style-type: none;
font-size: 18px;
border-radius: 30%;
}
#guidance ul li:hover{
background-color: white;
}
#guidance ul li:hover a{
color:black;
}
#guidance a[href]:hover{
background-color: white;
color:black;
}
#guidance a:link{
color:white;
}
#guidance a[href]:visited{
color:orange;
}
#guidance a[href]:active{
background-color: rgb(100,0,90);
color:white;
}
main{
border-width: 100px;
border-style: solid;
border-image-source:url('images/7-border.png'); <!--就这个边框不知道为啥放不进去-->
border-image-slice: 20% 20% 20% 20%;
}
#theme,#Appreciation{
height: 350px;
}
#themeIntro{
border-collapse: collapse;
height: 30px;
width: 500px;
color:#999;
}
#themeIntro td{
border-bottom: 1px dotted #a5a5a5;
}
#Appreciation ul{
list-style-type: none;
height: 30px;
}
section{
box-shadow: 0 0 5px;
background-color: rgb(233,241,240);
}
h1,h2{
font-family:SimHei,LiSu,STXinwei;
}
h3,.text,p{
text-indent: 2em;
}
h2:not(#guidance h2){
border-left-width: 10px;
border-left-style: solid;
border-left-color: rgb(100,0,90);
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: rgb(100,0,90);
width: 150px;
height: 25px;
text-shadow: 3px 3px 3px #999;
}
