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;



        }.........完整代码请登录后点击上方下载按钮下载查看