實(shí)戰(zhàn)小技巧—看師生對(duì)話學(xué)CSS分割圖片的方法

雄：又到了技術(shù)大黍講技術(shù)的時(shí)刻，技術(shù)雖然干，但持續(xù)就會(huì)有收獲。

話不多說(shuō)有請(qǐng)技術(shù)大黍！

技術(shù)大黍：今天用對(duì)話場(chǎng)景給大家學(xué)CSS分割圖片的方法。

對(duì)話場(chǎng)景

學(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ì)的小伙伴們，那就多看幾遍，哈哈哈~~

節(jié)、分區(qū)和分割線

這些標(biāo)記用于將頁(yè)面分成多個(gè)部分。熟練地掌握這些標(biāo)記將意味著構(gòu)建出具有良好的結(jié)構(gòu)和布局的頁(yè)面，使其更加友好和易于閱讀。

分區(qū) - <div> </div>

div標(biāo)記定義了HTML文件中的一個(gè)部分或分區(qū)。它通常包含需要組合在一起的標(biāo)題、段落、表格或其他元素。通過(guò)設(shè)置<div class="">與css一起使用來(lái)設(shè)置網(wǎng)頁(yè)某個(gè)部分的顯示。

段落 - <p> </p>

p標(biāo)記用來(lái)定義文本的段落，就像你在書(shū)中看到的那樣，一旦文本達(dá)到屏幕邊緣就會(huì)自動(dòng)折到下一行。當(dāng)另一個(gè)<p>標(biāo)記用于開(kāi)始下一個(gè)段落時(shí)，瀏覽器將在段落之間添加一些空白。p標(biāo)記具有以下屬性：

align="" - 段落中文本的對(duì)齊方式：left, center or right
width="" - 段落將占據(jù)頁(yè)面的固定寬度或百分比，默認(rèn)為100%

內(nèi)聯(lián) - <span> </span>

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>

br標(biāo)記相當(dāng)于一個(gè)回車(chē)符，用于在新行開(kāi)始文本。一行中的多個(gè)<br>標(biāo)記將在網(wǎng)頁(yè)上創(chuàng)建一個(gè)很大的垂直空間。

水平分隔線 - <hr>

hr標(biāo)記通常被稱為HTML行分隔符標(biāo)記，創(chuàng)建一條通常用于視覺(jué)上分隔頁(yè)面的水平線。它具有以下屬性：

width="" - 線條將占用固定寬度，默認(rèn)100%寬度
color="" - 線條顏色
noshade - 取消3D外觀，創(chuàng)建一條平的實(shí)線分隔線

不換行 - <nobr> </nobr>

出于某種原因，你希望文本在一條直線上繼續(xù)，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動(dòng)以查看行的其余部分，這是一種糟糕的設(shè)計(jì)。

例子

下面是以上標(biāo)記的示例：

瀏覽器顯示內(nèi)容如下所示：

種分割線Html代碼

一、基本線條：

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">

９．垂直分割線

<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代碼

HTML代碼：

<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

在線咨詢

上一篇：html5小游戲源代碼程序設(shè)計(jì)html源碼網(wǎng)頁(yè)電子版資料素材
下一篇：寫(xiě)個(gè)網(wǎng)頁(yè)更簡(jiǎn)單了！讓AI根據(jù)手繪原型生成HTML - 教程+代碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

實(shí)戰(zhàn)小技巧—看師生對(duì)話 學(xué)CSS分割圖片的方法