一、页面的标题图片

先来看看效果：

页面标题图片.png

步骤：
1.需要作为图标的图片到>http://www.bitbug.net/
保存成.ico格式的图片
（注：必须是.ico格式的图片）

2.添加到link下，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 
        页面标题图标
            使用注意：
                图片格式必须是.ico格式
            rel
                后面填充路径和当前文件是什么关系
            rel="shortcut icon"
     -->
     <link rel="shortcut icon" href="img/bitbug_favicon.ico">
    <style>

    </style>
</head>
<body>
</body>
</html>

二、辅助按钮

效果：可以让我们在单选框或多选框中，点击文字既可以选择选项。
如下图：

fuzhuanniu.gif

代码来了~
用label标签套内容就可以啦，要记得id对应是唯一的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        请问摩卡的性别是什么
        <br>
        <!-- label -->
        <input id="man" type="radio" name="sex">
        <label for="man">男孩子</label><br>
        <input id="woman" type="radio" name="sex">
        <label for="woman">女孩子</label><br>
        <input id="weizhi" type="radio" name="sex">
        <label for="weizhi">熊孩子</label>
    </form>

    <form action="">
        请问摩卡的爱好是什么
        <br>
        <input id="eat" type="checkbox" name="hao">
        <label for="eat">吃饭</label><br>
        <input id="shuijiao"type="checkbox" name="hao">
        <label for="shuijiao">睡觉</label>
        <br>
        <input id="doudou" type="checkbox" name="hao">
        <label for="doudou">打豆豆</label>

    </form>
</body>
</html>

三、小图标利用position实现hover变化效果

效果如下：

小图标变化效果.gif

原图：

nav_bg.png

代码~
重点：父级元素高度设置为图片的一半，所以能通过定位实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div div{
            display: inline-block;
            height: 50px;
            width: 50px;
            /*图片实际高度100px,50px的父元素只能看到我们想要的那一半*/
        }
        
        .div_img1{
            background-image: url(img/1zhu.png);
            background-repeat: no-repeat;
        }
        .div_img2{
            background-image: url(img/2yuyin.png);
            background-repeat: no-repeat;
        }
        .div_img3{
            background-image: url(img/3daizi.png);
            background-repeat: no-repeat;
        }
        .div_img4{
            background-image: url(img/4bi.png);
            background-repeat: no-repeat;
        }
        .div_img5{
            background-image: url(img/5xing.png);
            background-repeat: no-repeat;
        }
        div div:hover{
            background-position: 0px -50px;
        }
    </style>
</head>
<body>
    <div>
        <div class="div_img1"></div>
        <div class="div_img2"></div>
        <div class="div_img3"></div>
        <div class="div_img4"></div>
        <div class="div_img5"></div>
    </div>
</body>
</html>