背景边框样式/超链接(伪类)样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景边框样式</title>
<style>
	#p1{
		/*边框实线*/
	/*			border-style: solid;*/
		/*边框虚线*/
	/*		border-style: dashed;*/
		/*边框点线*/
	/*		border-style:dotted;*/
		/*	边框双线*/
	/*		border-style:double;*/
		/* 设置边框大小*/
	/*		border-width:1px; 	*/
		/*边框颜色*/
	/*		border-color: #00E0F3;*/
	/*先设置边框的大小，在设置边框的样式，最后在设置颜色，顺序不要混*/
		/*border: 1px solid green;*/
	/*局部边框样式设置,先设置上下左右,在设置大小,在设置想要的边框样式,最后来个颜色*/
		border-bottom: 10px dotted #BBBBBB;
		border-left: 1px solid red;
	/*设置背景颜色*/
/*		background-color: #CE00FC;*/
	/*设置背景图*/
		background-image: url(images/f.jpg);
	/*设置背景图的位置*/
		background-position: -30px 57px;
	}
	li{
		border-bottom: 1px dotted  #BBBBBB;
		
	}
	body{
		background-image: url(images/f.jpg);
	/*	平铺效果*/
		background-repeat:repeat-y;
	/*	是否随内容而滚动(了解)*/
		background-attachment: fixed;
	}
	
</style>
</head>

<body>
<p id="p1">己所不欲，勿施于人。——《论语·颜渊》,Hellow</p>
<ul type="disc">
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
	<li>选项4</li><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</ul>
</body>
</html>

超链接样式:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接样式(伪类)</title>
</head>
<style>
	/*未访问的样式*/
	#a1:link{
		text-decoration: none;
		color: #00FDC2;
	}
	/*访问后的样式*/
	#a1:visited{
		color: yellow;
	}
	/*点击时的样式*/
	#a1:active{
		color:blue;
	}
	/*鼠标悬浮时(经过)的样式*/
	#a1:hover{
		color:#666666;
		text-decoration: underline;
	}
	/*hover可以用在任意标签*/
	#p1:hover{
		color: pink;
	}
</style>
<body>
<a href="#" id="a1">起于凡而非凡</a><br>
<span id="p1">赵子龙</span>
</body>
</html>