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