时间:2023-05-27 00:42:01 | 来源:网站运营
时间:2023-05-27 00:42:01 来源:网站运营
Html+CSS小案例项目:CSS开发小米商城电商产品展示效果:关于电商产品展示,无论是从首页还是到栏目页,再到产品的详情页,产品展示效果不仅仅是在电商平台,在很多的企业网站也使用频繁,今天为大家分享一个HTML+CSS小案例项目:小米电商平台的商品展示页面!我们来一起看看吧!<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、实现效果<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、实现效果<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、实现效果<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
实现效果
<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>
.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、实现效果<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、实现效果<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>
<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{ text-decoration: none;/*去掉下划线*/}
(2)给h3标签中的文字加上颜色.product .product-text h3{ color:#000; }
(3)把a标签转换为块级元素a{display:block;/*a标签转换为块级元素*/}
a标签默认的是属于内联元素,正常情况下内联元素中是不能放块级元素,但a标签特殊,可以这样用。但在这里,如果不把标签转换为块级元素,会发生很奇怪的效果。你给a标签加上 border:1px solid red; 后,如下图所示:<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、运行效果关键词:商城,展示,效果,小米,产品,项目