前端筆記記錄---精靈圖的實現

阿新 • • 發佈：2020-12-24

技術標籤：html css html css

宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

為什麼使用精靈圖？

一個網頁中往往會應用很多小的背景影象作為修飾，當網頁中的影象過多時，伺服器就會頻繁地接受和傳送請求，這將大大降低頁面的載入速度。所以，為了有效地減少伺服器接受和傳送請求的次數，提高頁面的載入速度。

原理

將網頁中的一些背景影象整合到一張大圖中（精靈圖），當網頁元素需要使用時，定位到精靈圖中不同位置的某個小圖即可。
如：我們使用這樣一張精靈圖作為背景圖：在這裡插入圖片描述

實現

效果：圖示橫排顯示在頁面，當點選圖示後，可進入相應的頁面
在這裡插入圖片描述
程式碼：

<!DOCTYPE html> 

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list {
			/*使列表顯示在螢幕右上方*/
			position: absolute;
			right: 100px;
			top 
: 5px;
		}
		.list li {
			/*使列表水平排列*/
			list-style: none;
			width: 30px;
			height: 30px;
			float: left;
			margin-right: 20px;
		}
		.list li a {
			display: inline-block;
			width: 30px;
			height: 30px;
		}
		.list .qq {
			background: url(imgs/sprite.png) no-repeat -20px -15px;
		}
		.list .post {
			background 
: url(imgs/sprite.png) no-repeat -20px -80px;
		}
		.list .wechat {
			background: url(imgs/sprite.png) no-repeat -20px -145px;
		}
		.list .sina {
			background: url(imgs/sprite.png) no-repeat -20px -208px;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li class="qq"><a href="https://www.qq.com/"></a></li>
		<li class="post"><a href="https://tieba.baidu.com/"></a></li>
		<li class="wechat"><a href="https://web.wechat.com/"></a></li>
		<li class="sina"><a href="https://www.sina.com.cn/"></a></li>
	</ul>
</body>
</html>

前端筆記記錄---精靈圖的實現

技術標籤：htmlcsshtmlcss 宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

前端筆記記錄---簡單導航欄的實現

技術標籤：htmlcsshtmlcss 簡單導航欄的實現效果：具體程式碼： <!DOCTYPE html>

前端筆記記錄---視訊播放效果的實現（display的使用）

技術標籤：htmlcsshtmlcss 宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

前端筆記記錄----簡單導航欄續（背景圖片練習）

技術標籤：htmlcsshtmlcss 實現效果點選前：點選後：實現程式碼 <!DOCTYPE html>

three使用精靈圖實現標籤

最近設計到一個3d專案，需要在模型上新增一個常顯的標籤，查閱資料後決定採用 canvas 和精靈圖的方式來屬性標籤

「UnityShader筆記」07. 在世界空間下基於法線貼圖實現凹凸紋理效果

Part1.程式碼逐段解析 struct a2v{ float4 vertex : POSITION;//頂點模型空間位置 float3 normal : NORMAL;

mysql自聯去重的一些筆記記錄

我先把功能場景簡要闡述下：資料行欄位如下： name started_at type 在這張表裡，name有重複值

Vue前端專案部署IIS的實現

背景：最近用vue寫了個demo(不涉及呼叫後臺資料)，為了給銷售團隊更好的給客戶講述產品的一些特點及大體的感官認識。需要將自己做的專案安裝到他們的筆記本上面去，作為一個銷售人員來說，他不會知道例如vue中的npm

extjs4圖表繪製之折線圖實現方法分析

本文例項講述了extjs4圖表繪製之折線圖實現方法。分享給大家供大家參考，具體如下：

extjs圖形繪製之餅圖實現方法分析

本文例項講述了extjs圖形繪製之餅圖實現方法。分享給大家供大家參考，具體如下：

extjs圖表繪製之條形圖實現方法分析

本文例項講述了extjs圖表繪製之條形圖實現方法。分享給大家供大家參考，具體如下：

JS前端模組化原理與實現方法詳解

本文例項講述了JS前端模組化原理與實現方法。分享給大家供大家參考，具體如下：

springboot如何去獲取前端傳遞的引數的實現

本文主要討論spring-boot如何獲取前端傳過來的引數，這些引數主要有兩大類，一類是URL裡的引數，一個是請求body裡的引數

Android開發自定義控制元件之折線圖實現方法詳解

本文例項講述了Android開發自定義控制元件之折線圖實現方法。分享給大家供大家參考，具體如下：

vue+webAPI中json相互轉換的點滴記錄，用於實現按分值的調查問卷功能

在vue和webapi中，免不了在json字串和json對像間相互轉換，把常用的轉換記錄一下，下面是前端中用到的陣列例子

Python資料視覺化圖實現過程詳解

python畫分佈圖程式碼示例： # encoding=utf-8 import matplotlib.pyplot as plt from pylab import * # 支援中文

前端筆記（關於解決打包時報node-sass錯誤的問題）

這個問題之前反覆出現，試過重新從其他同事將node_modules拿過來用，但是過了幾天又出同樣的問題

前端筆記（關於webpack打包時記憶體溢位問題的解決）

首先安裝increase-memory-limit cnpm install -g increase-memory-limit 重啟cmd，並在專案跟目錄中執行一下

前端筆記（建立順序陣列、取選中月最後一天日期、判斷變數、git命令）

建立一個從0開始的順序陣列 [...new Array(5).keys()] //[0,1,2,3,4] 陣列反向 [0,1,2,3,4,5].reverse() //[4,3,2,1,0]

【.Net Core】RSA演算法前端及後端加密實現

前言非對稱加密演算法的優缺點就不贅述了，目前使用最廣泛的就是RSA演算法，而在Web專案中一些關鍵資訊肯定是不能明文傳輸的，最簡單的就是使用者密碼。