整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于電商產(chǎn)品展示，無論是從首頁還是到欄目頁，再到產(chǎn)品的詳情頁，產(chǎn)品展示效果不僅僅是在電商平臺(tái)，在很多的企業(yè)網(wǎng)站也使用頻繁，今天為大家分享一個(gè)HTML+CSS小案例項(xiàng)目：小米電商平臺(tái)的商品展示頁面！我們來一起看看吧！
那么我們要開發(fā)一個(gè)什么樣的效果呢？來吧展示！！！
接著下來我們實(shí)戰(zhàn)開發(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 長方形盒子與瀏覽器頂部50px間距，同時(shí)水平居中顯示
.product{
margin:50px auto; /*上外邊距50px 左右外邊距自動(dòng)相等-水平居中*/
}（5）、給盒子添加邊框線,，同時(shí)把添加的背景注釋掉。背景是為了開始演示效果
.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)簽，用來在頁面當(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)簽用來包裹產(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、我們把最開始為了方便看效果，給.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)的空隙去掉，然后自己給圖片添加外邊距來實(shí)現(xiàn)空隙。
空隙產(chǎn)生的原因，是瀏覽器把圖片間的換行和空格給編譯了。我們的處理方式可以在.product-mark中添加font-size:0px;就可以消除。
.product .product-text .product-mark{
font-size: 0px;/*去掉圖片間的空隙*/
}（3）、消除空隙后，我們給圖片單獨(dú)添加margin外邊距來實(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)簽，用來包裹標(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）、通過以下css來修飾標(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)簽，用來包裹價(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）、通過以下css來修飾價(jià)格樣式
.product .product-text p{
font-size:20px ;/*字體大小*/
color:#a92112;/*字體顏色*/
margin-top:5px;/*上外邊距 5px*/
}（3）、去掉最開始給 .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)效果
添加了超鏈接之后，頁面中的文字就添加了下劃線，同時(shí)h3中的文字顏色也發(fā)生了改變，那下一步我們就來修正下這些細(xì)節(jié)
1、代碼
<div class="product">
<!--添加超鏈接，實(shí)現(xiàn)點(diǎn)擊后跳轉(zhuǎn)到新頁面-->
<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)到新頁面-->
<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)目開發(fā)，云服務(wù)器部署上線，從入門到精通
共4大完整的項(xiàng)目開發(fā) ！一行一行代碼帶領(lǐng)實(shí)踐開發(fā)，實(shí)際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進(jìn)入工作狀態(tài)，省得浪費(fèi)時(shí)間。
從學(xué)習(xí)一開始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實(shí)大廠項(xiàng)目的開發(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)式開發(fā)項(xiàng)目開發(fā)
這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》中每一個(gè)細(xì)節(jié)都有講到，包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉，真正一次掌握企業(yè)項(xiàng)目開發(fā)必備技能，不走彎路 ！
過程中【不涉及】任何費(fèi)用和利益，非誠勿擾 。
如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰(zhàn)學(xué)習(xí)計(jì)劃，來自！老師會(huì)邀請(qǐng)你進(jìn)入學(xué)習(xí)，并給你發(fā)放相關(guān)資料
30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程
天我們來分享web前端CSS定位中的position：absolute絕對(duì)定位的應(yīng)用場(chǎng)景案例的相關(guān)場(chǎng)景！
絕對(duì)定位是CSS中非常中啊喲的知識(shí)點(diǎn)，接下來我我們會(huì)通過7個(gè)不同的層面結(jié)合7個(gè)不同的案例來展開講解！
絕對(duì)定位元素的特性
絕對(duì)定位元素常見用法合集
如果元素添加寬高，同時(shí)設(shè)置top與bottom屬性，會(huì)以top值為主。
如果同時(shí)設(shè)置left和right屬性，以left為主。
<style type="text/css">
html,body{margin:0;}
.box{
width:100px;
height:100px;
margin: 50px auto;
background-color: pink;
position: relative;/*相對(duì)定位*/
}
.box .item{
width:50px;
height: 50px;
position: absolute;/*絕對(duì)定位*/
left:-20px;/*與相對(duì)定位元素左邊距離*/
top:-20px;/*與相對(duì)定位元素頂部距離*/
bottom:0px;/*不生效*/
right:0px;/*不生效*/
background-color:skyblue;
}
</style>相對(duì)于直接父元素定位案例是太多太多，下圖列舉了幾個(gè)
其中圖1鼠標(biāo)滑動(dòng)懸浮效果 源碼
<style>
body,h3{
margin:0;
padding:0;
}
.music{
width: 150px;
height: 150px;
margin:100px auto;
position: relative;
}
.music h3{
height: 35px;
line-height: 35px;
width: 100%;
background-color: rgba(0,0,0,0.5);
color:#fff;
position: absolute;
left:0px;
bottom:0px;
font-size: 14px;
font-weight: 100;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music span.icon-hot{
padding:2px 6px 4px 5px;
background-color: red;
color:#fff;
font-size: 14px;
position: absolute;
right:0px;
top:0px;
}
</style>
<body>
<div class="music">
<img src="images/music.jpg" alt="" height="150">
<div class="video-mask"></div>
<span class="icon-hot">最新</span>
<h3 class="video-title">古風(fēng)戲腔丨一聲曲嘆，驚艷了芳華</h3>
</div>
</body><style>
body,ul,li{
margin:0;
padding:0;
}
body{
background-image: linear-gradient(to right,skyblue,pink);
}
ul{
list-style: none;
width: 150px;
margin: 100px auto;
position: relative;/*相對(duì)定位，.menu-item就是相對(duì)于ul來絕對(duì)定位的*/
}
ul li{
height: 35px;
line-height: 35px;
text-indent: 2em;
background-color:skyblue;
}
ul li a{
text-decoration: none;
color:#fff;
}
ul li:hover{
background-color: salmon;
}
ul li .menu-item{
width: 200px;
height: 100%;
background-color: #fff;
position: absolute;/*絕對(duì)定位*/
left:150px;
top:0px;
display: none;
}
ul li:hover .menu-item{
display: block;
}
</style>
<body>
<ul class="menu">
<li>
<a href="#">菜單項(xiàng)1</a>
<div class="menu-item">內(nèi)容1</div>
</li>
<li>
<a href="#">菜單項(xiàng)2</a>
<div class="menu-item">內(nèi)容2</div>
</li>
<li>
<a href="#">菜單項(xiàng)3</a>
<div class="menu-item">內(nèi)容3</div>
</li>
<li>
<a href="#">菜單項(xiàng)3</a>
<div class="menu-item">內(nèi)容4</div>
</li>
</ul>
</body>當(dāng)鼠標(biāo)在瀏覽器窗口右擊時(shí)，會(huì)在右擊的位置顯示對(duì)應(yīng)的桌面菜單。這里的菜單就是相對(duì)于body來絕對(duì)定位的。
<style>
body,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.menu{
width:200px;
height: 200px;
background-color: #fff;
border:1px solid #ddd;
box-shadow: 2px 2px 5px #ddd;
position: absolute;
display: none;
}
.menu li{
text-indent: 2em;
font-size: 14px;
color:#666;
line-height: 30px;
}
.menu li:hover{
background-color: #ddd;
}
</style>
<body>
<ul class="menu" id="menu">
<li>返回</li>
<li>前進(jìn)</li>
<li>重新加載</li>
<li>新建文件夾</li>
<li>設(shè)置背景</li>
</ul>
<script>
var tag=document.getElementById('menu');
var li=document.querySelectorAll('.menu li');
//取消系統(tǒng)默認(rèn)的右鍵彈窗
document.oncontextmenu=function(){
return false;
}
//按下右鍵，并抬起時(shí)
document.onmouseup=function(e){
if(e.button==2){//判斷鼠標(biāo)按下的時(shí)右鍵
//獲取鼠標(biāo)按下時(shí)的坐標(biāo)
var x=e.pageX;
var y=e.pageY;
//把鼠標(biāo)按下時(shí)的坐標(biāo)，分別賦值給tag元素的left和top
tag.style.left=x+'px';
tag.style.top=y+'px';
/*右鍵后，顯示右側(cè)桌面菜單*/
tag.style.display='block';
}
}
document.onclick=function(){
/*在窗口任意位置點(diǎn)擊，隱藏桌面菜單*/
tag.style.display='none';
}
</script>
</body>黑色半透明遮罩層不用設(shè)置寬高。我們通過position的left，right、top、bottom來控制黑色半透明遮罩層寬度和高度。
<style>
body,ul,li{
margin:0;
padding: 0;
}
ul{
list-style: none;
width:690px ;
}
ul li{
margin:5px;
float: left;
background-color: skyblue;
position: relative;/*相對(duì)定位*/
}
ul li:nth-child(1),ul li:nth-child(3){
width: 200px;
height: 200px;
}
ul li:nth-child(2){
width: 250px;
height: 200px;
}
ul li:nth-child(4),ul li:nth-child(5){
width: 330px;
height: 200px;
}
ul li::before{
display: block;
content: "";
/*通過定位，來控制元素的寬高，可以自適應(yīng)父元素*/
position: absolute;
left:20px;
right:20px;
top:20px;
bottom:20px;
background-color: rgba(0,0,0,0.5);/*黑色半透明遮罩層*/
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>三角形相對(duì)父元素水平居中源碼
<style>
html,body{
margin:0;
width: 100%;
height: 100%;
}
.tag{
width:100px;
height:100px;
padding: 10px;
margin: 100px auto;
background-color:orange;
border-radius: 10px;
position: relative;/*絕對(duì)定位*/
}
.tag::after{
display:block;
content: "";
/*以下三行代碼，繪制三角形*/
width:0;
border:10px solid transparent;
border-bottom-color:orange;
position: absolute; /*利用絕對(duì)定位設(shè)置三角形的位置*/
/*以下兩行代碼，設(shè)置三角形相對(duì)父元素水平居中*/
left:50%;
margin-left:-10px;
top:-20px;
}
</style>
<body>
<div class="tag"></div>
</body>當(dāng)鼠標(biāo)滑動(dòng)到元素上面，通過改變z-index的值，來提升元素層級(jí)，讓其在最上方展示。
<style>
body,ul,li{
margin:0;
padding: 0;
}
body{
background-color:#000;
}
ul{
list-style: none;
width: 800px;
height: 300px;
margin: 50px auto;
position: relative;/*相對(duì)定位*/
perspective:800px ;/*3D場(chǎng)景-景深（視距）*/
}
ul li{
width:400px;
height:300px;
position: absolute;/*絕對(duì)定位*/
left:calc(var(--i)*100px);/*通過自定義屬性動(dòng)態(tài)計(jì)算元素left值*/
transform: rotateY(20deg);/*Y軸旋轉(zhuǎn)20deg*/
box-shadow: 0px 2px 35px skyblue;
transition: all .5s;/*過渡動(dòng)畫*/
}
ul li img{
width: 100%;
height: 100%;
object-fit: cover;
}
ul li:hover{
border:10px solid #fff;
transform: rotateY(0deg);/*元素Y軸旋轉(zhuǎn)到0deg*/
z-index:2;/*改變?cè)貙蛹?jí)，讓元素在最上面顯示*/
top:50px;
}
</style>
<body>
<ul>
<li style="--i:0"><img src="images/rotate1.webp" alt=""></li>
<li style="--i:1"><img src="images/rotate2.webp" alt=""></li>
<li style="--i:2"><img src="images/rotate3.webp" alt=""></li>
<li style="--i:3"><img src="images/rotate1.webp" alt=""></li>
<li style="--i:4"><img src="images/rotate2.webp" alt=""></li>
<li style="--i:5"><img src="images/rotate3.webp" alt=""></li>
</ul>
</body>為幫助到一部分同學(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)目開發(fā)，云服務(wù)器部署上線，從入門到精通
共4大完整的項(xiàng)目開發(fā) ！一行一行代碼帶領(lǐng)實(shí)踐開發(fā)，實(shí)際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進(jìn)入工作狀態(tài)，省得浪費(fèi)時(shí)間。
從學(xué)習(xí)一開始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實(shí)大廠項(xiàng)目的開發(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)式開發(fā)項(xiàng)目開發(fā)
這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》中每一個(gè)細(xì)節(jié)都有講到，包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉，真正一次掌握企業(yè)項(xiàng)目開發(fā)必備技能，不走彎路 ！
過程中【不涉及】任何費(fèi)用和利益，非誠勿擾 。
如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰(zhàn)學(xué)習(xí)計(jì)劃，來自公眾號(hào)！老師會(huì)邀請(qǐng)你進(jìn)入學(xué)習(xí)，并給你發(fā)放相關(guān)資料
30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
