整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片等。網(wǎng)頁制作學(xué)習(xí)群：四九四零六，四九三四。
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。
1、tml的固定結(jié)構(gòu)
一個HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
<html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
<head>
標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。
頭部元素有<title>、<script>、<style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會有詳細(xì)介紹。
在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。
2、<head>標(biāo)簽的作用
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標(biāo)簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>標(biāo)簽
在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用。網(wǎng)頁制作學(xué)習(xí)交流群，四九四零六，四九三四。
于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標(biāo)題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨(dú)
一無二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>標(biāo)簽的內(nèi)容“hello world”會在瀏覽器中的標(biāo)題欄上顯示出來，
4、標(biāo)簽的用途
我們學(xué)習(xí)網(wǎng)頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點(diǎn)就是：明白每個標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。
文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本，就可以使
用 em 標(biāo)簽表示強(qiáng)調(diào)等等。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
① 更容易被搜索引擎收錄。
②.更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
更多精彩內(nèi)容微信公眾平臺：網(wǎng)頁設(shè)計(jì)自學(xué)平臺
限時!！免費(fèi)送Dreamweaver、js等前端教程
position:fixed;用我自己的話來說，就是讓你想要固定的東西固定。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
}
.photo{
width: 600px;
height: 600px;
position: fixed;
left: calc(50%-300px);
top: calc(50%-300px);
}
</style>
</head>
<body>
10月7日，昆凌在社交平臺曬出自己蕩秋千的美照。
照片中，昆凌長發(fā)披肩，頭戴假日風(fēng)草帽，
穿一襲白裙在海邊蕩著秋千，回眸甜笑，宛若仙子。
<div id="box1">
<img src="img/kunling.jpg" class="photo">
</div>
</body>
</html>
對了，在這里說一下，我目前是在職web前端開發(fā)，如果你現(xiàn)在正在學(xué)習(xí)前端，了解前端，渴望成為一名合格的web前端開發(fā)工程師，在入門學(xué)習(xí)前端的過程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，都可以隨時關(guān)注并私信我：前端，我都會根據(jù)大家的問題給出針對性的建議，缺乏基礎(chǔ)入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程， 還有我做web前端技術(shù)這段時間整理的一些學(xué)習(xí)手冊，面試題，開發(fā)工具，PDF文檔書籍教程，都可以直接分享給大家。
當(dāng)我下拉時，圖片的位置是不會動的。即使下滑到了最底部，圖片的位置也是固定的。對比下面這張圖：
子絕父相就是指子元素設(shè)置絕對定位，而父元素設(shè)置相對定位。換句話說：如果要對一個子元素使用定位的話，讓子元素（絕對定位）以其父元素（相對定位）為標(biāo)準(zhǔn)來定位。
實(shí)操代碼理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 300px;
height: 300px;
background-color: coral;
position: relative;
border: solid 3px red;
}
#son1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 20px;
top: 50px;
}
#son2{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
left: 40px;
top: 90px;
}
</style>
</head>
<body>
<div id="father">
I am father
</div>
<div id="son1">
I am son1
</div>
<div id="son2">
I am son2
</div>
</body>
</html>看圖：在father這個容器設(shè)置了相對定位之后，son1和son2都設(shè)置了絕對定位，我們的子類這時其實(shí)不是在body中絕對定位（absolute），而是在其父類的范圍中絕對定位（absolute）。
position: absolute;查找定位的參照物方法：
從當(dāng)前元素開始往上找，直到找到一個具有定位屬性的元素為準(zhǔn)，以這個元素為參照進(jìn)行定位。
如果沒有一個元素有定位屬性,最終就參照body進(jìn)行定位。（我一直理解的就是絕對定位就是你想定哪里定哪里）
定位的時候：結(jié)合top left right bottom 這四個方向?qū)傩赃M(jìn)行配合定位。但是要注意：不能同時選擇left喝right
注意：這里要區(qū)別于相對定位，在使用相對定位時，無論是否進(jìn)行移動，原來的位置就沒有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
background-color: salmon;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="box1">
我是box1，我采用了絕對定位
</div>
</body>
</html>position: relative;相對定位是相對于元素在文檔中的初始位置——首先它出現(xiàn)在它所在的位置上（即不設(shè)置position時的位置，然后通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的原始起點(diǎn)進(jìn)行移動；
注意，在使用相對定位時，無論是否進(jìn)行移動，原來的位置始終保留著。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
left: 300px;
top: 300px;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>原文鏈接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一個超級無敵可愛的人鴨
出處：CSDN
一篇文章中，小海前端（頭條號）為小伙伴們介紹了CSS3中新增的border-image屬性，該屬性主要用于為容器的邊框添加圖片。本篇文章，繼續(xù)為大家講解該屬性的用法和CSS3中對該屬性的一些細(xì)節(jié)要求。
尚未閱讀上一篇文章的小伙伴請先閱讀上一篇文章，上一篇文章講解了border-image屬性及其派生屬性的基礎(chǔ)用法。
承接文章：為容器的邊框添加圖片，CSS3新增的邊框圖片屬性，一種新穎的用法
技術(shù)等級：中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。
該組屬性的兼容性暫時還不是特別好，建議大家使用火狐瀏覽器（Firefox）來嘗試該屬性的各個效果。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。
本篇文章涉及到的CSS3屬性問題：
border-image-slice屬性的使用細(xì)節(jié)
border-outset屬性的用法
border-image-width屬性和border-width屬性的區(qū)別
border-image屬性和border屬性的沖突性
各個瀏覽器內(nèi)核的兼容性
一、border-image-slice屬性的使用細(xì)節(jié)：
上一篇文章中講到，border-image-slice是用來設(shè)置邊框圖片的切片屬性的。該屬性的取值為一個不帶單位的數(shù)值，默認(rèn)單位為像素，但是不用書寫px。該屬性設(shè)置的數(shù)值可以將邊框圖片劃分為9個區(qū)域，并貼到邊框的9個不同位置。
這里還以上一篇文章中寬度和高度均為90像素的圖片為例，該圖片存放在一個名為images的文件夾中，圖片的文件名為ball.jpg，圖片中每個圓形的直徑均為30像素。
素材圖 ball.jpg
對于該屬性，CSS3對于它的使用方法還有以下幾個細(xì)節(jié)要求：
當(dāng)切片的上下偏移之和大于等于圖像的高度，且左右偏移之和大于等于圖像的寬度。則容器只有四個角可以獲得邊框圖片的切片，而容器的邊無法獲得任何圖片。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 60 70 50 30/30px round
上述代碼指出，上切片尺寸為60像素，右切片尺寸為70像素，下切片尺寸為50像素，左切片尺寸為30像素。上下切片的偏移之和為110像素，左右切片的偏移之和為100像素，這兩個值均超過了圖片90像素的寬高尺寸。因此只有容器的四個角可以得到邊框圖像。最終效果如下圖所示：
實(shí)體效果圖
當(dāng)切片的上下偏移量都大于等于圖像的高度，且左右偏移量都大于等于圖像的寬度。則容器的四個角可以獲得完整的邊框圖像。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 90 100 120 130/30px round
上述代碼指出，上切片尺寸為90像素，右切片尺寸為100像素，下切片尺寸為120像素，左切片尺寸為130像素。每一個方向的切片偏移量均大于等于圖片90像素的寬度和高度值。因此容器的四個角可以獲得完整的邊框圖像。同樣，邊依然無法得到任何切片圖像。
最終效果如下圖所示：
實(shí)體效果圖
border-image-slice屬性還有一個可以放在切片數(shù)量后面的取值。當(dāng)具有該取值并設(shè)置為“fill”時，邊框圖片中5號圓形就會顯示在容器的內(nèi)部。如果沒有該取值，邊框圖片中5號圓形就不會顯示在容器內(nèi)部。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 30 fill/30px round
最終效果如下圖所示：
實(shí)體效果圖
二、border-outset屬性的用法：
該屬性用來對邊框圖像實(shí)現(xiàn)向外擴(kuò)張的效果。該屬性的取值為帶有單位的數(shù)值。同時該屬性也是可以結(jié)合border-image屬性單獨(dú)使用的。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 30/30px round
border-outset:30px;
上述代碼會讓邊框圖像在顯示的同時向外擴(kuò)張30像素。請小伙伴們自行操作并嘗試。
三、border-image-width屬性和border-width屬性的區(qū)別：
border-width屬性可以單獨(dú)使用，適用于設(shè)置具有顏色的邊框?qū)挾取?/p>
border-image-width屬性不可以單獨(dú)使用，必須在border-image屬性取值內(nèi)部固定的位置處使用。該屬性主要用于設(shè)置具有圖像的邊框?qū)挾取?/p>
這兩個屬性是可以同時使用的。
當(dāng)容器內(nèi)部具備文本內(nèi)容時，我們發(fā)現(xiàn)，文本內(nèi)容出現(xiàn)在了邊框圖片的位置處。為了方便小伙伴們觀察，我把文本內(nèi)容調(diào)整成了黃色。如下圖的左側(cè)部分。
實(shí)體效果圖
此時調(diào)整border-width屬性，為了讓邊框?qū)挾壬В€需要設(shè)置邊框樣式border-style。為了不讓容器的大小發(fā)生變化，添加box-sizing屬性。為了便于查看，我把文本內(nèi)容調(diào)整成了紅色。如上圖右側(cè)部分。
CSS代碼如下所示：
border-image: url(../images/ball.jpg) 30/30px round;
border-width: 30px;
border-style: solid;
box-sizing: border-box;
color:#ff0000;
四、border-image屬性和border屬性的沖突性：
CSS3規(guī)定，帶有顏色的邊框和邊框圖片不得同時存在，并且當(dāng)border-image屬性和border屬性同時存在時，border-image是不起作用的。
CSS代碼如下所示。
border-image:url(../images/ball.jpg) 30/30px round;
border:solid 10px #ff5857;
上述代碼執(zhí)行后，容器會帶有10像素的邊框，而不帶有邊框圖片。小伙伴們可以自行嘗試。
五、各個瀏覽器內(nèi)核的兼容性：
CSS3的屬性中還有許多都是瀏覽器不能完全兼容的，有的屬性兼容部分瀏覽器，有的屬性被瀏覽器部分兼容。那么，要對所有的瀏覽器都得到相同的外觀，應(yīng)該如何處理呢？
可以采用為CSS屬性的兼容性前綴來解決這個問題。
-ms-，適用于具有Trident內(nèi)核的IE系列瀏覽器。
-webkit-，適用于具有webkit內(nèi)核的瀏覽器，例如Safari瀏覽器、360安全瀏覽器等。
-moz-，適用于Firefox瀏覽器。
-o-，適用于Opera瀏覽器。
因此，border-image屬性要實(shí)現(xiàn)瀏覽器全兼容可以使用下列代碼：
border-image:url(../images/ball.jpg) 30/30px round
-webkit-border-image:url(../images/ball.jpg) 30/30px round
-moz-border-image:url(../images/ball.jpg) 30/30px round
-o-border-image:url(../images/ball.jpg) 30/30px round
-ms-border-image:url(../images/ball.jpg) 30/30px round
不過通過實(shí)際操作，我發(fā)現(xiàn)border-image屬性即使加上了瀏覽器兼容性前綴，也不能達(dá)到滿意的效果。CSS3中還有許多屬性都不能達(dá)到最滿意的兼容性，我們只能等待CSS3完備的計(jì)劃出臺，并盡快得到大部分瀏覽器廠商的支持和認(rèn)可。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
下一篇文章中，小海前端（頭條號）會為小伙伴們講解CSS3中實(shí)現(xiàn)多列布局的屬性。這組屬性解決了在CSS2時必須要對容器進(jìn)行浮動才能在一行內(nèi)顯示多列的問題。希望小伙伴們不要錯誤。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
