css自适应公司官网布局效果-html代码-BFW代码库

代码语言：html
代码描述：css自适应公司官网布局效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta charset="utf-8">


    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
    <style>
        /*
* Design by Blaz Robar: https://goo.gl/1aAmvV
* Text by Alexandra K (ff0004-red), except default Lorem Ipsum :)
*/
      body{
          padding: 0;
          margin: 0;
      }

        /* GENERAL STYLING */

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }

        .h-p-group {
            width: 100%;
            margin-bottom: 87px;
        }

        .h-p-group h2,
        .h-p-group p {
            font-family: 'Source Sans Pro', sans-serif;
            text-align: center;
        }

        .h-p-group h2 {
            margin: 0;
            padding-top: 50px;
            /*100*/
            font-weight: 700;
            font-size: 32px;
        }

        .h-p-group p {
            margin: 15px 0 0 0;
            font-weight: 400;
            font-size: 20px;
            color: #adadad;
        }

        address {
            font-style: normal;
        }


        /*--------------------------------------------*/


        /* #HEAD */

        .head {
            height: 862px;
            /*background-color: #fcdb00;*/
            background-image: url("http://repo.bfw.wiki/bfwrepo/image/5dec9f978faf3.png");
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
        }

        .head-container {
            height: 862px;
            width: 940px;
            margin: 0 auto;
        }

        header {
            height: 62px;
            width: 100%;
            /*940px*/
            padding-top: 52px;
        }


        /* #logo */

        .logo {
            float: left;
            display: inline-block;
            margin-left: 400px;
        }

        .logo a {
            display: inline-block;
            float: left;
            margin: 10px 10px 0 0;
        }

        .logo p {
            display: inline-block;
            float: right;
            margin: 10px 0 0 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 700;
            font-size: 30px;
        }


        /* #socials */

        .socials {
            display: inline-block;
            float: right;

            margin-top: 30px;
        }

        .socials ul {
            margin: 0;
            padding: 0;
        }

        .socials ul li {
            display: inline-block;
            margin-right: 19px;
        }

        .socials ul li a {
            color: white;
        }

        .socials ul li a:hover {
            color: white;
        }


        /* #hero */

        .hero {
            height: 748px;
            width: 940px;
        }

        .hero h1 {
            margin: 0;
            padding-top: 242px;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            /*color: #ffffff;*/
        }

        .hero p {
            margin: 30px 0 0 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 20px;
            font-weight: 400;
            text-align: center;
        }

        .hero button {
            display: block;
            margin: 40px auto 176px auto;
            padding: 16px 72px;
            border: 1px solid #000000;
            outline: none;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 22px;
            font-weight: 700;
            text-transform: uppercase;
            background-color: transparent;
            cursor: pointer;
        }

        .hero button:hover {
            background-color: #898989;
        }

        .hero a {
            display: block;
            width: 20px;
            margin: 0 auto;
            padding-bottom: 52px;
            color: #000000;
        }


        /*--------------------------------------------*/


        /*--------------------------------------------*/


        /* #SERVICES SECTION */

        .services-container {
            /*height: 650px; 760*/
            width: 940px;
            margin: 0 auto;
        }

        .services-block {
            width: 100%;
        }

        .services-block-box {
            display: inline-block;
            /*width: 300px;*/
            width: 32%;
        }

        .marg-top {
            margin-top: 72px;
        }

        /*.marg-left {
  margin-left: 20px;
}*/

        .services-block-box h3 {
            display: inline-block;
            margin: 0 0 15px 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 22px;
            font-weight: 700;
        }

        .services-block-box .fa {
            display: block;
            float: left;
        }

        .services-block-box .fa-tablet,
        .services-block-box .fa-lemon-o {
            margin-right: 30px;
        }

        .services-block-box .fa-folder-o {
            margin-right: 25px;
        }

        .services-block-box .fa-code {
            margin-right: 5px;
        }

        .services-block-box .fa-envelope-o {
            margin-right: 20px;
        }

        .services-block-box .fa-bookmark-o {
            margin-right: 25px;
        }

        .services-block-box p {
            display: inline-block;
            margin: 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: #adadad;
        }


        /*--------------------------------------------*/


        /*--------------------------------------------*/


        /* #PRICING SECTION */

        .pricing-container {
            /*height: 750px; 850*/
            width: 940px;
            margin: 0 auto;
        }

        .price-block {
            display: inline-block;
            width: 32%;
            margin-bottom: 70px;
        }

        .price-block h3 {
            margin: 25px 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
        }

        .price-block p:nth-child(3) {
            margin: 0 0 30px 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #adadad;
            text-align: center;
        }

        .price-block button {
            display: block;
            height: 47px;
            width: 141px;
            margin: 30px auto 0 auto;
            border: 2px solid #000000;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            background-color: transparent;
            cursor: pointer;
            overflow: hidden;
        }

        .price-block button:hover {
            color: #fc8200;
        }

        .price-block img {
            display: block;
            margin: 10px auto;
        }

        .left-block p:nth-child(4) {
            margin: 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 32px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
        }

        .center-block p:nth-child(4),
        .right-block p:nth-child(4) {
            margin: 0 auto;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 32px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
        }

        .left-block p:nth-child(6) {
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: #adadad;
            text-align: center;
        }

        .center-block p:nth-child(6),
        .right-block p:nth-child(6) {
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: #adadad;
            text-align: center;
        }

        p.fa-usd {
            margin-left: 55px;
        }

        p.fa-usd {
            margin-left: 45px;
        }


        /*--------------------------------------------*/


        /*--------------------------------------------*/


        /* #PORTFOLIO SECTION */

        .portfolio-container {
            /*height: 960px;  1030*/
            width: 940px;
            margin: 0 auto;
        }

        .positioning-container {
            display: inline-block;
            height: 350px;
            width: 24%;
            overflow: hidden;
        }

        .img-icon-container {
            position: relative;
            height: 220px;
            width: 220px;
            margin: 0 auto 0 auto;
        }

        .row-img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .row-1icon {
            display: inline-block;
            position: absolute;
            top: 88%;
            margin-right: 85%;
            margin-left: 10%;
        }

        .row-2icon {
            display: inline-block;
            position: absolute;
            top: 88%;
            margin-right: 10%;
            margin-left: 85%;
        }

        .fa-eye {
            color: #ffffff;
        }

        .fa-clock-o {
            color: #ffffff;
        }

        .positioning-container h3,
        .positioning-container p {
            font-family: 'Source Sans Pro', sans-serif;
            text-align: center;
        }

        .positioning-container h3 {
            margin: 20px 0 12px 0;
            font-size: 22px;
            font-weight: 700;
        }

        .positioning-container p {
            margin: 0 0 50px 0;
            font-size: 16px;
            font-weight: 400;
            color: #adadad;
        }


        /*--------------------------------------------*/


        /*--------------------------------------------*/


        /* #TEAM SECTION */

        .team-block-container {
            /*height: 650px; 750*/
            width: 940px;
            margin: 0 auto;
        }

        .team-block {
            display: inline-block;
            width: 24%;
            margin-bottom: 80px;
        }

        .team-block img {
            display: block;
            margin: 0 auto;
        }

        .team-block h4,
        .team-block h5,
        .team-block p {
            font-family: 'Source Sans Pro', sans-serif;
            text-align: center;
        }

        .team-block h5,
        .team-block p {
            font-weight: 400;
        }

        .team-block h4 {
            font-size: 22px;
            font-weight: 400;
            margin: 40px 0 10px 0;
        }

        .team-block h5 {
            margin: 0;
            margin: 0 0 15px 0;
            font-size: 16px;
            color: #adadad;
        }

        .team-block p {
            margin: 0 0 12px 0;
            font-size: 14px;
        }

        .team-block ul {
            display: block;
            padding: 0;
            text-align: center;
        }

        .team-block ul li {
            display: inline-block;
        }

        .team-block a {
            margin-right: 12px;
            color: #000000;
        }

        .team-block .fa-facebook:hover {
            color: #3b5998;
        }

        .team-block .fa-twitter:hover {
            color: #00aced;
        }

        .fa-linkedin:hover {
            color: #007bb6;
        }


        /*--------------------------------------------*/


        /*--------------------------------------------*/


        /* #DATA (STATS & TESTIMONIALS) SECTION */

        .data-container {
            /*height: 800px; 900*/
            width: 940px;
            margin: 0 auto;
        }


        /* #stats */

        .stats-container {
            /*width: 660px;*/
            width: 70%;
            margin: 0 auto 75px auto;
        }

        .stats-block {
            display: inline-block;
            width: 24%;
            text-align: center;
        }

        .stats-block .fa-puzzle-piece {
            display: block;
            /*margin-left: 40%;*/
            margin-left: 10%;
        }

        .stats-block .fa-cloud-download {
            display: block;
            /*margin-left: 34%;*/
        }

        .stats-block .fa-users {
            display: block;
            /*margin-left: 36%;*/
        }

        .stats-block .fa-thumbs-up {
            display: block;
            /*margin-left: 37%;*/
        }

        .stats-block h4,
        .stats-block h5 {
            font-family: 'Source Sans Pro', sans-serif;
            text-align: center;
        }

        .stats-block h4 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
        }

        .stats-block h5 {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            color: #adadad;
        }


        /* #testimonials */

        .customer-info {
            height: 190px;
            /*width: 940px;*/
            width: 100%;
        }

        .customer-info img {
            display: block;
            margin: 0 auto 18px auto;
        }

        .customer-info h4,
        .customer-info h5 {
            text-align: center;
        }

        .customer-info h4 {
            margin: 0 0 12px 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 22px;
            font-weight: 400;
        }

        .customer-info h5 {
            margin: 0;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: #adadad;
        }

        .customer-quote {
            position: relative;
            height: 180px;
            /*width: 624px;*/
            width: 60%;
            margin: 25px auto 0 auto;
        }

        .fa-quote-left,
        .fa-quote-right {
            color: #898989;
        }

        .fa-quote-right {
            position: absolute;
            bottom: 60%;
            left: 95%;
        }

        .fa-quote-left {
            position: absolute;
            top: 10%;
        }

        blockquote {
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 20px;
            font-weight: 400;
            color: #adadad;
            text-align: center;
        }

        /*--------------------------------------------*/

        /*--------------------------------------------*/


        /* #FEEDBACK SECTION */

        .feedback-container {
            /*height: 950px; 990*/
            width: 940px;
            margin: 0 auto;
        }


        /* #contacts */

        .contacts-container {
            /*width: 640px;*/
            width: 70%;
            margin: 0 auto 42px auto;
        }

        .contacts-block h4,
        .contacts-block a,
        .contacts-block address,
        .contact-form input,
        .textarea-positioning textarea {
            font-family: 'Source Sans Pro', sans-serif;
        }

        .contacts-block {
            display: inline-block;
            height: 140px;
            width: 32%;
            vertical-align: top;
        }

        .contacts-block h4 {
            margin: 21px 0 0 0;
            font-size: 24px;
            font-weight: 400;
            text-align: center;
        }

        .contacts-block a {
            display: block;
        }

        .contacts-block a:hover {
            color: #fcdb00;
        }

        .contacts-block address,
        .contacts-block a {
            font-size: 14px;
            font-weight: 400;
            color: #adadad;
            text-align: center;
        }

        .fa.fa-map-marker {
            margin: 0 auto;
            display: block;
            text-align: center;
        }

        .fa.fa-envelope {
            margin: 0 auto;
            display: block;
            text-align: center;
        }

        .fa.fa-phone-square {
            margin: 0 auto;
            display: block;
            text-align: center;
        }


        /* #contact form */

        .contact-form {
            padding-bottom: 50px;
            width: 100%;
        }

        .contact-form form {
            margin: 0 auto;
        }

        .contact-form input,
        .textarea-positioning textarea {
            display: block;
            outline: none;
        }

        .textarea-positioning {
            /*width: 456px;*/
            width: 50%;
            margin: 0 auto;
        }

        .contact-form input[type=text],
        .contact-form input[type=email],
        .textarea-positioning textarea {
            border: 2px solid #000000;
        }

        .textarea-positioning textarea {
            height: 179px;
            /*width: 456px;*/
            width: 100%;
            padding-top: 20px;
            padding-left: 20px;
            resize: none;
            box-sizing: border-box;
        }

        .contact-form input[type=email],
        .contact-form input[type=text] {
            height: 51px;
            /*width: 456px;*/
            width: 50%;
            margin: 0 auto 24px auto;
            padding-left: 20px;
            box-sizing: border-box;
        }

        .contact-form input[type=submit] {
            height: 53px;
            /*width: 170px;*/
            width: 20%;
            margin: 26px auto 0 auto;
            border: transparent;
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            background-color: #000000;
            cursor: pointer;
        }

        .contact-form input[type=submit]:hover {
            background-color: #696969;
        }


        /*--------------------------------------------*/


        /*--------------------------------------------*/


        /* #FOOTER */

        footer {
            background-color: #010101;
        }

        .footer-container {
            /*height: 773px;*/
            width: 940px;
            margin: 0 auto;
        }


        /* #footer form */

        .footer-form {
            padding-bottom: 40px;
            margin-bottom: 103px;
        }

        .footer-form h2,
        .footer-form p,
        .footer-form input[type=email],
        .footer-form input[type=submit] {
            font-family: 'Source Sans Pro', sans-serif;
        }

        .footer-form h2 {
            margin: 0;
            padding-top: 92px;
            font-size: 32px;
            font-weight: 700;
            text-align: center;
            color: #ffffff;
        }

        .footer-form p {
            margin: 16px 0 38px 0;
            font-size: 20px;
            font-weight: 400;
            text-align: center;
            color: #898989;
        }

        .footer-form form {
            height: 52px;
            /*width: 742px;*/
            width: 80%;
            margin: 0 auto;
        }

        .footer-form input[type=email],
        .footer-form input[type=submit] {
            outline: none;
        }

        .footer-form input[type=email] {
            float: left;
            height: 52px;
            width: 597px;
            padding-left: 22px;
            border: transparent;
            box-sizing: border-box;
        }

        .footer-form input[type=submit] {
            float: right;
            height: 52px;
            width: 140px;
            border: transparent;
            text-transform: uppercase;
            font-weight: 700;
            background-color: #ffffff;
            cursor: pointer;
            box-sizing: border-box;
        }

        .footer-form input[type=submit]:hover {
            border: none;
            background-color: #696969;
        }

        .block {
            width: 100%;
            height: 250px;

        }


        /* #footer contacts */

        .footer-contacts h5,
        .footer-contacts address,
        .footer-contacts a,
        .footer-nav ul li a {
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 16px;
            color: #ffffff;
        }

        .footer-contacts {
            float: left;
            display: inline-block;
            line-height: 1.2em;
        }

        .footer-contacts h5 {
            margin: 0;
            font-weight: 400;
        }

        .footer-contacts a {
            display: block;
            margin-top: 4px;
        }

        .footer-contacts a:hover,
        .footer-nav a:hover {
            color: #fcdb00;
        }

        /* #footer navigation */

        .footer-nav {
            display: inline-block;
            float: right;
            position: relative;
            /*height: 140px;*/
            width: 570px;
        }

        .footer-nav ul {
            display: inline-block;
            float: left;
            height: 140px;
            width: 24%;
            margin: 0;
            padding: 0;
        }

        .footer-nav ul li {
            text-align: top;
        }

        /*
* #Up-Button
*/
        #up-btn {
            position: fixed;
            bottom: 10%;
            left: 90%;
            display: none;
        }

        #up-btn .fa {
            color: #FFFF00;
        }

        #footer:hover + #up-btn {
            display: block;
        }

        #up-btn:hover {
            display: block;
            /* up-btn block isn't blinking when hovered */
        }
        /*--------------------------------------------*/

        /*
* #MEDIA QUARIES
*/

        /* for max-width 348px */
@media screen and (max-width: 348px) {
            .stats-block {
                display: block;
                width: 25%;
                margin: 0 auto 40px auto;
            }

            .stats-block .fa-thumbs-up {
                display: block;
                margin: 0 auto;
            }
        }

        /* for max-width 599px */
@media screen and (max-width: 599px) {
            .head {
                width: 100%;
                background-image: url("http://repo.bfw.wiki/bfwrepo/image/5dec9f978faf3.png");
                background-repeat: no-repeat;
                background-size: cover;
                color: white;
            }

            .head-container {
                width: 100%;
            }

            .logo {
                margin: 0 auto 0 25px;
            }

            .socials {
                margin-right: 0;
            }

            .socials ul li {
                margin-right: 40px;
            }

            .hero {
                width: 100%;
            }

            .hero h1 {
                
            }

            .hero a {
                display: none;
            }

            .services-container {
                width: 100%;
            }

            .services-block-box {
                width: 60%;
                margin: 0 auto 70px auto;
            }

            .services-block-box h3,
            .serxices-block-box p {
                display: block;
            }
            .services-block-box .fa-code {
                margin-right: 25px;
            }

            .price-block {
                margin-bottom: 90px;
            }

            .positioning-container {
                margin: 0 auto 40px auto;
            }

            .team-block {
                margin: 0 auto 60px auto;
                border-bottom: 1px solid #696969;
            }

            .stats-container,
            .customer-info,
            .feedback-container,
            .contacts-container,
            .contacts-block,
            .contact-form,
            footer,
            .footer-container,
            .textarea-positioning textarea,
            .footer-form,
            .footer-form form,
            .footer-form form input[type="email"],
            .footer-contacts,
            .portfolio-container,
            .team-block-container,
            .price-block,
            .pricing-container,
            .data-container {
                width: 100%;
            }

            .customer-quote,
            .positioning-container,
            .team-block {
                width: 80%;
            }

            .contact-form input[type="email"],
            .contact-form input[type="text"],
            .contact-form input[type="submit"],
            .textarea-positioning,
            .contact-form form {
                width: 85%;
            }

            .footer-form {
                margin-bottom: 15px;
                margin-bottom: 50px;
            }

            .footer-form form input[type="email"] {
                margin-bottom: 10px;
            }

            .footer-form form input[type="email"],
            .footer-form form input[type="submit"],
            .contacts-block,
            .footer-contacts,
            .footer-nav,
            .logo,
            .socials,
            .services-block-box,
            .positioning-container,
            .team-block {
                display: block;
            }

            .footer-form form input[type="submit"] {
                width: 50%;
                margin: 0 auto;
                float: none;
            }

            .footer-contacts {
                text-align: center;
                margin-bottom: 30px;
            }

            .footer-nav {
                width: 96%;
            }

            .footer-nav ul {
                width: 24%;
                float: left;
                height: auto;
            }

            .footer-nav ul li {
                text-align: center;
            }

            .copyright p:first-child {
                display: inline-block;
                margin: 0 0 0 10px;
            }

            #up-btn {
                left: 80%;
                bottom: 40%;
            }
        }


        /* for max-width 920px */
@media screen and (min-width: 600px) and (max-width: 950px) {
            .head {
                width: 100%;
                background-image: url("http://repo.bfw.wiki/bfwrepo/image/5dec9f978faf3.png");
                background-repeat: no-repeat;
                background-size: cover;
                color: white;
            }
            .head-container {
                width: 100%;
            }

            .logo {
                display: block;
                margin: 0 auto 0 120px;
            }

            .socials {
                display: block;
                margin-right: 50px;
            }

            .hero,
            .services-container {
                width: 100%;
            }

            .hero h1 {
                
            }

            .services-block-box {
                width: 48%;
                display: inline-block;
                margin: 0 auto 70px auto;
                padding-left: 80px;
                box-sizing: border-box;
            }

            .services-block-box .fa {
                display: block;
            }

            .services-block-box h3,
            .services-block-box p {
                display: block;
            }
            .services-block-box .fa-code {
                margin-right: 25px;
            }

            .pricing-container,
            .portfolio-container,
            .team-block-container,
            .data-container,
            .stats-container,
            .customer-info,
            .feedback-container,
            .contacts-container,
            .contact-form,
            .textarea-positioning textarea,
            footer,
            .footer-container,
            .footer-form,
            .footer-form form,
            .footer-form form input[type="email"],
            .footer-contacts {
                width: 100%;
            }

            .positioning-container,
            .team-block {
                width: 48%;
                display: inline-block;
            }

            .customer-quote {
                width: 80%;
            }

            .contact-form input[type="email"],
            .contact-form input[type="text"],
            .contact-form input[type="submit"],
            .contact-form form,
            .textarea-positioning {
                width: 85%;
            }

            .footer-form {
                margin-bottom: 15px;
                margin-bottom: 50px;
            }

            .footer-form form input[type="email"] {
                margin-bottom: 10px;
            }

            .footer-form form input[type="email"],
            .footer-form form input[type="submit"] {
                display: block;
            }

            .footer-form form input[type="submit"] {
                width: 40%;
                margin: 0 auto;
                float: none;
            }

            .footer-contacts {
                display: block;
                text-align: center;
                margin-bottom: 30px;
            }

            .footer-nav {
                display: block;
                width: 55%;
                margin: 0 auto;
                float: none;
            }

            .footer-nav ul {
                width: 24%;
                float: left;
                height: auto;
            }

            .footer-nav ul li {
    .........完整代码请登录后点击上方下载按钮下载查看