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;
   }

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

CSS样式补充第二天

猜你喜欢