廣告贊助

[摘要]

  在這裡我想實作一個簡單的有頭有身有尾的基本網頁版形,其身體部面包含contentsidebar兩個欄位。在這個實作的重點是網頁版型的HTML結構以及網頁置中的CSS樣式。

[頁面]

Code

<!DOCTYPE html>

<html>

    <head>

        <title> Layout 1: float test</title>

        <style>

            body {background-color: #f1f1f1;}

 

            .container {

                width : 80%;

                margin-right: auto;

                margin-left: auto;

            }

 

            .site-header {background-color: #30a9de;}

            .site-main {background-color: #fff;}

            .site-footer {background-color: #607d8b;}

 

            .site-header-inner {

                height: 100px;

            }

            .site-footer-inner {

                height: 100px;

            }

 

            .site-main-inner::after {

                content: "";

                display: block/**必要**/

                clear: both;

            }

 

            .content {

                height: 400px;

                width: 68%;

                background-color: #ddd;

                float: left;

            }

            .sidebar {

                height: 400px;

                width: 32%;

                background-color: #ccc;

                float: right;

            }

 

        </style>

    </head>

    <body>

        <header class="container site-header">

            <div class="site-header-inner"></div>

        </header>

        <div class="container site-main">

            <div class="site-main-inner">

                <div class="content">content</div>

                <div class="sidebar">sidebar</div>

            </div>

        </div>

        <footer class="container site-footer">

            <div class="site-footer-inner"></div>

        </footer>

    </body>

</html>

 

 

[基本版型]

  就是把HTML分成三大塊:headermain divfooter。而後在每一區塊之下再用一個div class=”*-inner” 的內容區塊來製作真正的每一區塊第一層之內容。其中main div區塊由於內容包含兩大子區塊:contentsidebar,所以進一步在site-main-inner div底下放置第二層區塊 div contentdiv sidebar

 

<body>

        <header class="container site-header">

            <div class="site-header-inner"></div>

        </header>

        <div class="container site-main">

            <div class="site-main-inner">

                <div class="content">content</div>

                <div class="sidebar">sidebar</div>

            </div>

        </div>

        <footer class="container site-footer">

            <div class="site-footer-inner"></div>

        </footer>

</body>

 

[頁面置中]

  頁面置中只要在header . main . footer 三個區塊加入一個class container的置中類別,即可實現。該CSS Class透過設定margin-left and margin-right auto將頁面整體置中。另外規範頁面為佔Browser80%page

 

            .container {

                width : 80%;

                margin-right: auto;

                margin-left: auto;

            }

 

[利用float排列contentsidebar

  div content    =>    float : left   向左浮動

  div sidebar    =>    float : left   向右浮動

  由於 contentsidebar都是浮動的,所以div site-main-inner講不佔任何空間,同樣其父層div:site-main 也不佔任何空間,故footer區塊將往上移與div:site-main 重疊。

 

            .content {

                height: 400px;

                width: 68%;

                background-color: #ddd;

                float: left;

            }

            .sidebar {

                height: 400px;

                width: 32%;

                background-color: #ccc;

                float: right;

            }

 

[用clearfix清除float

  這邊使用的是div:site-main-inner的偽元素::after,將之display設為block,則它將成為一個真正存在的元素撐起site-main區塊,但同時得clear float: both,才能解決重疊問題。

 

            .site-main-inner::after {

                content: "";

                display: block/**必要**/

                clear: both;

            }

 

2018421日星期六

文章標籤
創作者介紹
創作者 jackterrylau 的頭像
jackterrylau

儒道哲學的浪漫人生

jackterrylau 發表在 痞客邦 留言(0) 人氣()