bootstrap实现自适应响应式云服务商官网首页-html代码-BFW代码库

代码语言：html
所属分类：响应式
代码描述：基于bootstrap实现的自适应响应式服务官网首页，可以作为产品服务落地页使用。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网站首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="云流量" />

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content="" />
    <meta property="og:image" content="" />
    <meta property="og:url" content="" />
    <meta property="og:site_name" content="" />
    <meta property="og:description" content="" />
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Animate.css -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css">

    <!-- Simple Line Icons -->
    <style>

        /* =======================================================
*
*   Template Style
* Edit this section
*
* ======================================================= */
        body {
            font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.8;
            color: #777777;
            color: #7f7f7f;
            background: #fff;
            height: 100%;
            position: relative;
        }

        a {
            color: #6173f4;
            -webkit-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }
        a:hover, a:active, a:focus {
            color: #6173f4;
            outline: none;
            text-decoration: none;
        }

        p {
            margin-bottom: 1.5em;
        }

        h1, h2, h3, h4, h5, h6 {
            color: #000;
            font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif;
            font-weight: 400;
        }

        ::-webkit-selection {
            color: #fff;
            background: #6173f4;
        }

        ::-moz-selection {
            color: #fff;
            background: #6173f4;
        }

        ::selection {
            color: #fff;
            background: #6173f4;
        }

        #fh5co-header {
            position: absolute;
            z-index: 99;
            width: 100%;
            opacity: 1;
            top: 0px;
        }
        #ios #fh5co-header {
            background: #333;
        }
        #ios .navbar-collapse {
            border-top: 1px solid transparent;
        }
@media screen and (max-width: 768px) {
            #fh5co-header {
                margin-top: 0;
                background: #fff;
                -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
                -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
                -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
                box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
            }
            #fh5co-header .navbar-brand {
                color: #6173f4 !important;
            }
            #fh5co-header #navbar li a {
                color: rgba(0, 0, 0, 0.5) !important;
                -webkit-transition: 0.3s;
                -o-transition: 0.3s;
                transition: 0.3s;
            }
            #ios #navbar li a {
                color: #fff  !important;
            }
            #ios .navbar-fixed-top #navbar li a {
                color: rgba(0, 0, 0, 0.5) !important;
            }
            #fh5co-header #navbar li a:hover {
                color: #6173f4 !important;
            }
            #fh5co-header #navbar li a span:before {
                background: transparent !important;
            }
            #fh5co-header #navbar li.active a {
                background: transparent;
                background: none;
                color: #6173f4 !important;
            }
            #fh5co-header #navbar li.active a span:before {
                visibility: visible;
                -webkit-transform: scaleX(1);
                transform: scaleX(1);
            }
        }
        #fh5co-header .navbar {
            padding-bottom: 0;
            margin-bottom: 0;
        }
        #fh5co-header #navbar li a {
            font-family: "Microsoft YaHei", "Source Sans Pro", Arial, sans-serif;
            color: rgba(255, 255, 255, 0.5);
            position: relative;
            padding: 23px 25px;
        }
        #fh5co-header #navbar li a.btn-sm {
            padding: 2px 14px;
            border-radius: 50px;
            margin-left: 10px;
            margin-top: 19px;
            color: #fff;
        }
        #fh5co-header #navbar li a.btn:hover, #fh5co-header #navbar li a.btn:active, #fh5co-header #navbar li a.btn:focus {
            background: #618ef4 !important;
        }
        #fh5co-header #navbar li a span {
            position: relative;
            display: block;
            padding-bottom: 7px;
        }
        #fh5co-header #navbar li a span:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #6173f4;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            -moz-transform: scaleX(0);
            -ms-transform: scaleX(0);
            -o-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: all 0.3s ease-in-out 0s;
            -moz-transition: all 0.3s ease-in-out 0s;
            -ms-transition: all 0.3s ease-in-out 0s;
            -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
        }
        #fh5co-header #navbar li a:hover {
            color: #fff;
        }
        #fh5co-header #navbar li a:hover span:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            -moz-transform: scaleX(1);
            -ms-transform: scaleX(1);
            -o-transform: scaleX(1);
            transform: scaleX(1);
        }
        #fh5co-header #navbar li.active a {
            background: transparent;
            background: none;
            color: #fff;
        }
        #fh5co-header #navbar li.active a span:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
        #fh5co-header .navbar-brand {
            float: left;
            display: block;
            font-size: 22px;
            font-weight: 400;
            padding-left: 0;
            color: #fff;
            padding: 10px;
            width: 240px;
            line-height: 50px;
        }
        .navbar-brand > img {
            display: block;
            height: 50px;
            float: left;
            margin-right: 10px;
        }
        #fh5co-header.navbar-fixed-top {
            position: fixed !important;
            background: #fff;
            -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
            -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
            margin-top: 0px;
            top: 0;
        }
        #ios #fh5co-header.navbar-fixed-top {
            background: #fff;
        }
        .copyrights {
            text-indent: -9999px;
            height: 0;
            line-height: 0;
            font-size: 0;
            overflow: hidden;
        }
        #fh5co-header.navbar-fixed-top .navbar-brand {
            color: #6173f4;
            line-height: 50px;
        }
        #fh5co-header.navbar-fixed-top #navbar li a {
            color: rgba(0, 0, 0, 0.5);
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
        }
        #fh5co-header.navbar-fixed-top #navbar li a.btn-sm {
            padding: 4px 14px;
            border-radius: 50px;
            margin-left: 10px;
            margin-top: 19px;
            color: #fff;
        }
        #fh5co-header.navbar-fixed-top #navbar li a:hover {
            color: #6173f4;
        }
        #fh5co-header.navbar-fixed-top #navbar li a.btn-sm:hover {
            color: #fff;
        }
        #fh5co-header.navbar-fixed-top #navbar li.active a {
            background: transparent;
            background: none;
            color: #6173f4;
        }
        #fh5co-header.navbar-fixed-top #navbar li.active a span:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
        #fh5co-header .navbar-default {
            border: transparent;
            background: transparent;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            -ms-border-radius: 0px;
            border-radius: 0px;
        }
@media screen and (max-width: 768px) {
            #fh5co-header .navbar-default {
                margin-top: 0px;
                padding-right: 0px;
                padding-left: 0px;
                padding-bottom: 0px;
            }
        }
        #fh5co-header .navbar-default .brand-slogan {
            margin: 28px 0 0 15px;
            float: left;
            letter-spacing: 2px;
            color: #adadad;
        }
        #fh5co-header .navbar-default .brand-slogan em {
            color: #6173f4;
            font-style: normal;
        }
        #fh5co-header a {
            -webkit-transition: 0s;
            -o-transition: 0s;
            transition: 0s;
        }

        .section-heading {
            float: left;
            width: 100%;
            padding-bottom: 50px;
            margin-bottom: 50px;
            clear: both;
        }
        .section-heading h2 {
            font-size: 50px;
            font-weight: 300;
            color: #444;
            text-transform: uppercase;
            position: relative;
            display: block;
            padding-bottom: 20px;
            line-height: 1.5;
        }
        .section-heading h2:after {
            content: "";
            position: absolute;
            display: block;
            width: 80px;
            height: 2px;
            background: #6173f4;
            left: 50%;
            margin-left: -40px;
            bottom: 0;
        }
@media screen and (max-width: 768px) {
            .section-heading h2 {
                font-size: 30px;
            }
        }
        .section-heading h3 {
            font-weight: 300;
            line-height: 1.5;
            color: #929292;
        }
@media screen and (max-width: 768px) {
            .section-heading h3 {
                font-size: 24px !important;
                line-height: 34px;
            }
        }

        .btn {
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
        }

        #fh5co-our-services,
        #fh5co-about-us,
        #fh5co-features,
        #fh5co-testimonials,
        #fh5co-pricing,
        #fh5co-press {
            padding: 7em 0;
        }
@media screen and (max-width: 480px) {
            #fh5co-our-services,
            #fh5co-about-us,
            #fh5co-features,
            #fh5co-testimonials,
            #fh5co-pricing,
            #fh5co-press {
                padding: 5em 0;
            }
        }

        #fh5co-testimonials {
            background: #6173f4;
        }
        #fh5co-testimonials .section-heading h2 {
            color: white;
        }
        #fh5co-testimonials .section-heading h2:after {
            background: rgba(255, 255, 255, 0.2);
        }
        #fh5co-testimonials .section-heading .subtext h3 {
            color: rgba(255, 255, 255, 0.5);
        }
        #fh5co-testimonials .box-testimony {
            margin-bottom: 2em;
            float: left;
        }
        #fh5co-testimonials .box-testimony a {
            color: rgba(255, 255, 255, 0.5);
        }
        #fh5co-testimonials .box-testimony a:hover, #fh5co-testimonials .box-testimony a:focus, #fh5co-testimonials .box-testimony a:active {
            color: white;
            text-decoration: none;
        }
        #fh5co-testimonials .box-testimony blockquote {
            padding-left: 0;
            border-left: none;
            padding: 40px;
            background: #fff;
            position: relative;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
        }
        #fh5co-testimonials .box-testimony blockquote:after {
            content: "";
            position: absolute;
            top: 100%;
            left: 40px;
            border-top: 15px solid black;
            border-top-color: #fff;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
        }
        #fh5co-testimonials .box-testimony blockquote .quote {
            position: absolute;
            top: 0;
            left: 10px;
            text-align: center;
            font-size: 30px;
            line-height: 0;
            display: table;
            color: #fff;
            width: 56px;
            height: 56px;
            margin-top: -30px;
            background: #6173f4;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
        }
        #fh5co-testimonials .box-testimony blockquot.........完整代码请登录后点击上方下载按钮下载查看