前端学习——CSS——李白代表作品页面(3)

上传资源的地方：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;
}