CSS實現頁面九宮格布局的簡單示範

最後更新：2018-06-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

九宮格布局在製作一些Web App時還是經常可以用到的,這裡我們以一個大概的結構樣本來作CSS實現頁面九宮格布局的簡單示範,不過需要注意IE6下的相容性問題.

一、：

三、布局二（各瀏覽器安全色性良好）

CSS Code複製內容到剪貼簿

<!DOCTYPE html>   <html>   <head>   <meta charset="utf-8">   <title>九宮格布局</title>   <meta http-equiv="X-UA-Compatible" content="IE=edge">   </head>   <body>   <html>   <head>   <style type="text/css">   body{margin:0;padding:0;}   .grid_wrapper{    width: 170px;    height: 170px;    margin-left: auto;    margin-right: auto;   }   .grid{    margin-left: 5px;    margin-top: 5px;   }   .grid:after{    content: ".";    display: block;    line-height: 0;    height: 0;    clear: both;    visibility: hidden;    overflow: hidden;   }   .grid a,.grid a:visited{    float: left;    display: inline;    border: 5px solid #ccc;    width: 50px;    height: 50px;    text-align: center;    line-height: 50px;    margin-left: -5px;    margin-top: -5px;    position: relative;    z-index: 1;   }   .grid a:hover{    border-color: #f00;    z-index: 2;   }   </style>   </head>   <body>   <p class="grid_wrapper">    <p class="grid">     <a href="#" title="1">1</a>     <a href="#" title="2">2</a>     <a href="#" title="3">3</a>     <a href="#" title="4">4</a>     <a href="#" title="5">5</a>     <a href="#" title="6">6</a>     <a href="#" title="7">7</a>     <a href="#" title="8">8</a>     <a href="#" title="9">9</a>    </p>   </p>   </body>   </html>

IE6下相容有問題，如下：

三、布局二（各瀏覽器安全色性良好）

CSS Code複製內容到剪貼簿

<!DOCTYPE html>   <html>   <head>   <meta charset="utf-8">   <title>九宮格布局</title>   <meta http-equiv="X-UA-Compatible" content="IE=edge">   </head>   <body>   <html>   <head>   <style type="text/css">   body,ul,li{margin:0;padding:0;}   .grid_wrapper{    width: 170px;    height: 170px;    margin-left: auto;    margin-right: auto;   }   .grid{    margin-left: 5px;    margin-top: 5px;    list-style-type:none;   }   .grid:after{    content: ".";    display: block;    line-height: 0;    width:0;    height: 0;    clear: both;    visibility: hidden;    overflow: hidden;   }   .grid li{float:left;line-height: 50px;}   .grid li a,.grid li a:visited{    display:block;    border: 5px solid #ccc;    width: 50px;    height: 50px;    text-align: center;    margin-left: -5px;    margin-top: -5px;    position: relative;    z-index: 1;   }   .grid li a:hover{    border-color: #f00;    z-index: 2;   }   </style>   </head>   <body>   <p class="grid_wrapper">    <ul class="grid">     <li><a href="#" title="1">1</a></li>     <li><a href="#" title="2">2</a></li>     <li><a href="#" title="3">3</a></li>     <li><a href="#" title="4">4</a></li>     <li><a href="#" title="5">5</a></li>     <li><a href="#" title="6">6</a></li>     <li><a href="#" title="7">7</a></li>     <li><a href="#" title="8">8</a></li>     <li><a href="#" title="9">9</a></li>    </ul>   </p>   </body>   </html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More