關於電商產品展示,無論是從首頁還是到欄目頁,再到產品的詳情頁,產品展示效果不僅僅是在電商平臺,在很多的企業網站也使用頻繁,今天爲大家分享一個HTML+CSS小案例項目:小米電商平臺的商品展示頁面!我們來一起看看吧!
那麼我們要開發一個什麼樣的效果呢?來吧展示!!!
接着下來我們實戰開發吧!
溫馨提示:本期課程是三十個實戰案例的第2節,爲了更好的學好前端,可以配合艾編程30天計劃學習效果更好,因爲30個案例就是30天計劃的實戰作業一部分!具體參與方式,我放在文章的最底部了,大家可以看完這個效果後找助理老師領取!
第一步、構建長方形盒子,同時水平居中
1、操作步驟
(1)構建 一個名爲product的盒子
<div class='product'></div>
(2)給product 添加寬度、高度 、背景顏色。這裏的高度正常情況下是不能設置死,是爲了方便大家理解看效果,所以加上的。後面我們會去掉
.product{
width:268px;/*寬度*/
height:400px;/*高度*/
background-color: red;/*背景顏色*/
}
(3)、清除body自帶的的默認樣式
body{
margin:0px;/*外邊距爲0px*/
}
(4)、設置.product 長方形盒子與瀏覽器頂部50px間距,同時水平居中顯示
.product{
margin:50px auto; /*上外邊距50px 左右外邊距自動相等-水平居中*/
}
(5)、給盒子添加邊框線,,同時把添加的背景註釋掉。背景是爲了開始演示效果
.product{
/* background-color: red;背景顏色*/
border:1px solid #ddd; /*1像素 實線 灰色邊框*/
}
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、實現效果
第二步、添加產品圖,同時設置水平居中
1、操作步驟
(1)、在.product盒子中添加產品圖,同時設置圖片寬度和alt描述
<body>
<div class="product">
<!--img標籤,用來在頁面當中插入圖片-->
<img src="images/kettle.png" alt="電水壺" width="195px">
</div>
</body>
(2)、設置圖片在水平方向居中顯示
.product{
text-align:center;/*設置內容文字或圖片在盒子中水平居中*/
}
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、實現效果
第三步、設置產品描述樣式
1、操作步驟
1、在.product盒子中添加p標籤,同時到名爲describe,p標籤用來包裹產品描述
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class='describe'>快速煮水,安心飲用</p>
</div>
</body>
2、去掉h3自帶的默認margin外邊距樣式
body,p{
margin:0px;/*同時去掉body和h3標籤的默認外邊距*/
}
3、修飾h3中的文字樣式
.product p.describe{
font-size:16px ;/*字體大小*/
font-weight: 400;/*字體粗細*/
color:#845f3f;/*字體顏色*/
}
2、實現代碼
<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、實現效果
第四步、構建一個長方形,用來包裹後所有內容
1、操作步驟
1、在.product盒子中,再構建一個名爲 .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 添加如下樣式。當然裏添加的高度也是爲了方便看效果,後面我們也會刪除。
.product .product-text{
height:100px;/*高度-爲了查看效果,後期會刪除*/
background-color: #f8f8f8;/*背景顏色*/
margin-top:20px;/*上外邊距20px*/
padding:15px;/*上下左右內邊距15px*/
}
3、我們把最開始爲了方便看效果,給.product添加的高度給刪除(或註釋)
.product{
/*height:400px;*/
}
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;/*上下左右內邊距15px*/
}
</style>
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class="describe">快速煮水,安心飲用</h3>
<div class="product-text">
添加內容邊距,使裏面的內容與盒子間有上下左右有15px空隙
</div>
</div>
</body>
3
實現效果
第五步、開發 直播中、特惠、30天保價、售後免郵效果
1、操作步驟
(1)在名爲 .product-text盒子中 添加類名爲 product-mark的div盒子,同時在裏面插入四張圖,同時把圖片高度設爲 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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
</div>
</div>
</body>
(2)添加好的圖片之間默認有一定的空隙,這個空隙在不同的瀏覽器中看到的大小可能不一樣。所以我們需要把這個默認的空隙去掉,然後自己給圖片添加外邊距來實現空隙。
空隙產生的原因,是瀏覽器把圖片間的換行和空格給編譯了。我們的處理方式可以在.product-mark中添加font-size:0px;就可以消除。
.product .product-text .product-mark{
font-size: 0px;/*去掉圖片間的空隙*/
}
(3)、消除空隙後,我們給圖片單獨添加margin外邊距來實現空隙效果。
.product .product-text .product-mark img{
margin:0px 2px;/*給圖片設置左右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;/*上下左右內邊距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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
</div>
</div>
</body>
3、實現效果
第六步、開發產品標題效果
1、操作步驟
(1)、在product-text盒子中添加 h3標籤,用來包裹標題內容
<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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
<h3>雲米電水壺</h3>
</div>
</div>
(2)、去掉h3自帶的默認margin外邊距
body,p,h3{
margin:0px;/*同時去掉body,p,h3的默認外邊距*/
}
(3)、通過以下css來修飾標題
.product .product-text h3{
font-size: 20px;/*字體大小*/
font-weight:400 ;/*字體粗細*/
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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
<h3>雲米電水壺</h3>
</div>
</div>
</body>
3、實現效果
第七步、開發產品價格效果
1、操作步驟
(1)在product-text中 添加 p標籤,用來包裹價格
<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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
<h3>雲米電水壺</h3>
<p>¥59</p>
</div>
</div>
</body>
(2)、通過以下css來修飾價格樣式
.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;/*上下左右內邊距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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
<h3>雲米電水壺</h3>
<p>¥59</p>
</div>
</div>
</body>
3、實現效果
第八步、添加a超鏈接,實現頁面跳轉
添加了超鏈接之後,頁面中的文字就添加了下劃線,同時h3中的文字顏色也發生了改變,那下一步我們就來修正下這些細節
1、代碼
<div class="product">
<!--添加超鏈接,實現點擊後跳轉到新頁面-->
<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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
<h3>雲米電水壺</h3>
<p>¥59</p>
</div>
</a>
</div>
2、運行效果
第九步:修改加了a標籤後帶來的問題
1、操作步驟
(1)清除a標籤的默認下劃線樣式
a{
text-decoration: none;/*去掉下劃線*/
}
(2)給h3標籤中的文字加上顏色
.product .product-text h3{
color:#000;
}
(3)把a標籤轉換爲塊級元素
a{
display:block;/*a標籤轉換爲塊級元素*/
}
a標籤默認的是屬於內聯元素,正常情況下內聯元素中是不能放塊級元素,但a標籤特殊,可以這樣用。但在這裏,如果不把標籤轉換爲塊級元素,會發生很奇怪的效果。你給a標籤加上 border:1px solid red; 後,如下圖所示:
所以我們要把a標籤轉換爲塊級元素。當轉換爲塊級元素後,效果如下,一切正常
2、運行代碼
<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;/*上下左右內邊距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">
<!--添加超鏈接,實現點擊後跳轉到新頁面-->
<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天保價" height="20">
<img src="images/server.png" alt="售後免郵" height="20">
</div>
<h3>雲米電水壺</h3>
<p>¥59</p>
</div>
</a>
</div>
3、運行效果
爲幫助到一部分同學不走彎路,真正達到一線互聯網大廠前端項目研發要求,首次實力寵粉,打造了《30天挑戰學習計劃》,內容如下:
HTML/HTML5,CSS/CSS3,JavaScript,真實企業項目開發,雲服務器部署上線,從入門到精通
- PC端項目開發(1個)
- 移動WebApp開發(2個)
- 多端響應式開發(1個)
共4大完整的項目開發 !一行一行代碼帶領實踐開發,實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態,省得浪費時間。
從學習一開始就同步使用 Git 進行項目代碼的版本的管理,Markdown 記錄學習筆記,包括真實大廠項目的開發標準和設計規範,命名規範,項目代碼規範,SEO優化規範
從藍湖UI設計稿 到 PC端,移動端,多端響應式開發項目開發
- 真機調試,雲服務部署上線;
- Linux環境下 的 Nginx 部署,Nginx 性能優化;
- Gzip 壓縮,HTTPS 加密協議,域名服務器備案,解析;
- 企業項目域名跳轉的終極解決方案,多網站、多系統部署;
- 使用 使用 Git 在線項目部署;
這些內容在《30天挑戰學習計劃》中每一個細節都有講到,包含視頻+圖文教程+項目資料素材等。只爲實力寵粉,真正一次掌握企業項目開發必備技能,不走彎路 !
過程中【不涉及】任何費用和利益,非誠勿擾 。
如果你沒有添加助理老師微信,可以添加下方微信,說明要參加30天挑戰學習計劃,來自今日頭條!老師會邀請你進入學習,並給你發放相關資料