当前位置 CSS模版园 >> 酷炫特效 >> css3+div布局pricing-column

css3+div布局pricing-column

css3+div布局pricing-column

采用css3

<!DOCTYPE html>
<html>
<head>
<title>pricing-column</title>
<style>
body {padding: 0;margin: 0;font-size: 12px;font-family: 'Microsoft yahei';}
.container {width: 60%;margin: 30px auto;margin-top: 50px;}
ul {margin: 0;padding: 0;list-style-type: none;border: 1px solid #eee;}
ul:after {content: '';clear: both;display: block;}
ul li {float: left;transition: all .2s;width: 25%;height: 360px;border-right: 1px solid #ccc;box-sizing: border-box;padding: 10px;}
ul li h2 {font-size: 20px;text-align: center;}
ul li h3 {font-size: 18px;text-align: center;border-bottom: 1px solid #ccc;padding-bottom: 10px;}
ul li a {display: block;width: 90%;margin: 10px auto;text-align: center;background: #DA6D0E;border-radius: 10px;transition: all .5s;position: relative;padding: 20px 0;text-decoration: none;color: #fff;}
ul li a span {display: block;}
ul li a:hover {box-shadow: 0px 1px 10px rgba(0,0,0,.8);}
ul li p {text-align: center;color: #111;}
ul li:nth-child(4) {border-right: none;}
ul li:hover{box-shadow: 0px 4px 20px rgba(0,0,0,.3);border-radius: 10px;transform: scale(1.1);-webkit-transform: scale(1.1);border: none;background: #fff;}
</style>
</head>
<body>
<div>
<ul>
<li>
<h2>Basic</h2>
<h3>£3.99 ($6 US)</h3>
<p>
   15 active clients <br/>
   Unlimited invoices per month <br/>
   Unlimited staff logins <br/>
   Free upgrades <br/>
   RapidSSL Certificate <br/>

Unlimited telephone & email support
</p>
<p>
<a href="javascript:;"><span>Sign Up</span><span>30 day free trial</span></a>
</p>
</li>
</ul>
</div>
</body>
</html>

 

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-121.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)