仿小米商品展示

最新推荐文章于 2020-09-09 14:02:10 发布

luckyblues

最新推荐文章于 2020-09-09 14:02:10 发布

阅读量1k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_27632117/article/details/52688203

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品展示列表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<div class="box">
   <ul>
  <!-- 第一张图片-->
     <li>
     <h1>新品</h1>
      <a href="#">
           <img src="images/pms_1472177415.40899754.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>红米note标准高透贴膜</h2>
        <h3>18元</h3>
        <p>5327人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>

     <!-- 第二张图片-->
     <li>
        <h1>新品</h1>
         <a href="#">
           <img src="images/T1jsDgBXdv1RXrhCrK.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>小米手机5智能翻盖保护套</h2>
        <h3>49元</h3>
        <p>1.9万人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>

     <!-- 第三张图片-->
     <li>
        <h1>新品</h1>
       <a href="#">
           <img src="images/T1y7JQBbCT1RXrhCrK.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>小米Max高透贴膜</h2>
        <h3>19元</h3>
        <p>9754人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>

     <!-- 第四张图片-->
     <li>
        <h1>新品</h1>
         <a href="#">
           <img src="images/T18EWQBjWT1RXrhCrK.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>红米Pro智能显示保护套</h2>
        <h3>29元</h3>
        <p>1245人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>


     <!-- 第一张图片-->
     <li>
     <h1>新品</h1>
        <a href="#">
           <img src="images/pms_1472177415.40899754.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>红米note标准高透贴膜</h2>
        <h3>18元</h3>
        <p>5327人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>

     <!-- 第二张图片-->
     <li>
        <h1>新品</h1>
        <a href="#">
           <img src="images/T1jsDgBXdv1RXrhCrK.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>小米手机5智能翻盖保护套</h2>
        <h3>49元</h3>
        <p>1.9万人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>

     <!-- 第三张图片-->
     <li>
        <h1>新品</h1>
         <a href="#">
           <img src="images/T1y7JQBbCT1RXrhCrK.jpg" alt="小米手机" width="150px" height="150px" />
        </a>

        <h2>小米Max高透贴膜</h2>
        <h3>19元</h3>
        <p>9754人评价</p>
        <div class="hidden">
           <h4>透光性很强，值得拥有</h4>
           <h5>来自大海的评价</h5>
        </div>
     </li>

     <!-- 第四张图片-->
     <li>

      <a href="#" class="moreProduct"><img src="images/T1zTKgBmhv1RXrhCrK.jpg" width="80px" height="80px" /></a>
      <p class="more">浏览更多</p>
     </li>
   </ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
    font-family:"微软雅黑";
}
body{
    width:100%;
    height:auto;
    background:#f1f1f1;
}
.box{
    width:1100px;
    height:700px;
    border:solid 1px #eee;
    margin:20px auto;
    box-shadow: 2px 2px #eee;
}
.box ul li{
    width:240px;
    height:310px;
    background:#fff;
    list-style:none;
    margin-left:20px;
    float:left;
    position:relative;
    overflow:hidden;
    transition:all 0.3s ease;
    margin-top:20px;
}
.box ul li h1{
    font-size:16px;
    width:42px;
    height:26px;
    text-align:center;
    display:block;
    background:#F44336;
    color:#fff;
    font-weight:normal;
    line-height:26px;
    margin:0 auto;
}
.box ul li a{
    padding:20px 45px;
    display:block;
}
.box ul li h2{
    font-size:14px;
    font-weight:normal;
    text-align:center;
}
.box ul li h3{
    font-size:16px;
    font-weight:normal;
    text-align:center;
    margin-top:15px;
    color:#F44336;
}
.box ul li p{
    font-size:14px;
    font-weight:normal;
    text-align:center;
    margin-top:15px;
    color:#999;
}
.box ul li .hidden{
    width:100%;
    height:60px;
    background:#FFAB91;
    top:310px;
    position:absolute;
    transition:all 0.3s ease;
}
.box ul li .hidden h4{
    font-size:15px;
    font-weight:normal;
    color:#fff;
    margin-top:10px;
    text-align:center;
}
.box ul li .hidden h5{
    font-size:13px;
    font-weight:normal;
    color:#fff;
    margin-top:8px;
    text-align:center;
}
.box ul li:hover .hidden{
    top:250px;
}
.box ul li:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform:translateY(-5px);<!--向上移动5px； -->
}
.box ul li p.more{
    font-size:20px;
    font-weight:normal;
    text-decoration:none;
    color:#333;
    display:block;
    text-align:center;
}
.box ul li a.moreProduct{
    display:block;
    width:80px;
    height:80px;
    margin:30px auto;
}

luckyblues

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
仿小米商品展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty
复制链接

扫一扫

专栏目录