4月3日

4月3日

创建不同样式

1.前景色样式

<style>
			.man{
				color:red;
			}
			.b{
				color:blue;
			}
			.c{
				color: yellow;
			}
			.d{
				color:orange;
			}
			.e{
				color:gray;
			}
			.f{
				color:tan;
			}
			.g{
				color:indigo;
			}
		</style>

2.背景色样式

<style>
			.man{
				background:red;
			}
			.b{
				background:blue;
			}
			.c{
				background: yellow;
			}
			.d{
				background:orange;
			}
			.e{
				background:gray;
			}
			.f{
				background:tan;
			}
			.g{
				background:indigo;
			}
		</style>

.对应class

样式

display: none;/隐藏/
display: block;/块元素/
display: inline;/行元素/
display: inline-block;/行内块元素/

七种不同颜色样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.man{
				color:red;
			}
			.b{
				color:blue;
			}
			.c{
				color: yellow;
			}
			.d{
				color:orange;
			}
			.e{
				color:gray;
			}
			.f{
				color:tan;
			}
			.g{
				color:indigo;
			}
		</style>
	</head>
	<body>
		<h1><a href="#" class="man">红色</a></h1>
		<h1><a href="#"class="b">蓝色</a></h1>
		<h1><a href="#"class="c">黄色</a></h1>
		<h1><a href="#"class="d">橘色</a></h1>
		<h1><a href="#"class="e">灰色</a></h1>
		<h1><a href="#"class="f">tan</a></h1>
		<h1><a href="#"class="g">紫色</a></h1>
	</body>
</html>

一三样式相同，二四样式相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.a{
				color:palegreen;
			}
			.b{
				color:gold;
			}
		</style>
	</head>
	<body>
		<h1><a href="#" class="a">标题一</a></h1>
		<h1><a href="#" class="b">标题二</a></h1>
		<h1><a href="#" class="a">标题三</a></h1>
		<h1><a href="#" class="b">标题四</a></h1>
	</body>
</html>

第二种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.c,.a{
				color:palegreen;
			}
			.d,.b{
				color:gold;
			}
		</style>
	</head>
	<body>
		<h1><a href="#" class="a">标题一</a></h1>
		<h1><a href="#" class="b">标题二</a></h1>
		<h1><a href="#" class="c">标题三</a></h1>
		<h1><a href="#" class="d">标题四</a></h1>
	</body>
</html>

空链接的作用 占位 触发交互 保留链接样式 返回顶部

posted @ 2026-04-06 21:38  宋俊鹏  阅读(3)  评论(0)    收藏  举报