上传资源的地方: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
实例:
html
<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,有大佬会的请告诉我,我是这样写的
css
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 (选填) 设置颜色,默认为黑色
css
box-shadow: 0 0 5px;
3.首行缩进
test-indent ,一般缩进两个字符就是2em
示例:
text-indent:2em;
4.文本阴影
text-shadow
属性和box-shadow一样
示例CSS代码
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;
}