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 .........完整代码请登录后点击上方下载按钮下载查看