精灵图（雪碧图）：缓解服务器压力，加快页面加载速度

OYlan_

已于 2022-06-13 20:20:07 修改

阅读量99

点赞数 3

分类专栏： HTML+CSS 文章标签： html css

于 2022-06-13 20:14:14 首次发布

本文链接：https://blog.csdn.net/OYlan_/article/details/125265915

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 清除网页中所有元素的默认值 */
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 1010px;
            height: 40px;
            /* 设置导航栏的边框样式*/
            border: solid 1px #bcbbbc;
            /* 水平居中 */
            margin: 0px auto;
        }
        .nav ul{
            list-style-type: none;
            /* 清除序列项目符号 */
        }
        .nav ul li{
            width: 100px;
            /* 使文字居中显示 */
            line-height: 40px;
            float: left;
            border-right: dashed 1px #bcbbbc;
            background-image: url(360bg.png);
            /* 图片不平铺 */
            background-repeat: no-repeat;
        }
        .nav li a{
            /* 清除超链接的下划线 */
            text-decoration: none;
            color: #bcbbbc;
            /* 左内边距 */
            padding-left: 30px;
        }
        .nav li a:hover{
            /* 鼠标悬浮在a标签上变颜色 */
            color: deepskyblue;
        }
        /* 指定背景图片的位置 */
        .icon1{
            background-position: 10px -55px;
        }
        .icon2{
            background-position: 10px -132px;
        }
        .icon3{
            background-position: 10px -213px;
        }
        .icon4{
            background-position: 10px -297px;
        }
        .icon5{
            background-position: 10px -376px;
        }
        .icon6{
            background-position: 10px -455px;
        }
        .icon7{
            background-position: 10px -530px;
        }
        .icon8{
            background-position: 10px -606px;
        }
        .icon9{
            background-position: 10px -684px;
        }
        .icon10{
            background-position: 10px -762px;
        }
        
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="icon1"><a href="#">我的主页</a></li>
            <li class="icon2"><a href="#">新闻头条</a></li>
            <li class="icon3"><a href="#">电视剧</a></li>
            <li class="icon4"><a href="#">最新电影</a></li>
            <li class="icon5"><a href="#">小说大全</a></li>
            <li class="icon6"><a href="#">旅游度假</a></li>
            <li class="icon7"><a href="#">小游戏</a></li>
            <li class="icon8"><a href="#">正品购物</a></li>
            <li class="icon9"><a href="#">美团外卖</a></li>
            <li class="icon10"><a href="#">移动互联</a></li>
        </ul>
    </div>
</body>
</html>