CSS学习4 - 例子CSS-sprities

CSS学习4 - 例子CSS-sprities

例子1:

    CSS学习4 - 例子CSS-sprities

要做成上面的效果:背景的***、红色、白色都是图片。背景图片如下:

CSS学习4 - 例子CSS-sprities

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        #menu{
            width:500px;
            height:28px;
            border-bottom:3px solid #e10001;
            /*margin-left:auto;
            margin-right:auto;*/
            margin:0 auto;
            margin-top:10px;
            padding-bottom:1px;
        }
        #menu ul{
            list-style-type:none;
            padding-left:0px;
            margin-top:0px;
        }
        #menu ul li{
            width:87px;
            height:28px;
            float:left;
            line-height:28px;
            text-align:center;
            margin-left:2px;
        }
        #menu ul li a{
            display:block;
            text-decoration:none;
            background:url(bg.png) 0 -28px no-repeat;
            color:#000;
            font-size:14px;
        }
        #menu ul li a:hover{
            background:url(bg.png) 0 -56px no-repeat;
            color:#f00;
        }
        #menu ul li #current{
            background:url(bg.png) 0 0 no-repeat;
            font-weight:bold;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">Sohu</a></li>
            <li><a href="#">Sina</a></li>
            <li><a href="#">Baidu</a></li>
            <li><a href="#" id="current">Google</a></li>
            <li><a href="#" >Alibaba</a></li>
        </ul>
    </div>
</body>
</html>


例子2:做成下面的效果,一段文字前面有小图标,鼠标放上变成“√”

CSS学习4 - 例子CSS-sprities

CSS学习4 - 例子CSS-sprities

代码:图片如下

CSS学习4 - 例子CSS-sprities

CSS学习4 - 例子CSS-sprities

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        a{
            background:url(img/mail2.png) left center no-repeat;
            padding-left:20px;
            text-decoration:none;
        }
        a:hover{
            background-image:url(img/yes.png);
            /*虽然没有设置像素值,但是依然有效!
            因为a:hover继承了a的前面设置的值!*/
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com.com">一封信</a>
</body>
</html>


例子3:对form的一些操作,如text框(圆角),password(右面有一个对勾) ,以及button按钮(鼠标放上换图片)

CSS学习4 - 例子CSS-sprities

CSS学习4 - 例子CSS-sprities

图片:

CSS学习4 - 例子CSS-sprities

CSS学习4 - 例子CSS-sprities

CSS学习4 - 例子CSS-sprities

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        /*css3的写法*/
        input[type="text"]{
            width:300px;
            height:30px;
            font-size:24px;
            color:#ff7400;
            border:1px solid #ccc;
            border-radius:15px; /*圆角*/
            padding:0px 15px; /*内容距离左右15px*/
        }
        input[type="password"] {
            width:300px;
            height:30px;
            background:url(img/yes.png) no-repeat right center;
             /*right center 也可以用像素值*/
              
            border:1px solid #ccc;
            padding-right:20px;
        }
        input[type="button"] {
            width:122px;
            height:42px;
            background:url(img/button.png) no-repeat;/*给按钮加个图片*/
            border:none; /*去掉按钮的外框*/
            cursor:pointer;
        }
        input[type="button"]:hover{
            background-image:url(img/button2.png);
        }
         
    </style>
     
</head>
<body>
    <input type="text" name="" id="" />
    <br/>
    <input type="password" name="" id="" />
    <br/>
    <input type="button" value="" />
</body>
</html>


上一篇:我如何发现Facebook服务器中的远程代码执行漏洞


下一篇:牛逼!Python函数和文件操作(长文系列第3篇)(下)