小米商城seo_HtmlCSS小案例项目CSS开拓小米商城电商产品展示效果

文章目录 [+]

那么我们要开拓一个什么样的效果呢？来吧展示！
！
！

接着下来我们实战开拓吧！

小米商城seo_HtmlCSS小案例项目CSS开拓小米商城电商产品展示效果小米商城seo_HtmlCSS小案例项目CSS开拓小米商城电商产品展示效果 SEO关键词

温馨提示：本期课程是三十个实战案例的第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 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、实当代码

实现效果

第五步、开拓直播中、特惠、30天保价、售后免邮效果

1、操作步骤

（1）在名为 .product-text盒子中添加类名为 product-mark的div盒子,同时在里面插入四张图,同时把图片高度设为 20px

（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、代码

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、代码

3、实现效果

第七步、开拓产品价格效果

1、操作步骤

（1）在product-text中添加 p标签，用来包裹价格

（2）、通过以下css来润色价格样式

.product .product-text p{ font-size:20px ;/字体大小/ color:#a92112;/字体颜色/ margin-top:5px;/上外边距 5px/ }

（3）、去掉最开始给 .product-text添中的高度

.product .product-text{ / height:100px; / }

2、代码

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、运行代码