<!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-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>