css3实现淘宝盒子展示商品展示

2020-05-18 网页编程网 网页编程网

学习相对定位与绝对定位，不用固定宽度，要用自适合方式。

<title>淘宝盒子展示，学习相对定位与绝对定位</title>
<style>
*{
margin: 0;
padding: 0;
   }
.wrap{
   width: 1200px;
   height: 400px;
   margin: 50px auto;
background-color:green;
}
.content{
   position: relative;
   width: 380px;
   height: 180px;
}
.image{
   width:100%;
   height:100%;   
}
.title{
   position: absolute;
   bottom:0;
   left: 0;/*叛逆属性，不受上级管，无参考物时，只受浏览器*/
   width: 100%;
   height: 35px;
   background-color: rgba(0,255,0,.5);
   color: white;
   line-height: 35px;
   text-indent: 10px;
}
.hide{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.5);
   text-align:center;
   opacity: 0;
transition: .8s;
}
.content:hover .hide{/*当鼠标移入contnet，执行以下代码*/
opacity: 1;
}
.content:hover .title{
opacity: 0;
}
.h-head{
   display: block;
   margin: 15px auto;

}
/*
绝对定位，自适合性-BFC
inline行内元素没有宽高，如水一样，要加block
block块级元素，有固定宽高，如冰
inline-block
*/
.h-title{
display: inline-block;
   color: white;
   font-size: 20px;
   border-bottom:double;
   line-height: 35px;
   transition: .8s;
}
.more{
   position: absolute;
   left: 50%;

display: inline-block;/*要自适合，不用width*/
   margin-top:55px;
   padding: 5px 10px;
   border:2px solid #fff;
   color: white; 
   border-radius:10px;
   transform: translateX(-50%);/*css3水平移*/
}
</style>
<body>
<div class="wrap">
   <div class="content">
      <img class="image" src="apache_pb2.png" />
      <p class="title">砖石夺夺城城城城夺</p>
      <div class="hide">
         <img class="h-head" src="apache_pb2.png" />
         <div class="h-title">
            <img src="1.png">
            <span>很好吃的，大家来试试</span>
            <img src="2.png">
         </div>
         <div class="more">查看</div>
      </div>
   </div>
</div>
</body>

阅读原文

阅读 4249

123 显示电脑版