鄭州網(wǎng)站建設(shè)程序網(wǎng)站頁面禁止訪問
文章目錄
- 前言
- 系列文章目錄
- 1 精靈圖Sprites
- 1.1 為什么需要精靈圖？
- 1.2 精靈圖的使用
- 2 字體圖標(biāo)iconfont
- 2.1 字體圖標(biāo)的產(chǎn)生
- 2.2 字體圖標(biāo)的優(yōu)點
- 2.3 字體文件格式
- 2.4 字體圖標(biāo)的使用
- 2.5 字體圖標(biāo)的引入
- 2.6 字體圖標(biāo)的追加
- 3 CSS三角
- 3.1 普通三角
- 3.2 案例
- 4 CSS用戶界面樣式
- 4.1 什么是界面樣式
- 4.2 鼠標(biāo)樣式cursor
- 4.3 輪廓線outline
- 4.4 防止拖拽文本域resize
- 5 vertical-align屬性應(yīng)用
- 5.1 圖片、表單和文字對齊
- 5.2 解決圖片底部默認(rèn)空白縫隙問題
- 6 溢出文字省略顯示
- 6.1 單行文本
- 6.2 多行文本
- 7 布局技巧
- 7.1 margin負(fù)值的運用
- 7.2 文字圍繞浮動元素
- 7.3 行內(nèi)塊巧妙運用
- 7.4 CSS三角強化
- 8 CSS初始化
前言
這篇文章為我跟隨pink老師重新系統(tǒng)學(xué)習(xí)前端時做的一些筆記。
系列文章目錄
【HTML5與CSS3篇】
D1：HTML基礎(chǔ)：簡介+常用標(biāo)簽
D2：CSS入門：簡介+基礎(chǔ)選擇器+字體&文本屬性+引入方式
D2：CSS基礎(chǔ)：復(fù)合選擇器+元素顯示模式+背景
D3：CSS進階：層疊&繼承&優(yōu)先級+盒子模型+圓角邊框+盒子&文本陰影+浮動
D4：CSS進階：定位+元素的顯示與隱藏
D5：CSS進階：字體圖標(biāo)+CSS三角+光標(biāo)樣式+vertical-align屬性+布局技巧
D5：CSS提高
【JavaScript篇】
D1：JavaScript入門：計算機基礎(chǔ)+變量+數(shù)據(jù)類型
D2：JavaScript基礎(chǔ)：運算符+運算流程分支控制+命名規(guī)范與語法格式
D3：JavaScript進階
1 精靈圖Sprites
1.1 為什么需要精靈圖？
一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾。當(dāng)網(wǎng)頁中的圖像過多時，服務(wù)器就會頻繁地接收和發(fā)送請求圖片，造成服務(wù)器請求壓力過大，這將大大降低頁面的加載速度。因此，為了有效地減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也成CSS Sprites、CSS雪碧）。
核心原理：將網(wǎng)頁中的一些小背景圖像整合到一張大圖中，這樣服務(wù)器只需要一次請求就可以了。
（我沒用過精靈圖，一直用的阿里字體圖標(biāo)。理解了一下，也就是說精靈圖其實是通過background: url(url) no-repeat x y;屬性定位并截取一張大圖的一小部分作為展示內(nèi)容。）
1.2 精靈圖的使用
使用精靈圖的核心：
- 精靈技術(shù)主要針對于背景圖片的使用，就是把多個小背景圖片整合到一張大圖片中。這個大圖片也稱為sprites精靈圖或者雪碧圖。
- 移動背景圖片的位置，此時可以使用background-position屬性。移動的距離就是這個目標(biāo)圖片的x和y坐標(biāo)，注意網(wǎng)頁中的坐標(biāo)有所不同（x軸右邊走是正值，左邊走是負(fù)值，y軸下邊走是正值，上邊走是負(fù)值）。一般情況下都是往上往左移動，所以數(shù)值是負(fù)值。
- 使用精靈圖的時候需要精確測量，每個小背景圖片的大小和位置。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>利用精靈圖拼出自己名字</title><style>/* 善用公共標(biāo)簽、公共類、并集選擇器 */span {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.p {width: 100px;height: 112px;background-position: -493px -276px;}.i {width: 60px;height: 108px;background-position: -327px -142px;}.n {width: 108px;height: 109px;background-position: -215px -141px;}.k {width: 105px;height: 114px;background-position: -495px -142px;}</style></head><body><span class="p">p</span><span class="i">i</span><span class="n">n</span><span class="k">k</span></body>
</html>
2 字體圖標(biāo)iconfont
2.1 字體圖標(biāo)的產(chǎn)生
精靈圖的缺點：
- 圖片文件還是比較大的。
- 圖片本身放大和縮小會失真。
- 一旦圖片制作完畢想要更換非常復(fù)雜。
有一種技術(shù)的出現(xiàn)很好的解決了以上問題，就是字體圖標(biāo)iconfont。字體圖標(biāo)可以提供一種方便高效的圖標(biāo)使用方式，展示的是圖標(biāo)，本質(zhì)屬于字體（即可以隨意更改尺寸和顏色）。
字體圖標(biāo)使用場景：主要用于顯示網(wǎng)頁中通用、常用的一些小圖標(biāo)。
2.2 字體圖標(biāo)的優(yōu)點
- 輕量級：一個圖標(biāo)字體比一系列的圖像要小，一旦字體加載了，圖標(biāo)就會馬上渲染出來，減少了服務(wù)器的請求。
- 靈活性：本質(zhì)其實是文字，可以很隨意的改變顏色，產(chǎn)生陰影，透明效果，旋轉(zhuǎn)等。
- 兼容性：幾乎支持所有的瀏覽器。
但是字體圖標(biāo)不能替代精靈技術(shù)，只是對工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化。復(fù)雜的背景圖片還是需要使用精靈圖以圖片的形式展示。
- 如果遇到一些結(jié)構(gòu)和樣式比較簡單的小圖標(biāo)，就用字體圖標(biāo)。
- 如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點的小圖片（如需要漸變、立體等效果），就用精靈圖。
2.3 字體文件格式
不同瀏覽器所支持的字體格式是不一樣的，字體圖標(biāo)之所以兼容，就是因為包含了主流瀏覽器支持的字體文件：.ttf 格式、.woff 格式、.eot 格式、.svg 格式，不同瀏覽器支持不同的格式。
2.4 字體圖標(biāo)的使用
字體圖標(biāo)是一些網(wǎng)頁常見的小圖標(biāo)，直接網(wǎng)上下載即可。
- 字體圖標(biāo)的下載
- 字體圖標(biāo)的引入（引入到我們html頁面中）
- 字體圖標(biāo)的追加（以后添加新的小圖標(biāo)）
推薦下載網(wǎng)站：
- icomoon字庫：外網(wǎng)，無需登錄
IcoMoon App --> 選擇需要的圖標(biāo) --> 自定義編輯 --> Generate Font --> Download - 阿里iconfont字庫：國內(nèi)，需要登錄（注意商業(yè)用途的授權(quán)問題）
2.5 字體圖標(biāo)的引入
- 將壓縮包里面的fonts文件夾放入頁面根目錄下。
- 在CSS樣式中全局聲明字體：簡單理解把這些字體通過css引入到頁面中（注意字體文件路徑問題，以下代碼可在壓縮包下的style.css中直接復(fù)制）。
@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?7kkyc2');src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal; } - 在HTML標(biāo)簽內(nèi)添加小圖標(biāo)。
打開解壓文件中的demo.html，復(fù)制想要的圖標(biāo)，粘貼進<span></span>標(biāo)簽中。 - 給標(biāo)簽定義字體（注意標(biāo)簽中的font-family的值和之前引入字體圖標(biāo)的font-family必須一致，此處均為icomoon）。
/* span使用字體圖標(biāo) */ span {font-family: "icomoon"; }
2.6 字體圖標(biāo)的追加
如果工作中，原來的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)到原來的字體文件中。
以icomoon字庫網(wǎng)為例：import icons --> 重新加載壓縮包下的selection.json --> Generate Font --> Download --> 更換壓縮包
3 CSS三角
網(wǎng)頁中常見一些三角形，使用CSS直接畫出來即可，不必做成圖片或者字體圖標(biāo)。
3.1 普通三角
.box1 {width: 0;height: 0;/* border: 10px solid pink; */border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;
}
.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 100px auto;
}
3.2 案例
.jd {position: relative;width: 120px;height: 60px;background-color: pink;
}
.jd span {position: absolute;right: 15px;/* border為5px，為實現(xiàn)三角壓在盒子上，向上移動10px */top: -10px;width: 0;height: 0;/* 為了照顧兼容性 */line-height: 0; font-size: 0;border: 5px solid transparent;border-bottom-color: pink;
}
4 CSS用戶界面樣式
4.1 什么是界面樣式
所謂的界面樣式，就是更改一些用戶操作樣式，以便改善用戶體驗。
4.2 鼠標(biāo)樣式cursor
設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
li {cursor: pointer;
}
- default：小白箭頭（默認(rèn)）
- pointer：小手
- move：移動
- text：文本
- not-allowed：禁止
4.3 輪廓線outline
給表單<input>添加outline: 0;或者outline: none;樣式后，就可以去掉默認(rèn)的藍色邊框，即取消表單輪廓。
input {outline: none;
}
4.4 防止拖拽文本域resize
實際開發(fā)中，文本域右下角是不可以拖拽的。
textarea {resize: none;
}
盡量把文本域標(biāo)簽寫在一行內(nèi)。分行寫會賦默認(rèn)值為一部分空格。
<textarea name="" id="" cols="30" rows="10"></textarea>
5 vertical-align屬性應(yīng)用
vertical-align屬性用于設(shè)置一個元素的垂直對齊方式，但是它只針對于行內(nèi)元素或者行內(nèi)塊元素有效。
使用場景：經(jīng)常用于設(shè)置圖片或者表單（行內(nèi)塊元素）和文字垂直對齊。
vertical-align: baseline | top | middle | bottom
- baseline：默認(rèn)值，元素放置在父元素的基線上
- top：把元素的頂端與行中最高元素的頂端對齊（頂線對齊）
- middle：把此元素放置在父元素的中部（中線對齊，即圖片和文字垂直居中）
- bottom：把元素的頂端與行中最低的元素的頂端對齊（底線對齊）
5.1 圖片、表單和文字對齊
圖片、表單都屬于行內(nèi)塊元素，默認(rèn)的vertical-align是基線對齊。此時可以給圖片、表單這些行內(nèi)塊元素的vertical-align屬性設(shè)置為middle就可以讓文字和圖片垂直居中對齊了。
5.2 解決圖片底部默認(rèn)空白縫隙問題
圖片底側(cè)會有一個空白縫隙，原因是行內(nèi)塊元素會和文字的基線對齊（給圖片加邊框就可以看見）。
主要解決辦法：
- 給圖片添加
vertical-align: middle | top | bottom等。（提倡使用） - 把圖片轉(zhuǎn)換為塊級元素
display:block;，因為塊級元素不會有vertical-align屬性。（但可能影響其他元素的布局）
6 溢出文字省略顯示
6.1 單行文本
必須滿足三個條件：
/* 1.先強制一行內(nèi)顯示文本 */
white-space: nowrap; /* 默認(rèn)normal是自動換行，nowrap是強制一行顯示文本 */
/* 2.超出的部分隱藏 */
overflow: hidden;
/* 3.文字用省略號替代超出的部分 */
text-overflow: ellipsis;
/*ellipsis:省略號*/
6.2 多行文本
多行文本溢出顯示省略號，有較大的兼容性問題，適合于webKit瀏覽器或移動端（移動端大部分是webKit內(nèi)核）。
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 2;
/* 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient : vertical;
更推薦讓后臺實現(xiàn)這個效果，后臺操作更簡單。
（好神奇。。我以前都是用JS判斷字符串的長度然后切掉后面部分，再銜接省略號。直接在CSS控制文本溢出方便多了，不過確實要考慮IE的兼容性）
7 布局技巧
7.1 margin負(fù)值的運用
兩個相鄰的盒子加邊框1px，浮動，貼緊會出現(xiàn)邊框變粗的問題。
解決方案：給右邊盒子添加margin-left: -1px;，使邊框完全重合（注意正數(shù)向右邊走，負(fù)數(shù)向左邊走）。
因為瀏覽器是依次渲染元素的，所以不需要擔(dān)心每個標(biāo)簽添加margin-left: -1px;屬性后邊框無法完全重合的問題。
ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;
}
ul li:hover {border: 1px solid blue;
}
但是，當(dāng)鼠標(biāo)經(jīng)過除最后一個盒子外的其他某個盒子時，右邊框被右側(cè)盒子的左邊框覆蓋，無法正常顯示。
解決方案：當(dāng)鼠標(biāo)懸停時，提高當(dāng)前盒子的層級即可。
- 如果沒有定位，則加相對定位（保留位置）
- 如果有定位，則加 z-index
ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;
}
/* ul li:hover {1. 如果盒子沒有定位，則鼠標(biāo)經(jīng)過添加相對定位即可position: relative;border: 1px solid blue;
} */
ul li:hover {/* 2.如果li都有定位，則利用 z-index提高層級 */z-index: 1;border: 1px solid blue;
}
7.2 文字圍繞浮動元素
巧妙運用浮動元素不會壓住文字的特性。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文字圍繞浮動元素的妙用</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {float: left;width: 120px;height: 60px;margin-right: 5px;}.pic img {width: 100%;}</style></head><body><div class="box"><div class="pic"><img src="images/img.png" alt=""></div><p>【集錦】熱身賽-巴西0-1秘魯 內(nèi)馬爾替補兩人血染賽場</p></div></body>
</html>
7.3 行內(nèi)塊巧妙運用
分頁器：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行內(nèi)塊的巧妙運用</title><style>* {margin: 0;padding: 0;}.box {text-align: center;}.box a {/* 行內(nèi)塊元素才可以設(shè)置大小 */display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;/* 取消輪廓線 */outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style></head><body><div class="box"><a href="#" class="prev"><<上一頁</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#" class="next">>>下一頁</a>到第 <input type="text">頁<button>確定</button></div></body>
</html>
7.4 CSS三角強化
但是之前畫的都是等腰三角形，這里需要直角三角形。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行內(nèi)塊的巧妙運用</title><style>* {margin: 20px; }.box1 {width: 0;height: 0;border-top: 50px solid pink;border-right: 50px solid skyblue;border-bottom: 50px solid blue;border-left: 50px solid green;}.box2 {width: 0;height: 0;border-top: 50px solid transparent;border-right: 50px solid skyblue;/* 左邊和下邊的邊框?qū)挾仍O(shè)置為0 */border-bottom: 0 solid blue;border-left: 0 solid green;}.box3 {width: 0;height: 0;/* 把上邊框?qū)挾日{(diào)大 */border-top: 100px solid transparent;border-right: 50px solid skyblue;/* 左邊和下邊的邊框?qū)挾仍O(shè)置為0 */border-bottom: 0 solid blue;border-left: 0 solid green;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>
價格標(biāo)簽：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>CSS三角強化的巧妙運用</title><style>.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style></head><body><div class="price"><span class="miaosha">￥1650<i></i></span><span class="origin">￥5650</span></div></body>
</html>
8 CSS初始化
不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的。為了消除不同瀏覽器對HTML文本呈現(xiàn)的差異，照顧瀏覽器的兼容，需要對CSS初始化。簡單理解，CSS初始化就是指重設(shè)瀏覽器的樣式，也稱為CSS Reset。
每個網(wǎng)頁都必須首先進行CSS初始化。
以京東網(wǎng)站為例，獲取CSS初始化代碼：
- 右鍵“查看網(wǎng)頁源代碼”
- 單擊CSS文件<link>的網(wǎng)址
- 打開CSS文件
- Ctrl + F彈出搜索框
- 輸入’body’
- 復(fù)制body的所有屬性
/* 把所有標(biāo)簽的內(nèi)外邊距清零 */
* {margin: 0;padding: 0
}
/* em和i斜體標(biāo)簽的文字不傾斜 */
em,
i {font-style: normal
}
/* 去掉li的小圓點 */
li {list-style: none
}
img {/* 照顧低版本瀏覽器。如果圖片外面包含了鏈接，會有邊框的問題 */border: 0;/* 取消圖片底側(cè)有空白縫隙的問題 */vertical-align: middle
}
button {/* 鼠標(biāo)懸停button按鈕時的光標(biāo)樣式 */cursor: pointer
}
a {color: #666;text-decoration: none
}
a:hover {color: #c81623
}
button,
input {/* "\5B8B\4F53"就是宋體的意思，這樣瀏覽器兼容性比較好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {/* CSS3抗鋸齒形，讓文字顯示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}
.hide,
.none {display: none
}
/* 清除浮動 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}
.clearfix {*zoom: 1
}
把中文字體的名稱用相應(yīng)的Unicode編碼來代替，這樣就可以有效避免瀏覽器解釋CSS代碼時出現(xiàn)亂碼的問題。