#今日说码栏目#第十七集锚点和精灵图

最新推荐文章于 2024-10-05 12:07:50 发布

房东的_猪

最新推荐文章于 2024-10-05 12:07:50 发布

阅读量133

点赞数 1

文章标签： HTML锚点 CSS精灵图图片整合页面导航性能优化

本文链接：https://blog.csdn.net/abner_/article/details/126016829

版权

1、锚点

锚点，点击图片中的某个链接可以快速转到网页中需要找寻的位置。

主要用到的知识点为使用a标签链接到所需要查询的盒子。

<a href="#锚点名称">京东秒杀</a>

<div id="锚点名称">京东秒杀</div>

以下，我将简单写一个可以实现锚点功能的代码：

<!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>锚点</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			a {
				text-decoration: none;
				color: rgb(101, 91, 91);
			}
			ul {
				list-style: none;
				position: fixed;
				right: 0;
				top: 160px;
			}
			li {
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: rgb(239, 14, 14) solid 3px;
			}
			div {
				height: 520px;
				border: rgb(222, 13, 69) solid 3px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#a">某东秒杀</a></li>
			<li><a href="#b">双11 </a></li>
			<li><a href="#c">频道优选</a></li>
			<li><a href="#d">特色广场</a></li>
		</ul>
		<div id="a">某东秒杀</div>
		<div id="b">双11</div>
		<div id="c">频道优选</div>
		<div id="d">特色广场</div>
	</body>
</html>

网页效果如下所示：

右边的边框可以进行锚点功能的实现，如：点击“频道优选”字样，可以转到频道优选块。

2、图片整合技术(精灵图、雪碧图)

图片整合技术（CSS-Sprite）雪碧图/精灵图

优点：

①将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，

提高访问效率，提高了用户体验。

②将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

雪碧图使用步骤

①:先确定要使用的图标

②:测量图标的大小

③:根据测量结果创建一个元素

④:将雪碧图设置为元素的背景

⑤：设置一个偏移量以显示正确的图片

精灵图(雪碧图)主要使用到图片背景样式的知识点

以下是一段精灵图的完整代码。

<!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>
   <link rel="stylesheet" href="./sprite.css">
</head>
<body>
  <div class="every">
    <h3>职场经验</h3>
    <ul class="zhengti">
        <li>
            <a href="#">
                <div class="first"></div>
                <p>求职技巧</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="second"></div>
                <p>行业薪资</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="third"></div>
                <p>简历模板</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="fourth"></div>
                <p>就业指导</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="fifth"></div>
                <p>实习兼职</p>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="sixth"></div>
                <p>沟通技巧</p>
            </a>
        </li>
    </ul>
  </div>
</body>

</html>

以下是html精灵图的css样式代码

* {
  margin: 0;
  padding: 0;
}

li {
  width: 70px;
  height: 70px;
  list-style: none;
  float: left;
  margin: 10px;
  text-align: center;
}

li:hover {
  background-color: rgb(248, 248, 248);
}
li:hover p{
  color: red;
}
a {
  text-decoration: none;
}

.every{
  width: 300px;
  height: 300px;
  margin: 20px;
  border: grey solid 3px;
}

h3 {
  margin: 10px;
  margin-bottom: none;
}

.zhengti {
  width: 300px;
  height: 300px;
  margin: 20px;
}

.first {
  width: 70px;
  height: 50px;
  background-image: url(./ToolsIcon.png);
  background-repeat: no-repeat;
  background-position: top center;
  margin-top: 5px;
}

.second {
  width: 70px;
  height: 50px;
  background-image: url(./ToolsIcon.png);
  background-repeat: no-repeat;
  background-position: center -70px;
  margin-top: 5px;
}

.third {
  width: 70px;
  height: 50px;
  background-image: url(./ToolsIcon.png);
  background-repeat: no-repeat;
  background-position: center -140px;
  margin-top: 5px;
}

.fourth {
  width: 70px;
  height: 50px;
  background-image: url(./ToolsIcon.png);
  background-repeat: no-repeat;
  background-position: center -210px;
  margin-top: 5px;
}

.fifth {
  width: 70px;
  height: 50px;
  background-image: url(./ToolsIcon.png);
  background-repeat: no-repeat;
  background-position: center -280px;
  margin-top: 5px;
}

.sixth {
  width: 70px;
  height: 50px;
  background-image: url(./ToolsIcon.png);
  background-repeat: no-repeat;
  background-position: center -350px;
  margin-top: 5px;
}

p {
  margin-top: -10px;
  color: black;
}