css面試題 九宮格

逛部落格時看到一css面試題，感覺還是比較經典的，所以動手做了一下

來自一淘的 web 前端的面試題，題目要求如下：

使用 html+css 實現如圖布局，border-width:5px，格仔大小是 50px*50px，hover時邊框變成紅色，需要考慮 ie6+ 和語義化的結構。

題目不難，主要還是考察面試者對 css 靈活運用程度。

檢視demo:

結構：

<

ul class
="box"
>
<
li><
a href
="">1
a>
li>
<
li><
a href
="">2
a>
li>
<
li><
a href
="">3
a>
li>
<
li><
a href
="">4
a>
li>
<
li><
a href
="">5
a>
li>
<
li><
a href
="">6
a>
li>
<
li><
a href
="">7
a>
li>
<
li><
a href
="">8
a>
li>
<
li><
a href
="">9
a>
li>
ul>

bodybody,ul,li,a.box.box li.box a.box a:hover

九宮格布局

2009 08 25 15 15 27 九宮格是一種比較古老的設計，它最基本的表現其實就像是乙個三行三列的 其實它最初是在window的c s結構中用得比較多，比如我們經常看 到軟體中的乙個窗體，其實就是乙個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在c s軟體中大量採用這種技術來布局設計。...

九宮格問題

include include stl 雙端佇列容器 include include pos.h using namespace std ofstream fout sudoku.txt deque d int lay deque d int checkout pos p,int n int sud...

九宮格排布

在我們設定ui時，肯定會遇到設定九宮格的效果 如上圖所示，我們如何讓展示出來哪？首先我們會發現 每行的的 y 值是一樣的 行數決定 y 值 每列的的 x 值是一樣的 列數決定 x 值 綜上所述 我們只要知道每張的 行數 和 列數 那麼，它的座標自然就肯定了 我們怎樣確定 行數 和 列數那？我們發現 ...