整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Bay一直致力于為買(mǎi)賣雙方提供更好的售賣平臺(tái)，為了便于賣家介紹商品以及買(mǎi)家了解所需，我們將為大家介紹兩種在商品詳情頁(yè)嵌入視頻的方法，以便更好的滿足買(mǎi)賣雙方的需求。除了文字介紹，我們也在每部分精心準(zhǔn)備了視頻說(shuō)明，歡迎點(diǎn)擊了解哦！
eBay商品詳情頁(yè)支持的視頻格式
eBay支持使用HTML5的VIDEO標(biāo)簽來(lái)引用互聯(lián)網(wǎng)上的視頻資源（如MP4格式的視頻影片）直接播放，也支持使用圖片超鏈接的HTML代碼形式，將消費(fèi)者引導(dǎo)向YouTube等視頻網(wǎng)站觀看相關(guān)內(nèi)容。
注意、eBay已禁止使用動(dòng)態(tài)內(nèi)容如Javascript等代碼嵌入視頻，傳統(tǒng)視頻網(wǎng)站的視頻嵌入代碼不可直接引用，使用動(dòng)態(tài)代碼可能會(huì)導(dǎo)致Listing下架。
01、嵌入視頻方法一：
· 上傳視頻：將視頻上傳至儲(chǔ)存空間；
· 編輯代碼：編輯如下代碼紅色部分，[URL]替換成需要嵌入的視頻URL，[VIDEO FORMAT]替換成相應(yīng)視頻格式；
· 進(jìn)入HTML編輯模式：選擇對(duì)應(yīng)eBay listing，進(jìn)入編輯模式，Item Description中選擇HTML編輯模式；
· 嵌入代碼：將編輯好的代碼嵌入商品詳情頁(yè)合適的位置。
代碼示例：
<video controls="">
<source src="https:[URL]" type="video/[VIDEO FORMAT]">
</video>
HTML5 Video標(biāo)簽嵌入視頻步驟：
· 進(jìn)入eBay listing編輯模式，在Item Description，選擇HTML模式；
· 使用HTML5 <VIDEO>標(biāo)簽編寫(xiě)代碼，貼入相應(yīng)代碼。
HTML5 Video標(biāo)簽嵌入視頻需要注意：
· HTML 5原生 <Video> 標(biāo)簽可支持MP4, webM, OGG等多種格式的視頻播放；
· 用戶使用的瀏覽器決定了相應(yīng)視頻格式是否可以播放；
· 用戶需自行尋找對(duì)應(yīng)存儲(chǔ)空間，存儲(chǔ)自己的MP4視頻文件，以https協(xié)議引用。
代碼編寫(xiě)提示：
HTML5格式的代碼嵌入后，商品詳情頁(yè)可直接播放視頻，如下：
視頻存儲(chǔ)空間 - Kizoa
用戶可以上傳視頻至Kizoa上存儲(chǔ)，用戶能在https://www.kizoa.app/pfh/index.php上傳視頻并以HTML5的方式進(jìn)行視頻嵌入，詳細(xì)步驟請(qǐng)參考文末——如何使用視頻存儲(chǔ)空間 Kizoa。
02、嵌入視頻方法二：
圖片超鏈接嵌入視頻方法介紹：
· 編輯代碼：編輯如下代碼紅色部分，[TITLE]寫(xiě)入相應(yīng)視頻標(biāo)題（或刪除），[YouTube Video ID]替換成需要嵌入的YouTube video ID，(或替換整段URL)；
· 進(jìn)入HTML編輯模式：選擇對(duì)應(yīng)eBay listing，進(jìn)入編輯模式，Item Description中選擇HTML編輯模式；
· 嵌入代碼：將編輯好的代碼嵌入商品詳情頁(yè)合適的位置。
代碼示例：
<!-- BEGIN LINKED VIDEO →
<p>[TITLE]</p>
<div class="ytvideo">
<a target="_blank" href="https://www.youtube.com/embed/[Youtube Video ID]?rel=0">
<img src="https://img.youtube.com/vi/[Youtube Video ID]/0.jpg">
</a>
<p class="yt_ft">Video will open in a new window</p>
</div>
<style> .ytvideo * { box-sizing:border-box; } .ytvideo { max-width:480px; font-family:arial; text-align:center; position:relative; min-height:120px; background-color:#555; } .ytvideo p { position:absolute; margin:0; color:white; background-color:rgba(0,0,0,.5); } .ytvideo .yt_hd { font-size:16px; width:100%; height:28px; line-height:28px; text-align:left; top:0; left:0; padding-left:10px; overflow:hidden; } .ytvideo .yt_ft { font-size:12px; width:100%; bottom:0; left:0; } .ytvideo img { display:block; max-width:100%; border:0; } .ytvideo a:after { content:"\A0BA"; position:absolute; width:60px; height:50px; left:0; top:0; right:0; bottom:0; margin:auto; border:0; border-radius:10px; color:white; background:rgba(0,0,0,.6); font-size:24px; line-height:50px; cursor:pointer; } .ytvideo a:hover:after { background:#CC181E; } .ytvideo .yt_inp { position:absolute; top:100%; left:0; width:100%; text-align:center; padding:.5em .2em; xfont-size:18px; border:0; color:white; background: rgba(0,0,0,.7); } @media(max-device-width:960px){ .ytvideo { margin-bottom:60px; } .ytvideo .yt_inp { padding:1em .2em; } } </style>
<!-- END LINKED VIDEO -->
注意
在桌面和移動(dòng)端瀏覽器中，將打開(kāi)新的窗口，跳轉(zhuǎn)至YouTube網(wǎng)站進(jìn)行播放；
Android和iOS的移動(dòng)端eBay APP均不支持YouTube視頻播放。
圖片超鏈接嵌入視頻示例步驟：
· YouTube網(wǎng)站找到您所需要添加的視頻URL；
· 將該URL填入示例代碼中，將代碼復(fù)制入eBay Item Description：
代碼嵌入后，點(diǎn)擊eBay商品詳情頁(yè)的視頻，新的窗口將被打開(kāi)，并跳轉(zhuǎn)至YouTube進(jìn)行播放，如下：
注意、避免使用嵌入式視頻代碼。
需要強(qiáng)調(diào)的是，請(qǐng)避免使用Youtube或其他視頻網(wǎng)站提供的<iframe>嵌入視頻代碼，這種有可能將會(huì)被eBay識(shí)別為動(dòng)態(tài)內(nèi)容，可能會(huì)導(dǎo)致listing的下架。
除了YouTube，其他平臺(tái)也能支持相同嵌入視頻的功能，如下：
如何使用視頻存儲(chǔ)空間 Kizoa
上傳視頻步驟：
· 進(jìn)入Kizoa主頁(yè): https://www.kizoa.app/pfh/index.php
· 注冊(cè)賬號(hào)并登錄使用
· 點(diǎn)擊Add photos/videos以添加視頻
· 選擇上傳來(lái)源（可選來(lái)源自本機(jī)硬盤(pán)）
· 選擇視頻
· 系統(tǒng)正在上傳視頻
· 視頻上傳成功
獲取視頻地址：
· 雙擊播放該視頻
· 在鍵盤(pán)上按下F12；
· 點(diǎn)擊網(wǎng)頁(yè)源碼左上角的鼠標(biāo)圖標(biāo)；
· 任意點(diǎn)擊視頻播放的區(qū)域；
· 源碼中會(huì)顯示一個(gè)src的鏈接，即是視頻的地址 (https://ugc.kizoa.app/kgra2/f339033939_9814612.mp4)；
· 復(fù)制并保存好鏈接。
（來(lái)源：eBay）
于電商產(chǎn)品展示，無(wú)論是從首頁(yè)還是到欄目頁(yè)，再到產(chǎn)品的詳情頁(yè)，產(chǎn)品展示效果不僅僅是在電商平臺(tái)，在很多的企業(yè)網(wǎng)站也使用頻繁，今天為大家分享一個(gè)HTML+CSS小案例項(xiàng)目：小米電商平臺(tái)的商品展示頁(yè)面！我們來(lái)一起看看吧！
那么我們要開(kāi)發(fā)一個(gè)什么樣的效果呢？來(lái)吧展示！！！
接著下來(lái)我們實(shí)戰(zhàn)開(kāi)發(fā)吧！
溫馨提示：本期課程是三十個(gè)實(shí)戰(zhàn)案例的第2節(jié)，為了更好的學(xué)好前端，可以配合艾編程30天計(jì)劃學(xué)習(xí)效果更好，因?yàn)?0個(gè)案例就是30天計(jì)劃的實(shí)戰(zhàn)作業(yè)一部分！具體參與方式，我放在文章的最底部了，大家可以看完這個(gè)效果后找助理老師領(lǐng)取！
1、操作步驟
（1）構(gòu)建 一個(gè)名為product的盒子
<div class='product'></div>（2）給product 添加寬度、高度 、背景顏色。這里的高度正常情況下是不能設(shè)置死，是為了方便大家理解看效果，所以加上的。后面我們會(huì)去掉
.product{
width:268px;/*寬度*/
height:400px;/*高度*/
background-color: red;/*背景顏色*/
}（3）、清除body自帶的的默認(rèn)樣式
body{
margin:0px;/*外邊距為0px*/
}（4）、設(shè)置.product 長(zhǎng)方形盒子與瀏覽器頂部50px間距，同時(shí)水平居中顯示
.product{
margin:50px auto; /*上外邊距50px 左右外邊距自動(dòng)相等-水平居中*/
}（5）、給盒子添加邊框線,，同時(shí)把添加的背景注釋掉。背景是為了開(kāi)始演示效果
.product{
/* background-color: red;背景顏色*/
border:1px solid #ddd; /*1像素 實(shí)線 灰色邊框*/
}2、代碼
<style type="text/css">
body{
margin:0px;
}
.product{
width:268px;
height:400px;
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
}
</style>
<div class="product"></div>3、實(shí)現(xiàn)效果
1、操作步驟
（1）、在.product盒子中添加產(chǎn)品圖,同時(shí)設(shè)置圖片寬度和alt描述
<body>
<div class="product">
<!--img標(biāo)簽，用來(lái)在頁(yè)面當(dāng)中插入圖片-->
<img src="images/kettle.png" alt="電水壺" width="195px">
</div>
</body>（2）、設(shè)置圖片在水平方向居中顯示
.product{
text-align:center;/*設(shè)置內(nèi)容文字或圖片在盒子中水平居中*/
}2、代碼
<style type="text/css">
body{
margin:0px;
}
.product{
width:268px;
height:400px;
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
text-align: center;/*文字和圖片水平居中*/
}
</style>
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
</div>
</body>3、實(shí)現(xiàn)效果
1、操作步驟
1、在.product盒子中添加p標(biāo)簽，同時(shí)到名為describe，p標(biāo)簽用來(lái)包裹產(chǎn)品描述
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class='describe'>快速煮水，安心飲用</p>
</div>
</body>2、去掉h3自帶的默認(rèn)margin外邊距樣式
body,p{
margin:0px;/*同時(shí)去掉body和h3標(biāo)簽的默認(rèn)外邊距*/
}3、修飾h3中的文字樣式
.product p.describe{
font-size:16px ;/*字體大小*/
font-weight: 400;/*字體粗細(xì)*/
color:#845f3f;/*字體顏色*/
}2、實(shí)現(xiàn)代碼
<style type="text/css">
body,h3{
margin:0px;
}
.product{
width:268px;
height:400px;
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
text-align: center;
}
.product h3{
font-size:16px ;
font-weight: 400;
color:#845f3f;
}
</style>
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<h3>快速煮水，安心飲用</h3>
</div>
</body>3、實(shí)現(xiàn)效果
1、操作步驟
1、在.product盒子中，再構(gòu)建一個(gè)名為 .product-text的盒子
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text"></div>
</div>
</body>2、我們給product-text 添加如下樣式。當(dāng)然里添加的高度也是為了方便看效果，后面我們也會(huì)刪除。
.product .product-text{
height:100px;/*高度-為了查看效果，后期會(huì)刪除*/
background-color: #f8f8f8;/*背景顏色*/
margin-top:20px;/*上外邊距20px*/
padding:15px;/*上下左右內(nèi)邊距15px*/
}3、我們把最開(kāi)始為了方便看效果，給.product添加的高度給刪除（或注釋）
.product{
/*height:400px;*/
}2、實(shí)現(xiàn)代碼
<style type="text/css">
body,p{
margin:0px;
}
.product{
width:268px;
/* height:400px; */
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
text-align: center;
}
.product p.describe{
font-size:16px ;
font-weight: 400;
color:#845f3f;
}
.product .product-text{
height:100px;
background-color: #f8f8f8;
margin-top:20px;/*上外邊距20px*/
padding:15px;/*上下左右內(nèi)邊距15px*/
}
</style>
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
添加內(nèi)容邊距，使里面的內(nèi)容與盒子間有上下左右有15px空隙
</div>
</div>
</body>3
實(shí)現(xiàn)效果
1、操作步驟
（1）在名為 .product-text盒子中 添加類名為 product-mark的div盒子,同時(shí)在里面插入四張圖,同時(shí)把圖片高度設(shè)為 20px
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
</div>
</div>
</body>（2）添加好的圖片之間默認(rèn)有一定的空隙，這個(gè)空隙在不同的瀏覽器中看到的大小可能不一樣。所以我們需要把這個(gè)默認(rèn)的空隙去掉，然后自己給圖片添加外邊距來(lái)實(shí)現(xiàn)空隙。
空隙產(chǎn)生的原因，是瀏覽器把圖片間的換行和空格給編譯了。我們的處理方式可以在.product-mark中添加font-size:0px;就可以消除。
.product .product-text .product-mark{
font-size: 0px;/*去掉圖片間的空隙*/
}（3）、消除空隙后，我們給圖片單獨(dú)添加margin外邊距來(lái)實(shí)現(xiàn)空隙效果。
.product .product-text .product-mark img{
margin:0px 2px;/*給圖片設(shè)置左右2像素外邊距*/
}2、代碼
<style type="text/css">
body,p{
margin:0px;
}
.product{
width:268px;
/* height:400px; */
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
text-align: center;
}
.product p.describe{
font-size:16px ;
font-weight: 400;
color:#845f3f;
}
.product .product-text{
height:100px;
background-color: #f8f8f8;
margin-top:20px;/*上外邊距20px*/
padding:15px;/*上下左右內(nèi)邊距15px*/
}
.product .product-text .product-mark{
font-size: 0px;
}
.product .product-text .product-mark img{
margin:0px 2px;
}
</style>
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
</div>
</div>
</body>3、實(shí)現(xiàn)效果
1、操作步驟
（1）、在product-text盒子中添加 h3標(biāo)簽，用來(lái)包裹標(biāo)題內(nèi)容
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
<h3>云米電水壺</h3>
</div>
</div>（2）、去掉h3自帶的默認(rèn)margin外邊距
body,p,h3{
margin:0px;/*同時(shí)去掉body,p,h3的默認(rèn)外邊距*/
}（3）、通過(guò)以下css來(lái)修飾標(biāo)題
.product .product-text h3{
font-size: 20px;/*字體大小*/
font-weight:400 ;/*字體粗細(xì)*/
margin-top:10px;/*上外邊距為 10px*/
}2、代碼
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
<h3>云米電水壺</h3>
</div>
</div>
</body>3、實(shí)現(xiàn)效果
1、操作步驟
（1）在product-text中 添加 p標(biāo)簽，用來(lái)包裹價(jià)格
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
<h3>云米電水壺</h3>
<p>￥59</p>
</div>
</div>
</body>（2）、通過(guò)以下css來(lái)修飾價(jià)格樣式
.product .product-text p{
font-size:20px ;/*字體大小*/
color:#a92112;/*字體顏色*/
margin-top:5px;/*上外邊距 5px*/
}（3）、去掉最開(kāi)始給 .product-text添中的 高度
.product .product-text{
/* height:100px; */
}2、代碼
<style type="text/css">
body,p,h3{
margin:0px;
}
.product{
width:268px;
/* height:400px; */
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
text-align: center;
}
.product p.describe{
font-size:16px ;
font-weight: 400;
color:#845f3f;
}
.product .product-text{
/* height:100px; */
background-color: #f8f8f8;
margin-top:20px;/*上外邊距20px*/
padding:15px;/*上下左右內(nèi)邊距15px*/
}
.product .product-text .product-mark{
font-size: 0px;
}
.product .product-text .product-mark img{
margin:0px 2px;
}
.product .product-text h3{
font-size: 20px;
font-weight:400 ;
margin-top:10px;
}
.product .product-text p{
font-size:20px ;
color:#a92112;
margin-top:5px;
}
</style>
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
<h3>云米電水壺</h3>
<p>￥59</p>
</div>
</div>
</body>3、實(shí)現(xiàn)效果
添加了超鏈接之后，頁(yè)面中的文字就添加了下劃線，同時(shí)h3中的文字顏色也發(fā)生了改變，那下一步我們就來(lái)修正下這些細(xì)節(jié)
1、代碼
<div class="product">
<!--添加超鏈接，實(shí)現(xiàn)點(diǎn)擊后跳轉(zhuǎn)到新頁(yè)面-->
<a href="https://www.icodingedu.com" target="_blank">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
<h3>云米電水壺</h3>
<p>￥59</p>
</div>
</a>
</div>2、運(yùn)行效果
1、操作步驟
（1）清除a標(biāo)簽的默認(rèn)下劃線樣式
a{
text-decoration: none;/*去掉下劃線*/
}（2）給h3標(biāo)簽中的文字加上顏色
.product .product-text h3{
color:#000;
}（3）把a(bǔ)標(biāo)簽轉(zhuǎn)換為塊級(jí)元素
a{
display:block;/*a標(biāo)簽轉(zhuǎn)換為塊級(jí)元素*/
}a標(biāo)簽?zāi)J(rèn)的是屬于內(nèi)聯(lián)元素，正常情況下內(nèi)聯(lián)元素中是不能放塊級(jí)元素，但a標(biāo)簽特殊，可以這樣用。但在這里，如果不把標(biāo)簽轉(zhuǎn)換為塊級(jí)元素，會(huì)發(fā)生很奇怪的效果。你給a標(biāo)簽加上 border:1px solid red; 后，如下圖所示：
所以我們要把a(bǔ)標(biāo)簽轉(zhuǎn)換為塊級(jí)元素。當(dāng)轉(zhuǎn)換為塊級(jí)元素后，效果如下，一切正常
2、運(yùn)行代碼
<style type="text/css">
body,p,h3{
margin:0px;
}
a{
text-decoration: none;/*去掉下劃線*/
}
.product{
width:268px;
/* height:400px; */
/* background-color: red; */
margin:50px auto;
border:1px solid #ddd;
text-align: center;
}
.product a{
display:block;
}
.product p.describe{
font-size:16px ;
font-weight: 400;
color:#845f3f;
}
.product .product-text{
/* height:100px; */
background-color: #f8f8f8;
margin-top:20px;/*上外邊距20px*/
padding:15px;/*上下左右內(nèi)邊距15px*/
}
.product .product-text .product-mark{
font-size: 0px;
}
.product .product-text .product-mark img{
margin:0px 2px;
}
.product .product-text h3{
font-size: 20px;
font-weight:400 ;
margin-top:10px;
color:#000;
}
.product .product-text p{
font-size:20px ;
color:#a92112;
margin-top:5px;
}
</style>
<div class="product">
<!--添加超鏈接，實(shí)現(xiàn)點(diǎn)擊后跳轉(zhuǎn)到新頁(yè)面-->
<a href="https://www.icodingedu.com" target="_blank">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水，安心飲用</h3>
<div class="product-text">
<div class="product-mark">
<img src="images/live.png" alt="直播中" height="20">
<img src="images/odds.png" alt="特惠中" height="20">
<img src="images/30day.png" alt="30天保價(jià)" height="20">
<img src="images/server.png" alt="售后免郵" height="20">
</div>
<h3>云米電水壺</h3>
<p>￥59</p>
</div>
</a>
</div>3、運(yùn)行效果
為幫助到一部分同學(xué)不走彎路，真正達(dá)到一線互聯(lián)網(wǎng)大廠前端項(xiàng)目研發(fā)要求，首次實(shí)力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》，內(nèi)容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真實(shí)企業(yè)項(xiàng)目開(kāi)發(fā)，云服務(wù)器部署上線，從入門(mén)到精通
共4大完整的項(xiàng)目開(kāi)發(fā) ！一行一行代碼帶領(lǐng)實(shí)踐開(kāi)發(fā)，實(shí)際企業(yè)開(kāi)發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開(kāi)始就進(jìn)入工作狀態(tài)，省得浪費(fèi)時(shí)間。
從學(xué)習(xí)一開(kāi)始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實(shí)大廠項(xiàng)目的開(kāi)發(fā)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范，命名規(guī)范，項(xiàng)目代碼規(guī)范，SEO優(yōu)化規(guī)范
從藍(lán)湖UI設(shè)計(jì)稿 到 PC端，移動(dòng)端，多端響應(yīng)式開(kāi)發(fā)項(xiàng)目開(kāi)發(fā)
這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》中每一個(gè)細(xì)節(jié)都有講到，包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉，真正一次掌握企業(yè)項(xiàng)目開(kāi)發(fā)必備技能，不走彎路 ！
過(guò)程中【不涉及】任何費(fèi)用和利益，非誠(chéng)勿擾 。
如果你沒(méi)有添加助理老師微信，可以添加下方微信，說(shuō)明要參加30天挑戰(zhàn)學(xué)習(xí)計(jì)劃，來(lái)自！老師會(huì)邀請(qǐng)你進(jìn)入學(xué)習(xí)，并給你發(fā)放相關(guān)資料
30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門(mén)到實(shí)戰(zhàn) | arry老師的博客-艾編程
HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》
本書(shū)內(nèi)容
《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》秉承“思政引領(lǐng)，立德樹(shù)人”的教育理念，自然融入多維度、深層次的思政元素，全面對(duì)標(biāo)企業(yè)和行業(yè)需求；引入現(xiàn)代Web前端開(kāi)發(fā)的核心技術(shù)，如Flex布局、Grid布局，以及人工智能編程插件，同時(shí)融入企業(yè)開(kāi)發(fā)實(shí)踐，確保學(xué)習(xí)內(nèi)容與實(shí)際工作緊密相關(guān)。全書(shū)以一個(gè)完整案例為主線，結(jié)合綜合項(xiàng)目實(shí)戰(zhàn)操作，體現(xiàn)育人、應(yīng)用和創(chuàng)新三項(xiàng)能力。《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習(xí)題與答案、微課視頻、教案、教學(xué)大綱、章節(jié)測(cè)試、云題庫(kù)、實(shí)驗(yàn)報(bào)告、學(xué)習(xí)通在線課程、企業(yè)高頻面試題、學(xué)科競(jìng)賽真題等豐富的教學(xué)資源，并設(shè)有QQ群提供線上學(xué)習(xí)跟蹤和指導(dǎo)服務(wù)。
《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》共分14章，系統(tǒng)地講解Web前端開(kāi)發(fā)的核心技術(shù)，主要內(nèi)容包括Web前端開(kāi)發(fā)概述、HTML5基礎(chǔ)、HTML5頁(yè)面元素和屬性、表單、CSS3基礎(chǔ)、CSS3修飾頁(yè)面元素、CSS3高級(jí)選擇器、CSS3盒子模型、浮動(dòng)與定位、CSS3高級(jí)應(yīng)用、網(wǎng)頁(yè)布局、Flex布局、Grid布局等，并提供“大學(xué)生參軍入伍專題網(wǎng)站”和“文創(chuàng)商城”兩個(gè)實(shí)戰(zhàn)案例。
本書(shū)作者
盧欣欣，副教授。長(zhǎng)期從事高校教學(xué)工作，專注Web應(yīng)用開(kāi)發(fā)，項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)豐富。主講《Web程序設(shè)計(jì)》《高級(jí)程序設(shè)計(jì)》《軟件開(kāi)發(fā)綜合實(shí)踐》等課程，先后主編教材2部，參編教材3部。在慕課網(wǎng)上線的《企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)》課程學(xué)習(xí)人數(shù)超15萬(wàn)人。
崔仲遠(yuǎn)，副教授，畢業(yè)于北京交通大學(xué)。長(zhǎng)期從事高校教學(xué)工作和軟件項(xiàng)目開(kāi)發(fā)工作，實(shí)戰(zhàn)開(kāi)發(fā)經(jīng)驗(yàn)豐富。先后承擔(dān)《網(wǎng)頁(yè)特效設(shè)計(jì)》《Web前端基礎(chǔ)》《跨平臺(tái)腳本開(kāi)發(fā)技術(shù)》等多門(mén)課程的教學(xué)任務(wù)，發(fā)表學(xué)術(shù)論文多篇，主編教材2部，參編教材3部、專著1部。主持省級(jí)教改項(xiàng)目1項(xiàng)、科研項(xiàng)目1項(xiàng)。
本書(shū)讀者
《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》既可作為本專科院校計(jì)算機(jī)相關(guān)專業(yè)的Web程序設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)與制作等課程的教材，也可作為Web應(yīng)用開(kāi)發(fā)人員的自學(xué)手冊(cè)和技術(shù)參考書(shū)。
本書(shū)目錄
第1章 Web前端開(kāi)發(fā)概述 1
1.1 Web前端開(kāi)發(fā)職責(zé) 1
1.2 Web前端開(kāi)發(fā)相關(guān)概念 2
1.3 Web前端開(kāi)發(fā)相關(guān)技術(shù) 3
1.3.1 Web標(biāo)準(zhǔn) 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端開(kāi)發(fā)工具 5
1.4.1 代碼編輯工具：VSCode 6
1.4.2 代碼運(yùn)行工具：瀏覽器 8
1.4.3 開(kāi)發(fā)者工具 9
1.4.4 人工智能輔助編程工具 10
1.5 網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)流程 11
1.6 實(shí)戰(zhàn)案例：網(wǎng)頁(yè)顯示“社會(huì)主義核心價(jià)值觀” 12
1.7 本章小結(jié) 13
第2章 HTML5基礎(chǔ) 14
2.1 HTML5語(yǔ)法基礎(chǔ) 14
2.1.1 HTML文檔結(jié)構(gòu) 14
2.1.2 HTML標(biāo)簽語(yǔ)法 17
2.1.3 HTML注釋 18
2.2 文本控制標(biāo)簽 19
2.2.1 標(biāo)題標(biāo)簽 19
2.2.2 段落標(biāo)簽 20
2.2.3 換行標(biāo)簽 20
2.2.4 文本格式化標(biāo)簽 21
2.2.5 特殊字符 22
2.3 圖像標(biāo)簽 23
2.3.1 網(wǎng)頁(yè)常用圖像格式 23
2.3.2 圖像標(biāo)簽的使用 24
2.3.3 相對(duì)路徑與絕對(duì)路徑 26
2.4 超鏈接標(biāo)簽 27
2.4.1 文本鏈接 27
2.4.2 圖像鏈接 28
2.4.3 書(shū)簽（錨點(diǎn)）鏈接 28
2.4.4 其他鏈接 30
2.5 列表 30
2.5.1 有序列表 31
2.5.2 無(wú)序列表 32
2.5.3 定義列表 34
2.5.4 嵌套列表 35
2.6 表格 36
2.6.1 表格結(jié)構(gòu) 36
2.6.2 表格標(biāo)簽 37
2.7 視頻和音頻標(biāo)簽 41
2.7.1 視頻標(biāo)簽 41
2.7.2 音頻標(biāo)簽 42
2.8 其他標(biāo)簽 42
2.8.1 預(yù)格式化標(biāo)簽 42
2.8.2 水平線標(biāo)簽 43
2.8.3 行內(nèi)容器標(biāo)簽 43
2.9 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”兵役登記頁(yè)面 44
2.10 本章小結(jié) 46
第3章 HTML5頁(yè)面元素和屬性 47
3.1 文檔結(jié)構(gòu)標(biāo)簽 47
3.1.1標(biāo)簽 47
3.1.2標(biāo)簽 49
3.1.3標(biāo)簽 50
3.1.4標(biāo)簽 51
3.1.5標(biāo)簽 53
3.1.6標(biāo)簽 53
3.1.7和標(biāo)簽 54
3.1.8標(biāo)簽 55
3.2 交互元素 55
3.2.1 標(biāo)簽 55
3.2.2 標(biāo)簽 56
3.2.3標(biāo)簽 57
3.3 文本層次語(yǔ)義標(biāo)簽 58
3.3.1 標(biāo)簽 58
3.3.2 標(biāo)簽 59
3.3.3 標(biāo)簽 60
3.4 全局屬性 61
3.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”頁(yè)面結(jié)構(gòu) 62
3.6 本章小結(jié) 64
第4章 表單 65
4.1 表單概述 65
4.2標(biāo)簽 67
4.3 標(biāo)簽 68
4.3.1 單行文本框 69
4.3.2 密碼框 69
4.3.3 文件域 70
4.3.4 單選按鈕和復(fù)選框 71
4.3.5 隱藏域 73
4.3.6 按鈕 73
4.3.7 HTML5新增輸入元素 76
4.4 標(biāo)簽 78
4.5 標(biāo)簽 79
4.6 選擇列表標(biāo)簽 80
4.7 多行文本框標(biāo)簽 83
4.8 表單常用屬性 84
4.9 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”網(wǎng)上咨詢表單 86
4.10 本章小結(jié) 88
第5章 CSS3基礎(chǔ) 89
5.1 CSS概述 89
5.2 CSS語(yǔ)法規(guī)則 90
5.3 CSS樣式的引入方法 91
5.3.1 行內(nèi)樣式表 91
5.3.2 內(nèi)部樣式表 92
5.3.3 外部樣式表 93
5.4 CSS基本選擇器 94
5.4.1 標(biāo)簽選擇器 94
5.4.2 ID選擇器 95
5.4.3 類選擇器 95
5.4.4 通用選擇器 97
5.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”公共樣式表制作 97
5.6 本章小結(jié) 98
第6章 CSS3修飾頁(yè)面元素 99
6.1 CSS字體樣式 99
6.1.1 字體粗細(xì)屬性 99
6.1.2 字體風(fēng)格屬性 100
6.1.3 字體大小屬性 101
6.1.4 字體族屬性 103
6.1.5 字體屬性 106
6.2 CSS文本樣式 107
6.2.1 行高屬性 107
6.2.2 顏色屬性 109
6.2.3 文本水平對(duì)齊屬性 110
6.2.4 首行縮進(jìn)屬性 111
6.2.5 文本修飾屬性 111
6.2.6 字符間距屬性 112
6.2.7 字間距屬性 113
6.2.8 字母大小寫(xiě)屬性 114
6.2.9 文本陰影效果屬性 115
6.3 CSS表格樣式 116
6.4 CSS表單樣式 118
6.4.1 單行文本框美化 119
6.4.2 按鈕美化 120
6.4.3 下拉列表美化 120
6.5 CSS列表樣式 122
6.6 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”在線咨詢頁(yè)面 123
6.7 本章小結(jié) 126
第7章 CSS3高級(jí)選擇器 127
7.1 組合選擇器 127
7.1.1 交集選擇器 127
7.1.2 并集選擇器 128
7.1.3 后代選擇器 129
7.1.4 子元素選擇器 130
7.1.5 相鄰兄弟選擇器 131
7.1.6 通用兄弟選擇器 132
7.2 屬性選擇器 133
7.3 偽類選擇器 134
7.4 偽元素選擇器 136
7.5 CSS三大特性 138
7.6 本章小結(jié) 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 認(rèn)識(shí)盒子模型 142
8.1.2
標(biāo)簽 144
8.2 盒子模型的相關(guān)屬性 144
8.2.1 內(nèi)容區(qū)域的寬度和高度 144
8.2.2 邊框 145
8.2.3 內(nèi)邊距 152
8.2.4 外邊距 153
8.3 陰影 155
8.4 box-sizing 156
8.5 背景屬性 158
8.5.1 背景顏色 158
8.5.2 背景圖像 158
8.5.3 圖像平鋪方式 158
8.5.4 背景圖像位置 160
8.5.5 背景圖像固定 161
8.5.6 背景圖像大小 161
8.5.7 背景裁剪 163
8.5.8 背景復(fù)合屬性 164
8.5.9 CSS精靈圖 165
8.6 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”登錄頁(yè)面 166
8.7 本章小結(jié) 169
第9章 浮動(dòng)與定位 170
9.1 標(biāo)準(zhǔn)文檔流 170
9.2 元素的分類 171
9.2.1 塊級(jí)元素、行內(nèi)元素與行內(nèi)塊元素 171
9.2.2 元素的類型轉(zhuǎn)換 172
9.3 元素的浮動(dòng) 173
9.3.1 設(shè)置浮動(dòng) 174
9.3.2 清除浮動(dòng) 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位屬性 181
9.4.3 靜態(tài)定位 181
9.4.4 相對(duì)定位 182
9.4.5 絕對(duì)定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 層疊等級(jí)屬性 188
9.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”輪播圖效果 190
9.6 本章小結(jié) 192
第10章 CSS3高級(jí)應(yīng)用 193
10.1 變換 193
10.1.1 旋轉(zhuǎn) 194
10.1.2 傾斜 195
10.1.3 縮放 196
10.1.4 平移 197
10.1.5 變換原點(diǎn) 198
10.2 過(guò)渡 200
10.3 動(dòng)畫(huà) 202
10.4 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”CSS3高級(jí)應(yīng)用 205
10.5 本章小結(jié) 208
第11章 網(wǎng)頁(yè)布局 209
11.1 網(wǎng)頁(yè)布局概述 209
11.1.1 網(wǎng)頁(yè)布局的概念 209
11.1.2 網(wǎng)頁(yè)布局的流程 210
11.1.3 常見(jiàn)的網(wǎng)頁(yè)布局方法 211
11.2 網(wǎng)頁(yè)布局命名規(guī)范 211
11.3 常見(jiàn)布局的實(shí)現(xiàn) 212
11.3.1 單列布局 212
11.3.2 兩列常規(guī)布局 214
11.3.3 三列常規(guī)布局 216
11.3.4 兩列自適應(yīng)等高布局 217
11.3.5 三列自適應(yīng)布局 219
11.4 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”首頁(yè)主體部分 223
11.5 本章小結(jié) 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相關(guān)概念 227
12.3 容器屬性 227
12.3.1 display屬性 228
12.3.2 flex-direction屬性 228
12.3.3 flex-wrap屬性 230
12.3.4 justify-content屬性 232
12.3.5 align-items屬性 233
12.3.6 align-content屬性 235
12.4 項(xiàng)目屬性 236
12.4.1 order屬性 236
12.4.2 flex-grow屬性 237
12.4.3 flex-shrink屬性 239
12.4.4 flex-basis屬性 240
12.4.5 flex屬性 241
12.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”導(dǎo)航條 242
12.6 本章小結(jié) 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相關(guān)概念 246
13.3 容器屬性 246
13.3.1 display屬性 247
13.3.2 劃分網(wǎng)格 248
13.3.3 行間隔和列間隔 252
13.3.4 項(xiàng)目對(duì)齊方式 253
13.4 項(xiàng)目屬性 255
13.4.1 grid-column和grid-row屬性 255
13.4.2 grid-area屬性 257
13.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”視頻展播列表 258
13.6 本章小結(jié) 260
第14章 Web前端項(xiàng)目綜合實(shí)踐——文創(chuàng)商城 261
14.1 項(xiàng)目概述 261
14.2 需求分析 262
14.3 原型設(shè)計(jì) 262
14.4 公共部分的設(shè)計(jì)與實(shí)現(xiàn) 265
14.4.1 重置樣式 265
14.4.2 頁(yè)面頭部 265
14.4.3 頁(yè)面底部 268
14.4.4 懸浮側(cè)邊欄 270
14.5 首頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 271
14.5.1 甄選好物版塊 271
14.5.2 國(guó)博文房版塊 274
14.6 商品列表頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 277
14.6.1 商品類型篩選 277
14.6.2 分頁(yè)導(dǎo)航 278
14.7 商品詳情頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 279
14.8 本章小結(jié) 283
編輯推薦
1HTML5與CSS3是Web前端開(kāi)發(fā)的兩大核心技術(shù)，它們不僅是Web前端開(kāi)發(fā)工程師必須掌握的技能，也是高校一門(mén)重要的Web前端課程內(nèi)容
2《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》以“從項(xiàng)目中來(lái)到項(xiàng)目中去”為主旨，從Web前端開(kāi)發(fā)的基本概念入手，系統(tǒng)介紹HTML5、CSS3網(wǎng)頁(yè)編程技巧。
3《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》采取“知識(shí)點(diǎn)講解+示例解析+案例詳講+高頻面試題+實(shí)踐操作+學(xué)科競(jìng)賽真題”的遞進(jìn)式教學(xué)模式，引導(dǎo)讀者理解理論知識(shí)，掌握開(kāi)發(fā)方法，學(xué)會(huì)復(fù)雜的網(wǎng)站設(shè)計(jì)技能，全面提升讀者的Web前端開(kāi)發(fā)能力。
4《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習(xí)題與答案、教案、教學(xué)大綱、章節(jié)測(cè)試、云題庫(kù)、實(shí)驗(yàn)報(bào)告、學(xué)習(xí)通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術(shù)。
本文摘自《HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程：微課視頻版》，獲出版社和作者授權(quán)發(fā)布。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
