css3分页，卡片制作
2018-06-05 本文已影响43人
小本YuDL
1.分页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
display: inline-block;
margin: 0px;
padding: 0px;
}
li{display: inline;}
a{
float: left;
color:black;
padding: 8px 10px;
text-decoration: none;
transition: background-color .3s;
}
.active{
background-color:burlywood ;
color: white;
}
a:hover{background-color: #ddd;}
</style>
</head>
<body>
<ul>
<li><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a class ="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">>></a></li>
</ul>
</body>
</html>
效果图：
image.png
其中transition（过渡）属性是个复合属性，它包括以下几个子属性：
transition-property ：规定设置过渡效果的css属性名称(默认值all)
transition-duration ：规定完成过渡效果需要多少秒或毫秒（默认0s）
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线(默认为ease函数)
transition-delay ：指定开始出现的延迟时间（默认延迟0s）
注意：transition四个子属性之间只能用空格隔开，不能用逗号隔开
2.卡片制作：
<style type="text/css">
.div
{
width:20%;
height:270px;
background-color: white;
box-shadow:0 0px 8px 0 rgba(0,0,0,0.5) ,0 8px 20px 0 rgba(0,0,0,0.5);
margin-bottom: 5px;
border-radius:4px;
}
.container{
text-align: center;
padding: 3px ;
}
a{
display:inline-block;
border:1px solid deepskyblue;
border-radius: 6px;
padding:5px;
transition: 0.3s;
}
a:hover{
box-shadow: 0 0 2px 1px ragb(0 ,150px,150px,1);
}
@keyframes we{
from{background-color: #00BFFF;}
to{background-color: aquamarine;}
}
</style>
</head>
<body style="margin: 25px;">
<div class="div">
<img src="img/5DE6CB8DCE5222A639682DA54DC38E77.jpg" alt="we" width="100%" height="200px" style="opacity:0.5;" />
<div class="container">
<p>我们的故事不多，但遇见你就是最好的</p>
</div>
</div>
效果展示：
image.png
