前端学习——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

实例:
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;
}
相关推荐
xiaoyaolangwj13 分钟前
高翔【自动驾驶与机器人中的SLAM技术】学习笔记(十三)图优化SLAM的本质
学习·机器人·自动驾驶
Martin -Tang13 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发14 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
静止了所有花开1 小时前
SpringMVC学习笔记(二)
笔记·学习
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
爱吃生蚝的于勒1 小时前
C语言内存函数
c语言·开发语言·数据结构·c++·学习·算法
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
L_cl3 小时前
Python学习从0到1 day26 第三阶段 Spark ④ 数据输出
学习