#p1{
/* border- 1px;*/
/*边框实线*/
/*border-style: solid;*/
/*边框虚线*/
/*border-style: dashed;*/
/*边框点线*/
/*border-style:dotted;*/
/*边框双线*/
/*border-style:double;*/
/*边框颜色*/
/*border-color: red;*/
/*简单写法*/
/* border: 1px dotted orange;*/
border-bottom: 1px dotted #A2A0A0;
border-left: 2px double red;
/*背景颜色*/
/* background-color: blue;*/
background-image: url(img/a.jpg);
/*背景图位置 */
background-position: -30px -500px;
}
元素标签引用案例
li{
border-bottom: 1px dotted yellow;
}
body{
background-image: url(img/2.png);
background-repeat: repeat-y;
background-attachment: fixed;
}
<ul type="dis">
<li>选项一</li>
<li>选项二</li>
</ul>
CSS图片位置的调整 案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #in1{ background-image:url(img/bg.png); background-position: -247px -90px; text-indent: 25px; } </style> </head> <body> <input type="text" id="in1"> </body> </html>
给文字添加触碰效果，点击后效果，移动到效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>伪类</title> <style> /*未访问的样式*/ #a1:link{ text-decoration: none; color: red; } /*访问后的样式*/ #a1:visited{ color: yellow; } /*鼠标悬浮时的样式*/ #a1:hover{ color:#666666; } /*点击时的样式*/ #a1:active{ color:blue; } /*hover可以用在任意标签*/ #p1:hover{ color: pink; } </style> </head> <body> <a href="#" id="a1">百度</a> <p id="p1">这是p标签</p>
<a href="#" style="text-decoration: none;">去下划线超链接样式</a>
</body> </html>
有序列表无需列表用CSS样式快速编辑 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> ul li{ /*list-style-type: circle;*/ list-style-image: url(img/sp.png); } ol li{ list-style-type: lower-alpha; } </style> </head> <body> <!--无序列表--> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> <!--有序列表--> <ol> <li>美术</li> <li>体育</li> <li>艺术</li> </ol> </body> </html>