仿小米商品展示

仿小米商品展示_第1张图片


<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);
}
.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;
}

你可能感兴趣的:(HTML)