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

devtools/2024/10/10 17:39:32/
htmledit_views">
上传资源的地方:http://download.csdn.net/ 

项目要求部分(1) :

 支撑知识点:

1.CSS附加方式——外部样式表:

--->链接式外部样式表

语法:

在head标签里边写link单标签,其中再写上三个属性,分别是rel,href,type

解释:

1)rel="stylesheet"

定义被链接的文档与当前文档的关系,链接到样式表时,属性值往往是stylesheet

2)href="------.html" title=css>css"

提供html" title=css>css文件所在的位置

3)type="text/html" title=css>css" 

表示样式表的数据类型是text/html" title=css>css

实例:
html"> <link rel="stylesheet" href="./html" title=css>css/libai-representativeworks.html" title=css>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,有大佬会的请告诉我,我是这样写的

html" title=css>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 表格边框

html" title=css>css 中的 border-collapse 属性可以将表格的边框合并为单一的边框。

其值如下:

collapse:将边框合并为单一的边框

separate:默认值,边框被分开,不会合并

inherit:继承父元素的 border-collapse 属性值。

注意:如果使用 collapse 值时,推荐设置 border-spacing 属性的值为 0。

2.盒子阴影

box-shadow

用于为div元素添加一个或多个阴影边框

其属性值

h-shadow    (必填)            设置水平阴影的位置

v-shadow    (必填)            设置垂直阴影的位置

blur     (选填)                     设置模糊距离

color   (选填)                     设置颜色,默认为黑色

html" title=css>css">box-shadow: 0 0 5px;

3.首行缩进

test-indent       ,一般缩进两个字符就是2em

示例:

text-indent:2em;

4.文本阴影

text-shadow

属性和box-shadow一样

示例CSS代码

html" title=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;
}


http://www.ppmy.cn/devtools/122646.html

相关文章

聚星文社——绘唐科技有什么区别!

聚星文社和绘唐科技是两个不同的公司&#xff0c;有一些区别。下面是它们的一些区别&#xff1a; 绘唐科技——聚星文社https://iimenvrieak.feishu.cn/docx/ZhRNdEWT6oGdCwxdhOPcdds7nof 行业领域&#xff1a;聚星文社主要从事文化娱乐行业&#xff0c;包括出版、影视制作等&…

基于SpringBoot+Vue+MySQL的智能垃圾分类系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着城市化进程的加速&#xff0c;垃圾问题日益凸显&#xff0c;不仅对环境造成污染&#xff0c;也给城市管理带来了巨大挑战。传统的垃圾分类方式不仅费时费力&#xff0c;而且手工操作容易出现错误&#xff0c;导致垃圾分类效…

<STC32G12K128入门第十六步>获取NTP网络时间

前言 这里主要讲解如何通过NTP服务器获取网络时间。 一、NTP是什么? NTP全名“Network TimeProtocol”,即网络时间协议,是由RFC 1305定义的时间同步协议,用来在分布式时间服务器和客户端之间进行时间同步。 NTP基于UDP报文进行传输,使用的UDP端口号为123。使用NTP的目的…

Pikachu-File Inclusion- 本地文件包含

前端每次挑选篮球明星&#xff0c;都会通过get请求&#xff0c;传了文件名&#xff0c;把页面展示出来&#xff0c;由于文件名时前端传给后台;并且查看源码&#xff0c;没有对参数做限制&#xff1b; 尝试直接从前端修改filename 参数&#xff1b; filename../../../../../../…

QT调用最新的libusb库

一&#xff1a;下载libusb文件 下载最新的库的下载网站&#xff1a;https://libusb.info/ 下载&#xff1a; 解压后目录如下&#xff1a; 二&#xff1a;库文件添加QT中 根据自己的编译器选择库&#xff1a; ①将头文件中添加libusb.h ②源文件中添加libusb-1.0.lib ③添加…

上传文件失败,请检查阿里云配置信息:[The specified bucket is not valid.

-- 十一假期结束 -- 去年今日此门中&#xff0c;人面挑花相应红。 -- 人面不知何处去&#xff0c;桃花依旧笑春风。

Golang 服务器虚拟化应用案例

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…

SQL进阶技巧:影院相邻的座位如何预定?

目录 0 场景描述 1 数据准备 2 问题分析 方法1:利用lag()及lead()分析函数求解 方法2:转换成字符串序列进行分析 方法3:自关联求解 3 小结 0 场景描述 影院座位预定表 T_SEATS 记录了当前座位的预定情况。如有2个人去影院看演唱会,需满足位置紧邻且至少其中一人靠过道…