- 在盒子外划分盒子距离时用margin(外边距)
- 在盒子内划分盒子距离时用padding(内边距)
image.png
Snipaste_2018-08-09_01-55-06.png
image.png
- 部分代码:
- xxx.css
/*精品产品*/
.products{
margin-top: 30px;
}
.pro-hd{
height: 40px;
position: relative;
}
.pro-hd h4{
font-weight: normal;
font-size: 18px;
}
.pro-hd a{
position: absolute;
top: 0;
right: 20px;
}
.pro-bd li{
width: 228px;
height: 270px;
background-color: pink;
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
/*因为第五个li不需要 margin-right: 15px; 所以第五个 margin-right: 0;*/
.pro-bd li:nth-child(5n){
margin-right: 0;
}
- xxx.html
<!-- 精品产品 w是版心-->
<div class="products w">
<!-- .pro-hd+.pro-bd -->
<div class="pro-hd">
<h4>精品推荐</h4>
<a href="#">查看全部</a>
</div>
<div class="pro-bd">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
image.png
image.png
图片动盒子也动
-
效果图:
GIF4.gif 部分代码
xxx.css
/*精品产品*/
.products{
margin-top: 30px;
}
.pro-hd{
height: 40px;
position: relative;
}
.pro-hd h4{
font-weight: normal;
font-size: 18px;
}
.pro-hd a{
position: absolute;
top: 0;
right: 20px;
}
.pro-bd li{
width: 228px;
height: 270px;
overflow: hidden; /*把图片超出部分隐藏*/
background-color: #fff;
float: left;
margin-right: 15px;
margin-bottom: 15px;
transition: all 0.5s;
}
.pro-bd li:hover{
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
/*margin-top: -10px;*/ /*不推荐*/
transform: translateY(-10px); /*transform变换后，原来的位置还占据空间 推荐用*/
}
/*因为第五个li不需要 margin-right: 15px; 所以第五个 margin-right: 0;*/
.pro-bd li:nth-child(5n){
margin-right: 0;
}
/*给图片做动画*/
.pic img{
transition: all 0.5s;
}
.pic img:hover{
margin-left: -5px;
}
.pro-title{
width: 185px;
margin: 20px auto;
font-size: 14px;
color: #050505;
}
.pro-bd p{
width: 185px;
margin: 20px auto;
color: #999999;
font-size: 12px;
}
.pro-bd p span{
color: #ff9159;
}
- xxx.html
<!-- 精品产品 w是版心-->
<div class="products w">
<!-- .pro-hd+.pro-bd -->
<div class="pro-hd">
<h4>精品推荐</h4>
<a href="#">查看全部</a>
</div>
<div class="pro-bd">
<ul>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
<li>
<div class="pic">
<img src="images/pic1.png" alt="">
</div>
<div class="pro-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li>
</ul>
</div>
</div>
