伪类和伪元素

最新推荐文章于 2022-07-22 08:26:24 发布

有品位的程序员

最新推荐文章于 2022-07-22 08:26:24 发布

阅读量875

点赞数 1

分类专栏： HTML5/CSS3 文章标签： css css3 html

本文链接：https://blog.csdn.net/The_Handsome_Sir/article/details/105989423

版权

HTML5/CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、伪类
link:初始效果
visited:点击后的效果
hover:悬停效果
active:点击时的效果
1.伪类超链接

<!DocType html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			a:link{color:orange;}
			a:visited{color:pink;}
			a:hover{color:white;
				background-color:black;
				font-size:25px;
			}
		</style>
	</head>
	<body>
		<a href="#">这是一个超链接</a>
	</body>
</html>

在这里插入图片描述
2.设置图片大小

<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			img:hover{
				width:300px;
				height:300px;
			}
			img{
				width:80px;
				height:80px;
			}
		</style>
	</head>
	<body>
		<table>
		 	<tr>
			<td><img src="images/a.jpg"></td>
			<td><img src="images/a.jpg"></td>
			</tr>
			<tr>
			<td><img src="images/a.jpg"></td>
			<td><img src="images/a.jpg"></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
3.文本框聚焦

<!DocType html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<style type="text/css">
			input:focus{background-color:yellow;}
		</style>
	</head>
	<body>
		<form action="form_action.asp"method="get">
			First name(名):<input type="text" name="fname"/><br/>
			Last name(姓):<input type="text" name="lname"/><br/>
			<input type="submit"value="Submit"/>
		</form>
	</body>
</html>

点击时聚焦文本框
在这里插入图片描述
4.div块

<!DocType html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<style type="text/css">
			div{
				width:50px;
				height:50px;
				background-color:yellow;<!--设置样式-->
			}
		
			div:hover {width:150px;
				height:150px;
				background-color:green;
			}		<!--鼠标悬停时的样式-->
		</style>
	</head>
	<body>  
		<div></div>
	</body>
</html>

在这里插入图片描述
5.设计建议菜单栏

<!DOCTYPE html>
<html>
	<head>
		<style>
			ul{ list-style-type:none;}
			li{display:inline;}
			a:link,a:visited{
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				text-align:center;
				padding:6px;
				text-decoration:none;
				text-transform:uppercase;}
			a:hover,a:active{background-color:#7A991A;}
		</style><!--分别设置点击前后-->
	</head>

	<body>
		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#news">News</a></li>
			<li><a href="#contact">Contact</a></li>
			<li><a href="#about">About</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述
伪元素
设置首行，首字符样式

<!DocType html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		p:first-line{color:#008000;}
		p:first-letter{font-size:30px;}
		</style>
	</head>
	<body>
		<p>666666666666666666666666666666666666666666
		666666666666666666666666666666666666666666666
		</p>
	</body>
</html>

在这里插入图片描述

有品位的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪类和伪元素

一、伪类link:初始效果visited:点击后的效果hover:悬停效果active:点击时的效果1.伪类超链接<!DocType html><html> <head> <meta charset="UTF-8"> <style type="text/css"> a:link{color:orange;}...
复制链接

扫一扫

专栏目录