正文
CSS样式补充第二天
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
#p1{
/* border-width: 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>
