在盒子外划分盒子距离时用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
精品推荐
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
精品推荐
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
