CSS 对联代码实例
分类：实例代码
分享一段简单的代码实例，它用css实现了对联效果。
如果需求js实现的两端漂浮的对联效果，可以查阅特效下载版块广告代码分类。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.wrap{
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.wrap:after{
content: '';
display: block;
clear: both;
}
.flag{
position: relative;
background-color: red;
width: 100px;
overflow: hidden;
}
.top,.bottom{
display: inline-block;
width: 100px;
height: 18px;
background-color: yellow;
}
.bottom{
position: absolute;
bottom: 0;
}
p{
text-align: center;
font-size: 64px;
}
#flag{
float: left;
}
#flag2{
float: right;
}
</style>
</head>
<body>
<div class="wrap">
<div class="flag" id="flag">
<span class="top"></span>
<p>猴年吉祥</p>
<span class="bottom"></span>
</div>
<div class="flag" id="flag2">
<span class="top"></span>
<p>鸡年纳福</p>
<span class="bottom"></span>
</div>
</div>
</body>
</html>
上述代码实现了简单的对联广告效果。
CSS 对联代码实例，这样的场景在实际项目中还是用的比较多的，关于CSS 对联代码实例就介绍到这了。
CSS 对联代码实例属于前端实例代码，有关更多实例代码大家可以查看。