前端学习——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;
}
相关推荐
永乐春秋5 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿6 分钟前
【前端】CSS
前端·css
ggdpzhk8 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue