<!DOCTYPE html>
<!--
↑ 聲明文檔類型爲HTML5文件。
文檔聲明,在HTML文檔必不可少,且必須放在文檔第一行。
-->css
<head>
<!--{meta標籤}
一、charset屬性:單獨使用。設置文檔字符集編碼格式。
>>>寫法:<meta charset="UTF-8">
>>>常見的中文編碼格式:
GB-2312:國標碼,簡體中文
GBK:擴展的國標碼,簡體中文
UTF-8:萬國碼 Unicode碼 基本兼容各國語言
二、http-equiv屬性:需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文件。
>>>寫法:<meta http-equiv="屬性值" content="屬性值詳細內容">
>>>經常使用屬性值:Content-Type HTML4.01以前的文檔內容編碼聲明
refresh 網頁刷新 set-Cookie設置瀏覽器cookie緩存
三、name屬性:需配合content屬性使用。主要用於給搜索引擎提供必要信息。
>>>寫法:<meta name="屬性值" content="屬性值詳細內容">
>>>重要屬性值:author 做者,聲明網站做者,經常使用公司網址表示
keywords 網站關鍵字 ,多個關鍵字,用英文逗號分隔
description 網頁描述,搜索引擎顯示在title下的描述內容
*http-equiv和name屬性,必須與content屬性配合使用。前二者只是用於聲明即將修改哪些屬性值,
而實際的屬性值內容,在content中描述。
-->
<!--做者-->
<meta name="author" content="http://www.jredu100.com"/>
<!--網頁關鍵字-->
<meta name="keywords" content="html5,網頁,web前端開發"/>
<!--網頁描述-->
<meta name="description" content="這是我在傑瑞教育開發的第一個網頁"/>
<!--聲明文檔的編碼格式-->
<meta charset="UTF-8">
<!--{link標籤}
一、做用:用於爲網頁連接各類文件
二、經常使用屬性:
rel:用於代表被連接文件與當前文件的關係。此處選icon,代表被連接的圖片是當前網頁的icon圖標。
type:代表被連接文件是什麼類型,能夠省略。
href:代表連接文件的地址。
-->
<link rel="icon" type="image/x-icon"href="tupian/weixin.png"/>
<!--網頁的標題,即網頁選項卡內的文字-->
<title>個人第一個網頁</title>
</head>html
<body>
<!--{HTML的標籤分類}
一、塊級標籤:自動換行,先後隔一行
二、行級標籤:按行逐一顯示
是否自動換行,是咱們斷定塊級標籤的重要指標。
-->
<!-- [常見的塊級標籤]
標題標籤<h1></h1>……<h6></h6>
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote></blockquote >
預格式<pre></pre>
-->
<!--標題標籤<h1></h1>......<h6></h6>:默認加粗,H1最大,H6最小
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
-->
<!--引用<blockquote></blockquote >
一、代表標籤中的文字,爲引用的內容。瀏覽器顯示爲段落縮進
二、cite屬性,代表引用的來源,通常爲引用的網址URL
-->
<!--預格式<pre></pre>
瀏覽器解析時,會按照等寬字體顯示,而且保留標籤內的空格和回車。經常使用於保留代碼格式。
-->
<h1>基於佈局的塊級標籤</h1>前端
<!--[有序列表ol order list]-->
<ol>
<li>列表第一項</li>
<li>列表第二項</li>
<li>列表第三項</li>
<li>列表第四項</li>
</ol>
<!--[無序列表 ul unorder list]-->
<ul>
<li>列表第一項</li>
<li>列表第二項</li>
<li>列表第三項</li>
<li>列表第四項</li>
</ul>
<!--[定義描述列表]
<dl>
<dt>標題</dt>
<dd>描述項</dd>
</dl>
通常狀況下,標題dt只有一項。描述項dd能夠有N多項。
瀏覽器顯示時,標題頂格顯示,dd會縮進顯示。
-->
<dl>
<dt>這是dl的列表</dt>
<dd>描述項1</dd>
<dd>描述項2</dd>
<dd>描述項3</dd>
<dd>描述項4</dd>
</dl>
<!--[圖片組合標籤figure]
一、<figure></figure>標籤有兩個子標籤;
<img src="">:一幅圖片,src表示圖片的路徑
<figcaption></figcaption>:圖片的標題
二、瀏覽器顯示爲:圖片與標題上下排列,且總體向後縮進一個單位。
-->
<figure>
<img src="tupian/weixin.png" />
<figcaption>這是圖片的標題。</figcaption>
</figure>html5
<!--[分區標籤]
常配合CSS使用,爲網頁中最經常使用的分區標籤,經常使用於網頁佈局使用
-->
<div style="width:100%;height=100px;">
這是div裏面的文字。
<h1>我是div裏面的標題。</h1>
</div>web
</body>瀏覽器
<body>
<!--[常見的行級標籤]
span(文本)
img(圖片)
em(強調)
strong(強調)
q(短引用)
a(超連接)
i(傾斜)
b(加粗)
small(縮小字體)
-->
<!--span(文本):用於包裹一部分文字,進行特定樣式的修改。
-->
姜老師真<span style="color:blue; font-size: 36px;">醜</span><br/>
<!--em(強調):瀏覽器會顯示爲傾斜。
strong(強調):瀏覽器會顯示爲加粗。
i(傾斜):
b(加粗):
[strong/em/i/b標籤的區別]
一、em和strong都表示強調,並且strong的強調程度要大於em,strong和em標籤都可多層嵌套,表示強調
程度的遞增。
二、em和i都能傾斜,strong和b都能加粗。可是strong和em多了一層強調的語義。能夠幫助搜索引擎快速
抓取網站重點。並且HTML5要求開發者,儘量的實現代碼的語義化。
-->
<em>我被em標籤強調了!!!</em><br/>
<strong>我被strong標籤強調了!!!</strong><br/>
<!--
q(短引用):經常使用於一句話的引用,cite屬性表示引用來源。瀏覽器解析時,會在內容的先後插入雙引號。
-->
<q cite="http://www.jredu100.com">我是用q標籤聲明的一句引用的話</q><br/>
<!--
small(縮小字體):small標籤能夠多層嵌套,表示比默認字體小一號,直到字號小到最小號爲止。
big(放大字體):同small能夠多層嵌套,直到字號最大爲止。可是,在最新的規範中,small和big標籤
不被提倡使用。提倡使用style="font-size:11px;"CSS樣式替代。
-->
<!--
[img圖片標籤]
一、src屬性:表示圖片引用路徑。
>>>src中常見路徑的寫法:
①相對路徑:
當圖片在當前文件下一層時,文件夾名/圖片名 src="img/abc.jpg"
當圖片與當前文件在同一層時,圖片名 src="abc.jpg"
當圖片在當前文件上一層時,../圖片名src="../abc.jpg"
使用相對路徑時,圖片最外層只能放到網站根目錄(圖片必需要在項目文件夾中)。
②絕對路徑:寫法file:///E:/aaa.png 可是,嚴禁使用。
③網絡鏈接:直接使用圖片的網絡地址,可是因爲圖片在別人服務器,不可控,因此不建議使用。
二、title:當鼠標指上時,顯示的提示文字
三、alt:當圖片沒法加載時,顯示的文字
四、width/height:圖片的寬度高度,至關於CSS中的style="width: ; height: ;"
五、align:圖片周圍的文字相對於圖片的排列方式,可選值:top/center/bottom
-->
<img src="tupian/weixin.png" title="vivoX9,柔光雙攝" />
<img src="weixin1.png" />
<img src="../weixin2.png" />
<!--
[超連接a]
一、href:超連接的跳轉地址。能夠寫網絡連接,或者本地html文件的相對路徑,肯定方式同img的src路徑
二、title:鼠標指上後顯示的文字。
三、target:設置超連接打開窗口的位置。_self自身頁面打開(默認) _blank新頁面打開
四、rel:代表即將跳轉的頁面,與當前頁面的關係;
rel="prev"即將跳轉的頁面,是當前文檔的前一篇文章
rel="next"即將跳轉的頁面,是當前文檔的後一篇文章
rel="prefetch"預加載,當前文檔加載完成後,利用空餘網速,預加載即將跳轉的頁面
[功能性連接]
mailto://1098223127@qq.com
tencent://message/?uin=1098223127
[錨連接]
一、本頁面錨連接
① 設置一個錨點,<a name="top"></a>用name屬性表示錨點名稱
② 在超連接的href屬性中,使用#name跳轉到指定的錨點位置:<a href="#top"></a>
二、其餘頁面錨連接
①需跳轉的頁面設置錨連接
②在超連接的href屬性,文件名.html#name
<a href="aaaa.html#name"></a>
注:因爲谷歌/IE的兼容問題,需在錨點中,插入一個空格 才能生效
<a name="top"> </a>
因此之後錨點名稱:<a name="top"> </a>
本頁面就是<a href="#top"></a>
別的頁面就是<a href="文件名.html#name "></a>
-->
<a href="唐詩三百首.html#top" title="vivoX9,照亮你的美" target="_blank">這是
一個超連接</a>
<!--s有誤文本:刪除線-->
<s>這是s標籤中的文字</s>
<!--cite標籤:瀏覽器顯示爲傾斜,經常使用於書、畫做、做品的引用-->
<cite>這是cite標籤</cite>
<!--code:只是表示計算機代碼。可是瀏覽器只會顯示等寬字體,不會保留代碼格式,需配合pre標籤使用-->
<pre>
<code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>
<!--bdo:表示文本方向,dir="ltr" 從左往右 dir="rtl" 從右往左-->
<bdo dir="ltr">1234567</bdo>
<!--kbd:表示須要用戶用鍵盤輸入的內容。瀏覽器顯示爲等寬字體-->
請輸入「<kbd>Esc</kbd>」退出系統。
<!--sup:上標文本 sub:下標文本-->
X<sup>2</sup>
X²
<!--版權符號 空格-->
© 空格
<!--u:下劃線-->
<u>這是u標籤</u>
<!--mark:高亮或標記文本 瀏覽器顯示爲黃色背景-->
<mark>哈哈哈哈哈</mark>緩存
<!--[表格table]
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表頭的表頭列<th></th>(將tr中的td,替換爲th,表示本行爲表頭)
th默認加粗,且在單元格居中顯示安全
【table的經常使用屬性】
一、Border :表格的邊框屬性;當使用border=""設置邊框時,會在因此td一級table上嵌套邊框,
當border加大時,只有table最外層框線加粗,td單元格上的框線不會變化
二、Cellspacing:單元格和單元格之間的間隙,當cellspacing="0"時,單元格之間間隙爲0,但邊框線
並無合併(邊框線仍是兩條線的寬度)
[合併邊框的寫法] style="border-collapse:collapse;"使用邊框合併後,無需設置cellspacing
三、Cellpadding:單元格內邊距,單元格中文字與單元格邊框之間的距離。
四、Width/Height:表格的寬度高度;
五、Align:設置表格在父容器中的對齊方式:left/居左 center/居中 right/居右
[注意] 當表格使用align屬性時,至關於使表格浮動,可能會致使表格後面的元素受表格浮動影響,致使佈局錯亂。
六、Bgcolor:背景色
七、Background:背景圖片,後接相對路徑。當背景圖和背景色同時生效時候,背景圖會覆蓋背景色。
八、Bordercolor:邊框顏色服務器
-->cookie
<!--[<tr><td><th>標籤的屬性]
>>>當表格屬性與行列屬性衝突時,會以行列屬性爲準
屬性設置優先級:td>tr>table
一、width、height:給單個的行、列,設置寬度高度;
二、bgcolor:背景色
三、align:設置單元格中的文字,在單元格中的水平對齊方式left/center/right
四、valign:設置單元格中的文字,在單元格中的垂直對齊方式top/center/bottom
五、nowrap:nowrap="nowrap"設置單元格文字行末不斷行
-->
<!--[表格的跨行與跨列]
一、跨列:colspan,某單元格跨N列,則該單元格右邊的N-1個td就不須要了。
二、跨行:rowspan,
-->
<!--[form表單]
一、兩個重要屬性:
action:表單須要提交的服務器地址。
method:表單提交數據使用的方法。get/post
>>>get和post的區別
①get傳參使用URL傳遞,全部參數在地址欄可見,不安全;get傳參數據量有限;
②post傳參使用http請求傳遞,比較安全,post能夠傳遞大量數據;
but,get請求的傳輸速率要比post快。
>>>URL傳參的形式:連接URL地址?name1=value1&name2=value2
二、input的經常使用屬性:
①type:設置input的輸入類型
②name:給input輸入框起名。通常狀況下,name屬性必不可少。由於,傳遞數據時,使用name=value
(輸入內容)的形式傳遞
③value:input輸入框的默認值。
④placeholder:輸入框的提示內容。當input有默認的value或者輸入值時,placeholder消失。
三、input-type屬性的經常使用屬性值:
①text:文本輸入框
②password:密碼輸入框,輸入內容默認顯示小黑點。
③radio:單選框/ checkbox:複選框
>>>使用radio/checkbox時,value屬性必填。提交時,提交的爲value中的默認值。
>>>radio/checkbox憑藉name屬性,肯定是否屬於同一組,name相同爲同組,只能選一個
>>>使用checked="checked"屬性,設置默認選中項
④file:文件上傳
>>>使用accept="類型",設置只能上傳的文件類型,image/*任意格式圖片
⑤submit:提交按鈕,將全部表單數據,提交至後臺服務器
⑥reset:重置表單數據,將表單數據恢復到默認狀態。
⑦image:圖形提交按鈕,跟submit同樣,具備表單提交功能。
>>>使用src屬性,選擇圖片路徑
⑧button:普通按鈕,沒有什麼用處。
四、屬性名等於屬性值的狀況:
①checked="checked"設置radio或checkbox的默認選中項
②multiple="multiple" 設置select爲多選控件
③selected="selected" 設置select控件,默認選中的option選項
④readonly="readonly"設置textarea只讀,不容許編輯
⑤disabled="disabled"禁用控件。當input被disabled時,該input的name和value將沒法
向後臺傳遞
⑥hidden="hidden"隱藏控件。等效於<input type="hidden"/>
五、【下拉選擇控件 select】
① 寫法:<select>
<option></option> //能夠有N多個
</select>
② name屬性,應該寫在<select>上,全部選項只有一個name
③ multiple="multiple" 設置select控件爲多選,可在界面使用Ctrl+鼠標,進行多選。通常不用。
④ option經常使用屬性:
value="":當option沒有value屬性時,日後臺傳遞的是<option></option>標籤中的文字;
當option有value屬性時,日後臺傳遞的是value屬性的值。
title="":鼠標指上後顯示的文字。
selected="selected":默認選中。
⑤ <optgroup label="山東省"></optgroup> :用於將option標籤進行分組,label屬性表示分組名。
六、 【文本域 textarea】
① 寫法:<textarea></textarea>
② 設置寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性,
但不經常使用
③ readonly="readonly" 設置爲只讀模式,不容許編輯。
④ style="resize: none;" 設置爲寬高不容許修改。
⑤ style="overflow: ;" 設置當文字超出區域時,如何處理。
>>> 也能夠經過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。
>>> 經常使用屬性值:hidden 超出區域的文字,隱藏沒法顯示
scroll 不管文字多少,均會顯示滾動
auto 自動,根據文字多少自動決定是否顯示滾動條(默認樣式)
七、表格的邊框與標題
<form>
<fieldset>表格的邊框
<legend>聯繫方式</legend>表格的標題
。。。N多個表單元素(input/select/textarea)
</fieldset>
</form>
注:一個表單,能夠有多組邊框+標題
-->
<!--【HTML5智能表單】
①H5新增input的form屬性,用於指向特定form表單的id,實現input無需放在form標籤之中,便可經過
表單進行提交。
<form id=foo>
...
</form>
<input...form="foo">
②新增N多個type新屬性,詳見表格
③新增input的屬性:
Autocomplete:自動完成功能。
>>>根據記憶以前輸入過的內容在下次輸入時根據之前的內容提示,自動完成。
>>>絕大部分瀏覽器自動開啓。
>>>有兩個屬性值:off/on
>>>能夠在<form>標籤上設置autocomplete,控制整張表單的自動完成開關,但能夠在個別input
上單獨設置,覆蓋form的總體設置。
Autofocus:自動得到焦點。autofocus="autofocus"
Form:所屬表單,經過form表單的id,指向特定表單。
Required:必填。 required="required"設置input爲必填。
Pattern:驗證input的模式
Placeholder:提示
-->
<!--HTML註釋-->
<style type="text/css">
/*CSS語法必須寫在<style>標籤中*/
/*CSS註釋*/
/*【僞類選擇器】
一、寫法:選擇器名:僞類狀態{}
常見的僞類狀態:
:link 未訪問 :visited 已訪問
:hover 鼠標指上狀態 :active 激活選定狀態
注:當超連接同時具備以上四種狀態,則選擇器必須按照上述順序排列。
:focus 得到焦點,經常使用於input*/
/*【通用選擇器】
一、寫法:*{}
二、做用:選中頁面中的全部HTML標籤
三、優先級:最低!*/
/*【標籤選擇器】
*一、寫法HTML標籤名{}
*二、做用:選中全部對應的HTML標籤,並修改其樣式*/
/*【類選擇器class選擇器】
*一、寫法: .class名{}
*二、調用:在須要修改樣式的HTML標籤上,使用class="選擇器名"
*三、優先級:看成用於同一層時,class選擇器>標籤選擇器*/
/*【ID選擇器】
一、寫法:#選擇器名{}
二、調用:在須要修改樣式的HTML標籤上,使用id="選擇器名"
三、優先級:同一層時,id選擇器>class選擇器
四、ID選擇器是惟一的!同一頁面嚴禁出現同名ID!!!*/
/*【後代選擇器】
一、寫法:選擇器1空格選擇器2空格……選擇器N{}
二、生效規則:選擇器2必須是選擇器1的後代……以此類推
【子代選擇器】
一、寫法:選擇器1>選擇器2>……>選擇器N{}
二、生效規則:選擇器2必須是選擇器1的直接子代!!!!*/
/*【交集選擇器】
一、寫法:選擇器1選擇器2……選擇器N{}
二、生效規則:必須同時知足全部選擇器,纔會生效*/
/*【並集選擇器】
一、寫法:選擇器1,選擇器2,……,選擇器N{}
二、生效規則:知足任意一個選擇器,都可生效*/
/*【選擇器命名規範】
一、只能有字母、數字和下劃線組成;
二、開頭不能是數字。
*/
/*【選擇器優先級】
一、就近原則:近者優先。
二、看成用於同一層時:可用權重計算
權重劃分:標籤選擇器爲1
class選擇器爲10
ID選擇器爲100
行級樣式表style="" 1000
*/
</style>
<!--【三種使用CSS的方式】
一、行內樣式表:直接在HTML開始標籤中使用style=""的方式引用
特色:將CSS代碼與HTML代碼徹底揉雜在一塊兒,不符合W3C關於內容與表現分離的要求。不利於樣式複用;
優先級:最高。
二、內部樣式表:在<head></head>中,使用<style type="text/css"></style>方式引用;
特色:將CSS代碼與HTML代碼分離,可是沒有完全分離CSS文件與HTML文件,不利於多頁面複用樣式。
三、外部樣式表:使用link標籤連接css文件。
<link rel="stylesheet" type="text/css" href="css/01css.css"/>
特色:實現了css與HTML的完全分離,有利於樣式複用及後期維護。
-->
/*[顏色經常使用單位]
十六進制:#ffffff
顏色名稱:red
RGB顏色:RGB(255,255,255) 255,255,255是白色 0,0,0是黑色
RGBA:第四位數表示透明度。可選值0~1*/
/* [CSS經常使用文本屬性]
* 一、字體、字號:
font-weight:字體的粗細,可選屬性值:bold加粗 lighter細體 100~900數值(400正常,700 bold)
font-size:字體大小 **PX **%(瀏覽器默認字體大小的百分比,絕大部分默認16px)
font-family:字體族,設置字體。
>>>多個字體樣式間用逗號分隔,瀏覽器解析時,會從左往右依次解析,選擇可用字體。
>>>通常前面使用具體字體名稱,最後一個使用字體族類名稱。
(經常使用字體族名稱:襯線體serif 非襯線體sans-serif(經常使用) 等寬體Monospace)
>>>例如:font-family:Arial, 'Microsoft Yahei', sans-serif;
font-style:字體樣式,正常(normal) 斜體(italic)
* font-variant:small-caps; 將字母轉爲小型大寫字體。
(瞭解)font縮寫形式:font-style font-variant font-weight font-size/line-height font-family
>>> 使用注意事項 :
① 順序必須嚴格按照上述順序;
② 多個樣式之間用空格分割,並且font-size/line-height 必須做爲一對用/分割
③ font-size和font-family必須指定,其餘樣式不指定將採用默認樣式顯示;
>>> 例如:font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜體 加粗 字號/行高 字體族(微軟雅黑,非襯線字體族)
二、字體顏色:
color:字體顏色
opacity:透明度,0~1之間的數字。 調整時控件以及子控件均會透明,而使用rgba調整時,只會時本控件透明,子控
件不會發生透明度變化。
三、行距、對齊等:
line-height:行高 ① 像素單位 48px ② 不帶px 正常行高的倍數 ③百分數 同2
>>> 典型應用,調整控件中文垂直居中的方式:控件的height=控件的line-height
text-align:塊級元素中的行級元素的文字的水平對齊方式 left center right
letter-spacing:字符間距,字與字之間的間距
text-decoration:文本修飾 下劃線underline、刪除線line-through、上劃線overline、none
overflow:控制超出範圍文本的顯示方式(auto 根據文字多少自動顯示滾動條,scroll始終顯示滾動條, hidden
超出範圍文本隱藏) 能夠經過overflow-x overflow-y分別設置水平垂直方向
text-overflow:設置多餘文字的顯示方式 clip裁剪掉 ellipsis省略號
>>>【重點】讓每行多餘文字顯示省略號:
① white-space: nowrap; 設置行末不斷行
② overflow: hidden; 設置控件超出範圍隱藏
③ text-overflow: ellipsis; 設置多餘文本省略號顯示
white-space: nowrap; 設置行末不斷行顯示
word-break: 瀏覽器默認在空格處斷行,當一個單詞長度超出範圍時,會不斷行顯示, break-all 容許在單詞內
換行。
text-shadow:文本陰影,有四個屬性值:
①水平陰影距離 必選,數值越大,陰影右移
②垂直陰影距離 必選,數值越大,陰影下移
③陰影模糊距離 可選,數值越大,陰影越模糊。默認爲0,不模糊
④陰影顏色 可選,默認爲黑色
text-indent:首行縮進,可用像素值調整縮進大小
* text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細,描邊的顏色*/
/* 【CSS經常使用背景屬性】
background
background-color:背景色
background-image:背景圖,background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時,背景圖會覆蓋背景色
background-repeat:背景圖重複方式 ,no-repeat不平鋪 repeat平鋪(默認) repeat-x水平平鋪 repeat-y垂直平鋪
background-size:背景圖大小。
【指定寬度高度】
>>> 寬高的寫法,第一個屬性值爲寬度,第二個屬性值爲高度,能夠:①直接寫像素 ②寫百分比(父容器寬高的百分比)
>>> 當只有一個屬性值時,默認爲寬度。高度等比縮放。
當有兩個屬性值時,會按照指定的高度寬度進行壓縮/拉伸顯示。
【其餘屬性值】
>>> contain:圖片等比縮放,縮放到寬或高的某一邊等於父容器的寬高,另外一邊按照圖片大小縮放(可能致使部分空餘區域沒法覆蓋)
>>> cover:圖片等比縮放,使背景圖像徹底覆蓋背景區域。(可能致使背景圖部分區域沒法顯示)
background-position:位置座標、偏移量
>>> 指定位置:left/center/right top/center/bottom
當只寫一個屬性值時,另外一個默認居中
>>> 填寫座標:水平位置 垂直位置 (像素或百分比形式)
① 當只寫一個屬性值時,默認寫的爲水平方向,則垂直居中
② 當使用像素時:圖片的左上角往各個方向移動的實際距離
水平方向:正數右移 負數左移 垂直方法:正數下移 負數上移
(左負有正 上負下正)
③ 當使用百分數時,通常只能是正數。表明去掉圖片後,剩餘空白距離的分佈比例。例如 background-position:30%; 水平方向去掉圖片後,剩餘區域3:7分
*/