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