pc端的企業網站（IT修真院test8）詳解1-1

標籤：分享   tom   企業網站   屬性   next   footer   自適應高度   eric   was   

這任務需求我們使用推特的前端架構bootstrap來實現。先放psd圖。

上傳這些圖片也蠻大的。為此我使用office picture manager壓縮了圖片。

方法：alt+p+o，然後tab+下方按鈕選中用於網頁，點擊儲存就ok

 

一。還原含有“50萬年薪”的psd靜態頁面

先思考：

發現1.三張psd圖的頭部尾部的設定是一樣的，可以抽離出來，弄成

g-header,g-content,g-footer

這命名符合我另外一篇文章：css樣式書寫規範+特殊符號http://www.cnblogs.com/hewasdrunk/p/7168862.html，有興趣的可以翻看。

發現2.content中第一個頁面模組是個輪播圖，可以通過bootstrap輪播圖外掛程式實現。

發現3.content裡2~6模組都是一行均分幾個子集，可以通過bootstrap柵格系統實現。

好的，宏觀思考ok，那麼問題來了。

問題1.怎麼實現footer“永遠沉底”?

方法1：使用css3的flex布局

核心代碼如下：

html{    height:100%;    /*將html 和 body 元素的高度設定為100%，使其充滿整個螢幕。*/    /*這裡還要說明一下：html下的body一般會有或多或少的margin，body的高度不是100%的。*/}body{    display:flex;    flex-direction:column;    height:100%;    /*將html 和 body 元素的高度設定為100%，使其充滿整個螢幕。這裡body：height：100%是繼承html的高度*/    /*將 body 的 display 屬性設定為 flex, 然後將方向屬性設定為列,*/}/*我們希望 header 和footer 只佔用他們應該佔用的空間，將剩餘的空間全部交給主體內容地區*/.g-header{    flex:0 0 auto;}.g-content{    flex: 1 0 auto;    /*將 flex-grow 設定為1，該元素會佔用全部可使用空間*/    /*而其他元素該屬性值為0，因此不會得到多餘的空間*/    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */}.g-footer{    flex: 0 0 auto;}

方法二：使用postion定位

.g-footer-f{    position: fixed;bottom:0;    width:100%;    min-height: 5rem;/*此方法通過position固定在瀏覽器下方，但是以一種浮動在上層的效果出現的。*//*所以上一個緊挨的並列盒子，即g-content盒子的內容就會有一部分顯示不全。被遮擋了。*/ /*而這種特性也被用於實現footer底層樣式透明，footer裡的按鈕不透明。*//*而實現內容不遮擋，只要在g-content的底部新增一個含高度的空div就完成。*/}<div class="g-content">    <div class="pull-height"></div></div><div class="g-footer-f">    <div class="footer-bg"></div>     <a href="test7-3.html"><button class="nav-fl bgfb">再來一局</button></a>    <a href=""><button class="nav-fr bgf6">上傳分享</button></a></div>.footer-bg{    height:5rem;    /*只要再給一個層，然後給個跟父盒子一樣高的高度就可以實現底層透明，上層不透明*/    background:#29BDE0;    filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;    /*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;實現透明效果*/}.pull-height{    height:5rem;}

問題2.怎麼實現bootstrap輪播圖”?

我是直接在webstrom上建立bootstrap項目的。我還發現一個問題：就是本地引入bootstrap架構的代碼實現不了功能。

最後我還是決定使用外部連結

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">放</head>標籤裡頭而兩外兩段scritp不能亂順序，放在</html>標籤後<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>之所以放在末尾是防止這兩段代碼影響html初始載入的格局

好了，載入完架構後，輪播外掛程式的代碼格式比較定式的，記住就好。

代碼如下：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">    <!--底部導航點。。。-->    <ol class="carousel-indicators">        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>        <li data-target="#carousel-example-generic" data-slide-to="1"></li>        <li data-target="#carousel-example-generic" data-slide-to="2"></li>    </ol>    <!--輪播廣告內容-->    <div class="carousel-inner" role="listbox">        <div class="item active">            <img src="img/test8-1/Image1.png">        </div>        <div class="item">            <img src="img/test8-1/Image2.png">        </div>        <div class="item">            <img src="img/test8-1/Image3.png">        </div>    </div>    <!--左右箭頭-->    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">        <span class="glyphicon glyphicon-chevron-left"></span>        <pan class="sr-only">previous</span>    </a>    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">        <span class="glyphicon glyphicon-chevron-right"></span>        <pan class="sr-only">Next</span>    </a>

但是我們不單單滿足這個實現，第一張圖的文字我們不通過ps_cc來實現。那麼怎麼通過html+css來實現呢？

我首先想到的是“圖層postion定位”

關鍵代碼：

.s-pos-center{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);}css作用於文字<span>盒子裡，兩個特點：1.不必知道“寬高度”。2.它是一種圖層的形式覆蓋在父盒子上，且無視兄弟姐妹盒子。

同時也順便複習其他的水平垂直置中方法，並作比較

第一種，通過text-align + line-height實現inline和inline-block元素的水平垂直置中（牛奶和果凍）

<style>        .s-lineheight-center{            text-align:center;            line-height:300px;        }        .test{            width:300px;            height:300px;        }        .test{            background:#5fc0cd;        }        .t-color-damage{            background:pink;        }    </style></head><body><div class="test s-lineheight-center"><span class="t-color-damage">元素</span>    <img src="img/test8-1/pic.png">    <p>block元素</p></div>

結果顯示css是作用於父盒子裡，通過父盒子操作子項目水平垂直置中。

特點：

1.必須知道高度的準確數值，讓盒子高度等於行框高度，實際上是元素底線重疊在父盒子的中線上。它是以犧牲上下行框，即犧牲父盒子的上下padding來實現的。所以img圖片也沒有實現置中效果。

2。裡面要置中的子項目會彼此擠壓，共同佔據中間位置。3.不適合塊元素。圖中p標籤脫離了test父盒子。

3.文字的中線重疊父盒子中線，img只是底線重疊父盒子中線。

所以一般是用於父盒子只有一行文字元素的的子項目垂直置中。

 

第二種，通過display：table-cell+text-align +vertical-align：middle實現三類元素的水平垂直置中（牛奶，果凍，堅果）

<style>        .s-lineheight-center{            display:table-cell;            text-align:center;            vertical-align: middle;        }        .test{            width:200px;            height:400px;        }        .test{            background:#5fc0cd;        }        .t-color-damage{            background:pink;        }    </style></head><body><div class="test s-lineheight-center">    <span class="t-color-damage">元素</span>    <img src="img/test8-1/pic.png">    <p>block元素</p>    <span>inlink</span></div>

這種方法也是作用於父盒子div，通過三個css規範子項目位置。

特點：

1。高度調小時，子項目自適應高度，而且它本身有一個最小高度存在。同時父盒子的塊元素雖然會換行，但是不會離開父盒子。（感覺寬高影響不大，不知道要不要高度。暫時是元素的內容寬高）

2。關於img置中的問題：（1。單獨img時，可以實現水平垂直置中。2。img+快元素如p為子項目時，會以他們兩的高的中線疊加在父盒子div的中線上。所以一般的書本+書名可以用這種方法實現。3。img+行內元素為子項目時，會以他們兩的寬度的中線水平在父盒子div的中線上。行內元素的底線重疊img底線。效果就是文字位於img左下角或右下角。

 

第三種，通過display：flex+jc+ai 實現三類元素的水平垂直置中（牛奶，果凍，堅果）

<title>水平置中</title>
    <style>
        .s-lineheight-center{
          display:flex;
          justify-content: center;
          align-items: center;
        }
        .test{
            width:200px;
            height:400px;
        }
        .test{
            background:#5fc0cd;
        }
        .t-color-danger{
            background:pink;
        }
        .t-height-primary{
            height:100px;
        }

    </style>
</head>
<body>
<div class="test s-lineheight-center">
    <span class="t-color-danger">元素</span>
    <img src="img/test8-1/pic.png">
    <p class="t-height-primary">block元素</p>
    <span>inlink</span>
</div>

 

 

這種方法也是作用於父盒子div，通過三個css規範子項目位置。

特點：1.如果不指定寬高，寬度會以100%body展現。高度為內容高。

2.block元素不再獨佔一行。而是於以inline-block的身份存在。

3.當寬度指定數值過小時，每個元素會以字串的形式自動換行。同時子項目會超出父盒子。

4.子項目兄弟們的總寬度的中線會重疊父盒子的中線。文字的中線和圖片的中線重疊，也重疊父盒子中線。

 

今天就總結那麼多。

 

pc端的企業網站（IT修真院test8）詳解1-1