温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3如何实现网站商品展示效果图

发布时间:2021-03-22 11:34:39 阅读:257 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下CSS3如何实现网站商品展示效果图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

html代码

<div class="product">
  <ul>
   <li>
    <div class="pro-img">
     <a href="#">
      <img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
     </a>
    </div>
    <h4><a href="#">小米电视4A 43英寸青春版</a></h4>
    <p class="desc">全高清屏 / 人工智能语音</p>
    <p class="price">
     <span>1499</span>元
     <del>1699</del>
    </p>
    <div class="review">
     <a href="#">
      <span class="msg">一如既往的好,小米情怀</span>
      <span class="auther"> 来自于 惊喜 的评价 </span>
     </a>
    </div>
   </li>
  </ul>
 </div>

CSS3代码

* {
	margin0;
	padding0;
}

ulol {
	list-style: none;
}

inputbutton {
	outline: none;
	border: none;
}

a {
	text-decoration: none;
}

.clearfix::before,
.clearfix::after {
	content"";
	height0;
	line-height0;
	display: block;
	visibility: hidden;
}

.clearfix::after {
	clear: both;
}

body {
	padding100px;
	background-color#f5f5f5;
}

.product li {
    float: left;
    width234px;
	height246px;
    padding34px 0 20px;
    z-index1;
    margin-left14px;
    margin-bottom14px;
    background#fff;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
	position: relative;
}

.pro-img {
	width150px;
	height150px;
	margin0 auto 18px;
}

.pro-img a {
	width100%;
	height100%;
}

.pro-img img {
	display: block;
	width100%;
	height100%;
}

.product li h4 {
	margin0 10px;
    font-size14px;
    font-weight400;
    text-align: center;
}

.product li h4 a {
	color#333;
}

.desc {
	margin0 10px 10px;
    height18px;
    font-size12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color#b0b0b0;
}

.price {
	font-size14px;
	margin0 10px 10px;
    text-align: center;
    color#ff6700;
}

.price del {
	color#b0b0b0;
}

.review {
	position: absolute;
    bottom0;
    left0;
    z-index3;
    width234px;
    height0;
    overflow: hidden;
    font-size12px;
    background#ff6700;
    opacity0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.review a {
	color#757575;
	display: block;
    padding8px 30px;
    outline0;
}

.review a span {
	display: block;
	margin-bottom5px;
    color#fff;
}

.product li:hover {
	-webkit-box-shadow0 15px 30px rgba(0,0,0,0.1);
    box-shadow0 15px 30px rgba(0,0,0,0.1);
    -webkit-transformtranslate3d(0, -2px0);
    transformtranslate3d(0, -2px0);
}

.product li:hover .review {
	opacity1;
	height76px;
}

运行效果图:

CSS3如何实现网站商品展示效果图 

以上是“CSS3如何实现网站商品展示效果图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/710797.html

AI

开发者交流群×