css布局实现商品服务价格套餐对比效果代码-html代码-BFW代码库

css布局实现商品服务价格套餐对比效果代码

代码语言：html

代码描述：css布局实现商品服务价格套餐对比效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:Condensed" />
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>



    <style>
        body {
            font-family: 'Open Sans';
            font-style: condensed;
            background: #5b2072;
            /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover,  #5b2072 0%, #5d1566 50%, #251a41 100%);
            /* FF3.6+ */
            background: -webkit-gradient(radial,center center, 0px, center center, 100%, color-stop(0%,#5b2072), color-stop(50%,#5d1566), color-stop(100%,#251a41));
            /* Chrome,Safari4+ */
            background: -webkit-radial-gradient(center, ellipse cover,  #5b2072 0%,#5d1566 50%,#251a41 100%);
            /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  #5b2072 0%,#5d1566 50%,#251a41 100%);
            /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  #5b2072 0%,#5d1566 50%,#251a41 100%);
            /* IE10+ */
            background: radial-gradient(ellipse atcenter,  #5b2072 0%,#5d1566 50%,#251a41 100%);
            /* W3C */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5b2072', endColorstr='#251a41',GradientType=1 );
            /* IE6-9 fallback on horizontal gradient */
        }

        a {
            font-size: 18px;
            font-family: 'Open Sans';
            color: white;
            text-decoration: none;

        }

        input:focus,textarea:focus,select:focus {
            border: 1px solid #fafafa;
            -webkit-box-shadow: 0 0 6px #007eff;
            -moz-box-shadow: 0 0 5px #007eff;
            box-shadow: 0 0 5px #007eff;
            outline: none;
        }

        sup {

            font-size: 40px;
        }

        ul {
            list-style: none;
            font-size: 15px;
            font-family: 'Open Sans';
            color: #9095aa;
            padding: 0px;
            margin: 0px;


        }


        li {
            border-bottom: 1px solid #494a5a;
            padding: 0px;
            margin: 0px;
            text-align: center;
            height: 52px;
            line-height: 52px;
        }


        #container {
            width: 100%;
            text-align: center;
        }

        .whole {
            display: inline-block;

        }



        .type {
            width: 300px;
            border-radius: 5px 5px 0px 0px;
            background-color: #eac80d;
            height: 62px;
            border-bottom: 3px solid #bfa30c;

        }

        .type p {
            font-family: 'Open Sans';
            font-weight: 800;
            font-size: 29px;
            text-transform: uppercase;
            color: white;
            text-align: center;
            padding-top: 10px;



        }

        .plan {
            width: 300px;
            background-color: #2b2937;

            border-radius: 0px 0px 5px 5px;
            font-family: 'Open Sans';
            font-style: condensed;
            font-size: 90px;
            color: white;
            text-align: center;


        }
        .standard {
            background-color: #1abc9c;
            border-bottom: 3px solid #18937b;
        }

        .ultimate {
            background-color: #5d6a9a;
            border-bottom: 3px solid #474f6f;
        }





        .header {
            border-bottom: 1px solid #494a5a;
            padding-bottom: 39px;


        }

        .header span {
            font-size: 32px;


        }

        .month {
            font-size: 14px;
            color: #575757;
            padding: 0px;
            margin: -10px;
        }

        .price {
            height: 80px;
        }

        .cart {

            color: white;
            position: relative;
            top: 16px;

        }

        .bottom {}

        .content {}

        .login_c {
            width: 500px;
            background-color: #2b2937;
            height: 300px;
            margin: 0 auto;
            margin-top: 40px;
            border-radius: 5px;

        }

        .login_c input {
            width: 350px;
            height: 40px;
            border: 1px solid #494a5a;
            margin-bottom: 20px;
            border-radius: 5px;
            padding-left: 10px;

        }


        .login {
            background-color: #BC4B1A;
            border-bottom: 3px solid #7C3.........完整代码请登录后点击上方下载按钮下载查看