雄:又到了技術(shù)大黍講技術(shù)的時(shí)刻,技術(shù)雖然干,但持續(xù)就會(huì)有收獲。
話不多說(shuō)有請(qǐng)技術(shù)大黍!
技術(shù)大黍:今天用對(duì)話場(chǎng)景給大家學(xué)CSS分割圖片的方法。
學(xué)生:老師,在嗎?能不能給我講講CSS分割圖片的方法呀?有點(diǎn)懵。
老師:是通過(guò)i標(biāo)簽,把一個(gè)很多圖標(biāo)的圖片,分割出來(lái)的那個(gè)嗎?
學(xué)生:不是,是background:url("") X,Y坐標(biāo),我看很多網(wǎng)頁(yè)設(shè)計(jì)都是這樣寫(xiě),但XY坐標(biāo)畢竟只是一個(gè)點(diǎn),怎么知道是那一張圖片?應(yīng)該說(shuō)圖片中的那一個(gè)部分
老師:那就是這個(gè)啥
老師:background-image以及background-position 它們分別的作用知道是什么意思嗎?
學(xué)生:不太熟
老師:backgroun-image是設(shè)置背景圖片、background-position是設(shè)置背景圖片的位置,你可以先看看這兩個(gè)樣式的作用
學(xué)生:明白,但background-position是否也需要子絕對(duì),父相對(duì)?
老師:不需要哦 ,那個(gè)是相對(duì)定位,這里是設(shè)置背景圖片位置,跟相對(duì)和絕對(duì)沒(méi)任何關(guān)系
老師:分割圖片就是用這兩個(gè)樣式來(lái)實(shí)現(xiàn)的
學(xué)生:剛才的兩個(gè)樣式搞清楚了,能細(xì)講一下如何分割的嗎?
老師:我們就拿這張圖來(lái)舉例
老師:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用background分割圖標(biāo)</title>
</head>
<body>
<i></i>
</body>
</html>
現(xiàn)在網(wǎng)頁(yè)中 我只放了一個(gè)i標(biāo)簽,打開(kāi)之后 肯定是什么都沒(méi)有的
一片空白
學(xué)生:嗯,明白
老師:接下來(lái),我們先打開(kāi)PS,拿到對(duì)應(yīng)圖標(biāo)的寬高以及位置
老師:你說(shuō)說(shuō),那張圖片,你想要展示那個(gè)圖標(biāo)吧,你選一個(gè)
學(xué)生:就apple吧
老師:這個(gè)么?
學(xué)生:對(duì)
老師:在PS里面,我們可以看到,蘋(píng)果的寬高是30*36,單位是像素
老師:再看位置,蘋(píng)果在x軸的位置是62,y軸的位置是310,單位依然是像素
老師:注意,這個(gè)位置是以蘋(píng)果的左上角為參考的
學(xué)生:OK
老師:嗯,有了這兩個(gè)數(shù)據(jù),那么我們就可以開(kāi)始寫(xiě)代碼了
老師:嗯,有了這兩個(gè)數(shù)據(jù),那么我們就可以開(kāi)始寫(xiě)代碼了
老師:先把i標(biāo)簽設(shè)定為,行塊布局方式,這樣才能設(shè)置寬高,接著設(shè)置背景圖片以及寬高
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
}
</style>
老師:運(yùn)行之后,我們看到,這里有一點(diǎn)點(diǎn)頭
老師:從新回到PS,我們可以看到,這個(gè)頭,其實(shí)就是放大鏡的那點(diǎn)點(diǎn)
老師:也就是說(shuō),我們?cè)O(shè)置寬高之后,多余的被裁切了,這個(gè)沒(méi)問(wèn)題吧?
學(xué)生:沒(méi)問(wèn)題
老師:好,現(xiàn)在關(guān)鍵的來(lái)了
學(xué)生:用代碼移動(dòng)裁剪框?
老師:對(duì)對(duì)對(duì), 這張背景圖片,我們只能看到,我們?cè)O(shè)定的寬高的區(qū)域,接下來(lái),我們就通過(guò)background-position,移動(dòng)背景圖片
老師:把我們想要的那個(gè)圖標(biāo),移動(dòng)到這個(gè)現(xiàn)實(shí)區(qū)域就行了
老師:那移動(dòng)多少呢?當(dāng)然就是剛才我們測(cè)量的距離,也就是63*310
老師:那么背景圖片,x軸是不是應(yīng)該往左邊移動(dòng)63像素?
老師:往左邊,是不是應(yīng)該是-62px,同理,y軸是不是應(yīng)該為-310px
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
background-position: -62px -310px;
}
</style>
老師:現(xiàn)在我們看到,是不是蘋(píng)果圖標(biāo) 出來(lái)了?
學(xué)生:也就是說(shuō)移動(dòng)的是圖片,X和Y軸是不動(dòng)的?所以才是-的?
老師:我們移動(dòng)的其實(shí)是那張背景圖片,那個(gè)顯示窗口其實(shí)是沒(méi)變的,根據(jù)網(wǎng)頁(yè)標(biāo)準(zhǔn)文檔流原理,元素向左移動(dòng),就是負(fù)的
學(xué)生:懂了
技術(shù)大黍:今天的分享到這就結(jié)束了,謝謝小伙伴們。
大雄:好的,謝謝技術(shù)大黍。學(xué)會(huì)的小伙伴們記得‘點(diǎn)贊+訂閱+關(guān)注+評(píng)論+轉(zhuǎn)發(fā)’,沒(méi)學(xué)會(huì)的小伙伴們,那就多看幾遍,哈哈哈~~
這些標(biāo)記用于將頁(yè)面分成多個(gè)部分。熟練地掌握這些標(biāo)記將意味著構(gòu)建出具有良好的結(jié)構(gòu)和布局的頁(yè)面,使其更加友好和易于閱讀。
div標(biāo)記定義了HTML文件中的一個(gè)部分或分區(qū)。它通常包含需要組合在一起的標(biāo)題、段落、表格或其他元素。通過(guò)設(shè)置<div class="">與css一起使用來(lái)設(shè)置網(wǎng)頁(yè)某個(gè)部分的顯示。
p標(biāo)記用來(lái)定義文本的段落,就像你在書(shū)中看到的那樣,一旦文本達(dá)到屏幕邊緣就會(huì)自動(dòng)折到下一行。當(dāng)另一個(gè)<p>標(biāo)記用于開(kāi)始下一個(gè)段落時(shí),瀏覽器將在段落之間添加一些空白。p標(biāo)記具有以下屬性:
span標(biāo)記用于將內(nèi)聯(lián)元素組合在一起,例如句子中的幾個(gè)單詞,以便僅對(duì)這些單詞應(yīng)用css樣式。span標(biāo)記可以在div和p標(biāo)記中使用,因?yàn)樗粫?huì)創(chuàng)建新的塊。
br標(biāo)記相當(dāng)于一個(gè)回車(chē)符,用于在新行開(kāi)始文本。一行中的多個(gè)<br>標(biāo)記將在網(wǎng)頁(yè)上創(chuàng)建一個(gè)很大的垂直空間。
hr標(biāo)記通常被稱為HTML行分隔符標(biāo)記,創(chuàng)建一條通常用于視覺(jué)上分隔頁(yè)面的水平線。它具有以下屬性:
出于某種原因,你希望文本在一條直線上繼續(xù),而不是在屏幕的邊緣換行,可以使用nobr。注意:這將迫使用戶向右滾動(dòng)以查看行的其余部分,這是一種糟糕的設(shè)計(jì)。
下面是以上標(biāo)記的示例:
瀏覽器顯示內(nèi)容如下所示:
一、基本線條:
1、<HR>
2、align線條位置(可選left、right、center);width線條長(zhǎng)度;color顏色;size厚度
<HRalign=center width=300 color=#987cb9SIZE=1>
二、特效(效果并不是孤立的,可相互組合)
1、兩頭漸變透明:
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>
2、紡錘形:
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>
3、右邊漸變透明:
<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>
4、左邊漸變透明:
<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>
5、虛線:
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>
6、雙線:
<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>
7、立體效果:
<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>
8、鋼針效果:
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
9.垂直分割線
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
HTML代碼:
<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
[Ctrl+A 全部選擇提示:你可先修改部分代碼,再按運(yùn)行]
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。