链接伪类和列表

星屑幻想

已于 2022-03-06 14:06:51 修改

阅读量1k

点赞数

文章标签： linq html p2p

于 2022-03-06 10:22:38 首次发布

本文链接：https://blog.csdn.net/Stardust_fantasy/article/details/123306466

版权

链接伪类

a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的

a:visited{属性:值;} 链接访问之后的状态

a:hover{属性:值;} 鼠标放上去显示的状态

a:active{属性:值;} 链接激活的状态

:focus{属性:值;} 获取焦点

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。

注意：伪元素是有书写顺序的： L V H A

1）静态伪类：只能用于超链接的样式。如下：

link 超链接点击之前

visited 链接被访问过之后

以上两种样式，只能用于超链接。

2）动态伪类：针对所有标签都适用的样式。如下：

hover “悬停”：鼠标放到标签上的时候

active “激活”：鼠标点击标签，但是不松手时

列表

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 - 列表项的标记有数字或者字母

不管是有序还是无序，内容的封装都是使用

不管是有序列表还是无序列表，里面直接出现的标签只能是li标签，li中是最终显示的内容，其他标签可以出现在li标签中

无序列表中type属性的常用值有三个，它们呈现的效果不同:

小黑点: disc（默认值）；

方块: square；

空心圆: circle。

有序列表其属性 type=“value”

value=123、abc、ABC

列表转换

display: inline ；内联元素的默认值，将块级元素转换为内联元素；
display: block ; 块元素的默认值，将内联元素转换为块级元素；
display: inline-block ; 既有内联元素的特性，也具有块级元素的特征；可以让块级元素排在一行
display: none ; 此元素不会在页面中显示；即隐藏了元素；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			a:link{
				/*超链接点击之前的颜色*/
				color: hotpink;
			}
			a:visited{
				/*超链接点击之后的颜色*/
				/*color: red;*/
			}
			a:hover{
				/*鼠标悬停在超链接上的颜色*/
				color: seagreen;
			}
			a:active{
				/*鼠标点击超链接瞬间的颜色*/
				color: cornsilk;
			}
			a{
				/*设置文本大小、高度、字体粗细*/
				font-size: 90px;
				line-height: 500px;
				font-weight: 200;
				/*text-decoration: none;去除链接的下划线*/
				text-decoration: none;
			}
			li{
				/*将列表从块转行内*/
				display: inline;
				padding-left: 80px;
			}
			.mn{
				font-weight: 500;	
			}

		</style>
		
		<!--type=用于编号的数字,字母等的类型，如type=a，
			则编号用英文字母。value表示有序列表项目符号的类型。
			制作列表
			ul：无序  小黑点: disc（默认值）；方块: square；空心圆: circle 
			ol有序   123、abc、ABC、i
			基本语法格式：
			<ol type=value>
				<li>列表项1</li>
				<li>列表项2</li>
				<li>列表项3</li>
			</ol>
		-->
		<ul>
			<li>
				<a href="https://www.baidu.com/?tn=15007414_8_dg" class="mn">百度</a>
			</li>
			<li>
				<a href="http://guozhivip.com/" class="mn">果汁</a>
			</li>
			<li>
				<a href="https://y.qq.com/">音乐</a>
			</li>
			<li>
				<a href="https://new.shuge.org/">书格</a>
			</li>
			<li>
				<a href="https://www.allhistory.com/">历史</a>
			</li>
		</ul>

	</body>
</html>

星屑幻想

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
链接伪类和列表

链接伪类a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的a:visited{属性:值;} 链接访问之后的状态a:hover{属性:值;} 鼠标放上去显示的状态a:active{属性:值;} 链接激活的状态:focus{属性:值;} 获取焦点伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。注意：伪元素是有书写顺序的： L V H A1）静态伪类：只能用于超链接的样式。如下：link 超链接点击之前visited 链接被访问
复制链接

扫一扫