版权声明:本文为博主原创文章,转载请注明出处 浅然的专栏 https://blog.csdn.net/w_linux/article/details/78460862
##一、效果
##二、代码
####HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片经过效果</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="img">
<a href="#">
<img src="images/cardPASS.jpg" width="296" height="200" alt="222" />
</a>
</div>
<p class="title">这是个cardpass</p>
<p class="author">出自xulinjie</p>
<div class="info">
<div class="info-tit">
底部信息主题
</div>
<span class="upright">|</span>
<div class="data">
2017
</div>
</div>
</div>
<div class="card">
<div class="img">
<a href="#">
<img src="images/cardPASS.jpg" width="296" height="200" />
</a>
</div>
<p class="title">这是个cardpass</p>
<p class="author">出自xulinjie</p>
<div class="info">
<div class="info-tit">
底部信息主题
</div>
<span class="upright">|</span>
<div class="data">
2017
</div>
</div>
</div>
<div class="card">
<div class="img">
<a href="#">
<img src="images/cardPASS.jpg" width="296" height="200" />
</a>
</div>
<p class="title">这是个cardpass</p>
<p class="author">出自xulinjie</p>
<div class="info">
<div class="info-tit">
底部信息主题
</div>
<span class="upright">|</span>
<div class="data">
2017
</div>
</div>
</div>
<div class="card">
<div class="img">
<a href="#">
<img src="images/cardPASS.jpg" width="296" height="200" />
</a>
</div>
<p class="title">这是个cardpass</p>
<p class="author">出自xulinjie</p>
<div class="info">
<div class="info-tit">
底部信息主题
</div>
<span class="upright">|</span>
<div class="data">
2017
</div>
</div>
</div>
</div>
</body>
</html>
####CSS
*{margin: 0;}
.container{height: 415px;width: 1240px;margin: 0 auto;margin-top: 50px;}
.container .card{height: 415px;width: 296px;
top:0;position: relative;transition: all 0.25s;
border-width:1px;border-style: solid;
/*display: inline-block;*//*此语句也可以*/
float: left;
margin-right: 10px;
}
.container .card:hover{top:-10px;box-shadow: 5px 8px 5px #333;}
.container .card .title{height: 70px;font-weight: 500;font-size: 14px;margin: 0 28px 22px; }/*上,左右,下*/
.container .card .author{height: 20px;font-weight: 500;font-size: 14px;margin: 0 28px 8px;}
.container .card .info{margin: 20px 30px 10px;overflow: hidden;display: inline-block;}
.container .card .info .info-tit{display: inline-block;}
.comtainer .card .info .upright{margin: 0 0.25px; color: #e0e0e0;}
.container .card .info .data{display: inline-block; color: #ff6700;}
##三、代码部分解析
####1、最大容器命名container算是业界比较公认的,提高易读性
####2、块级元素和行间元素
块级元素包括div,h1,h2等
行间元素包括span等
区别就是块级元素无论该行有多大的空余,下一个元素都是在下方,而不会在旁边。行间元素反之。并且行间元素不用定义宽高,它的大小就是内容大小
#####可以参考下面代码和效果来分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.block{width: 40px;height: 40px;background-color: red;}
.block2{width: 40px;height: 40px;background-color: green;}
.ini{background-color: blue;}
.ini2{background-color: yellow;}
</style>
</head>
<body>
<!-- 块级元素 -->
<div class="block">
</div>
<div class="block2">
</div>
<div class="block">
</div>
<div class="block2">
</div>
<!-- 行间元素 -->
<span class="ini">
xxxxaaxa
</span>
<span class="ini2">
xxadasdas
</span>
<span class="ini">
xxsdsf
</span>
<span class="ini2">
xxdfggg
</span>
</body>
</html>
####3、使用块级元素变成在同一行的效果实现
可以在块级元素的css加上
display:inline-block;
或者也可以试试浮动
float:left;
####4、margin的四种写法
- margin:0; //上下左右边距都为0
- margin:0 10px; //上下为0,左右为10px;
- margin:1px 1px 1px 1px; //分别代表上,右,下,左
- margin:1px 1px 1px; //上,(左右),下
####5、transition解析
本次效果实现用了transition:all 1s;
这里all指hover中所有都在其中进行动画,也可以改成transition:width 1s;这样就会只实现hover中的width元素实现动画效果,且动画持续1s