css实现彩色价格套餐效果代码-html代码-BFW代码库

css实现彩色价格套餐效果代码

代码语言：html

代码描述：css实现彩色价格套餐效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        html,body,div,span,h1,h2,h3,h4,h5,p,a,i,form,figure{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
        figure {display: block;}
        ul{list-style:none;margin:0px;padding:0px;}
        /*--start editing from here--*/
        a{text-decoration:none;}/* text align right *//* text align left *//* text align center *//* float right *//* float left */
        .clear{clear:both;}/* clear float *//* Position Relative *//* Position Absolute *//* vertical align baseline *//* vertical align top *//* vertical menu *//* horizontal menu */
        /*--end reset--*/
        body {
            font-family: 'Open Sans', sans-serif;
            background: #33a99d;
        	-webkit-background-size:cover;
        	-moz-background-size:cover;
        	-o-background-size:cover;
        	-ms-background-size:cover;
        	background-size:cover;
        	background-attachment: fixed;
        }
        h1 {
        	text-align: center;
        	margin: 1em 0 1.8em;
        	font-size: 3em;
        	color: #000;
        	font-weight: 300;
        }
        /*-- main --*/
        .main-row {
            width: 835px;
            margin: 0 auto !important;
        } 
        .pricing-grid {
            width: 32%;
            float: left; 
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        	-ms-transition: 0.5s all;
        	transition: 0.5s all;
        }
        .pricing-grid:nth-child(2) {
            margin: 0 1em;
        }
        /*Pricing table and price blocks*/ 
        /*----*/  
        .agileinfo-price  h2,.agileinfo-price  h3{
        	font-size: 2em;
        	color: #fff;
        	font-weight: 300;
        }
        .agileinfo-price {
        	background: #8c25ec;
        	padding: 1em 0; 
        	text-align: center;
        }
        .agileinfo-price.two{
        	background: #f39c0f; 
        }
        .agileinfo-price.three {
        	background: #e83454; 
        }
        .agileinfo-price  h5 {
        	padding: 11px 0;
        	font-style: italic;
        	font-size: 13px;
        	color: #F0EBEB;
        }
        ul.count,ul.count,ul.count{
        	font-size: 15px;
        	display: block;
        	text-decoration: none;
        	font-weight: 400;
        	padding: 10px 20px;
        }
        .price-bg {
            background: #fff; 
            padding: 1.5em;
        }
        p.price-label-1 {
        	color: #8c25ec;
        	text-align: center;
        }
        p.price-label-2 {
        	color: #f39c0f;
        	text-align: center;
        }
        p.price-label-3 {
        	color: #e83454;
        	text-align: center;
        }
        .price-bg p span {
            font-weight: bold;
            font-size: 5em;
            line-height: 0.8em;
            margin-right: 5px;
        }
        .price-bg p i {
        	vertical-align: super;
        }
        .price-bg ul {
        	padding: 0;
        	margin-top: 1em;
        }
        .price-bg ul li{
        	list-style: none;
        } 
        .buy {
            padding: 1em 0 0;
            text-align: center;
        }
        .buy a.........完整代码请登录后点击上方下载按钮下载查看