兩道**的css測試練習題
準備換工作了，週末在家充電，本來想封裝個外掛程式的。
但是看到個有意思的博文，原作者處理的不是很好，感覺有點意思我就研究一下。
我完成的效果預覽：
第一題：使用 html+css 實現如圖布局，border-widht 5px，乙個格仔大小是 50*50，hover時候邊框變為紅色（相容ie6+，考慮語義化的結構）
簡單分析一下：這題沒什麼好說的專案開發時經常用到的效果 a元素塊級化 :hover的時候相對定位 改變z-index
第二題：使用乙個標籤和純css 訂閱部落格 實現如圖效果，文字始終保持左邊距10px, 下邊距5px，改變字型大小（12px-50px）時，邊距保持不變，不使用 content:"訂閱部落格"，相容現代瀏覽器
其實第二題挺有意思的，需要完成兩個動畫效果：
1.
只能用乙個元素 a 如果你display:block塊級化 就不能改變文字的位置了 所以使用display:table-cell 就可以使用vertical-align:bottom
2.
文字放大動畫 用的是css3 transition
3.
滑鼠放上去有個背景顏色的改變動畫 用到了css3 animation 目前firefox還不支援
總結：1.**ued確實牛 兩道題短小精幹
2.由於各個瀏覽器的相容問題 都沒有看過css3 又走別人後面了
>css**測試練習題
title
> 6
<
style
type
="text/css"> 7
* 8h1
9a 10
11#box1 12
#box1 a 13
#box1 a:hover 14
15#box2 16
#box2:hover 17
@-webkit-keyframes 'wobble' 21
100% 24
} 25style
> 26
head
> 27
<
body
> 28
<
h1>一.使用 html+css 實現如圖布局，border-widht 5px，乙個格仔大小是 50*50，hover時候邊框變為紅色（相容ie6+，考慮語義化的結構）
h1> 29
<
img
src=""> 30
<
div
id="box1"> 31
<
a href
="#">1
a> 32
<
a href
="#">2
a> 33
<
a href
="#">3
a> 34
<
a href
="#">4
a> 35
<
a href
="#">5
a> 36
<
a href
="#">6
a> 37
<
a href
="#">7
a> 38
<
a href
="#">8
a> 39
<
a href
="#">9
a> 40
div> 41
42 43
<
h1>二.使用乙個標籤和純css a href="#" title="訂閱部落格" 訂閱部落格 a 實現如圖效果，文字始終保持左邊距10px, 下邊距5px，改變字型大小（12px-50px）時，邊距保持不變，不使用 content:"訂閱部落格"，相容現代瀏覽器
h1> 44
<
img
src=""> 45
46<
a href
="#"
id="box2"
title="
訂閱部落格">訂閱部落格
a> 47
48body
> 49
html
>
小白第一天 兩個視窗之間的跳轉
做了兩個簡單的窗體，分別是form1和form2.form1是用來登陸的視窗，由於沒有連線資料庫，所以只對特定的一組賬號和密碼 admin，qazwsx 做判斷，若正確，則跳轉到form2視窗，若不成功，則報錯。至於form1怎麼呼叫form2，則是通過以下語句 form2 frm new form...
面試題37 兩個鍊錶的第乙個公共結點
題目 輸入兩個鍊錶，找出它們的第乙個公共節點。鍊錶的定義如下 struct listnode int m nkey listnode m pnext 演算法思路 首先遍歷兩個鍊錶得到它們的長度，就能知道哪個鍊錶比較長，以及長的鍊錶比短的鍊錶多幾個節點。在第二次遍歷的時候，先在較長的節點上走若干步，接...
面試題37 兩個鍊錶的第乙個公共結點
面試題37 兩個鍊錶的第乙個公共結點 題目 輸入兩個鍊錶，找出他們的第乙個公共結點。從定義可以看出，這是單向鍊錶。如果有公共結點，之後他們的所有結點都是重合的，不可能分叉，拓撲形狀像乙個y而不是x。思路1 可以把兩個鍊錶的結點放入兩個棧，這樣兩個鍊錶的尾結點就是棧頂，接下來比較棧頂結點是否相同。直到...