程式原始碼
在ul中我們只應用了乙個名為gallery的樣式，接下來的css都將針對#gallery及其下級元素進行定義。本例中的相簿都有相同的尺寸320×240，背景的尺寸為495×240。注意這裡背景圖的寬度是根據本例的需要精確定義的，至於如何計算會在例子結束的時候進行說明。現在在瀏覽器中顯示的僅僅是七張帶圓點和預設鏈結邊框的，接下來看一下#gallery中針對ul的樣式設定：
程式原始碼 #gallery
ul元素的寬和高與背景圖的尺寸保持一致，並設定了1px的外邊框。本例中通過margin將整個相簿居中，消除內填充以及預設的列表圓點符號。原文中#gallery還有一條overflow:hidden;語句，我把它去掉之後，相簿效果在ie6和ff中依然正常，不知是不是在其它瀏覽器中會出現bug，若你了解個中因由，希望告知本站以及時糾正。
接下來將列表專案設定為左浮動：
程式原始碼 #gallery li
這個樣式現在不會對瀏覽器的解析效果產生任何影響，但它是必須的，它確保了分置在各個列表項中的顯示在同一行，你可以在整體效果完成之後刪除這行**比較一下差別。接下來是一組很關鍵的css定義，針對li中的鏈結標籤a：
程式原始碼 #gallery li a
首先將鏈結物件轉換為塊級元素，以便為其設定寬和高，這裡的寬度28px即縮圖的擷取區域，相簿中的最好能進行一些預處理，除了之前提到的尺寸規格之外，還可以看看能否在這28×240的縮略區內盡可能多的傳遞資訊。這裡面最重要的一行**是overflow: hidden; ，它讓的可視部分限制在a標籤的寬高範圍之內。另外樣式中還定義了滑鼠指標的外觀，並為每個鏈結區域設定了1px的白色右邊框，讓其中的之間具有更明顯的視覺分隔。
程式原始碼 #gallery li a img
程式原始碼 #gallery li a:hover
css中我們只要簡單的改變已經轉換為塊級元素的a標籤的寬度就可以了。
最後來說明一下ul的寬度為什麼要設定為495px。結合縮圖和大圖瀏覽的功能，相簿整體的寬度至少應該是一張大圖加上六張小圖，即320+28×6=488px，而在設計的過程中，我們還未每個a標籤新增了1px的右邊框，也就是每張都有各自1px的右邊框，所以相簿的寬度在原來的基礎上再加7px，即最後的495px。
>>>瀏覽本例最終效果<<<
化學匯報 之別開生面
今天晚上作為攝像人員參加了一場別開生面的化學匯報演出。之所以使用 別開生面 這個詞，是因為這場匯報演出真是深深地觸動了我的心。別開生面 別開生面是乙個漢語詞彙，拼音為bie kai sheng mian，指新的面貌。原指畫像經重新繪製，面目一新，後比喻另外開闢一種新局面或創造出一種新的風格式樣。現在...
程式設計師別開生面的職業之路
程式設計師行業都是年輕人的世界，那麼我們這些老輩該何去何從呢？其實對於很多人來說，在學程式開發培訓之前，就對自己的職業生涯做過規劃，我們的職業路也是別開生面的。下面來看看程式設計師們到達一定一定年齡後的是怎樣規劃自己的職業的？穩健路線 首先，有一些程式設計師 肯定沒有拋棄自己所熟悉的技能。在某些領域...
純css實現箭頭
很久之前收集的，忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零，且其他邊為透明顏色時，可以形...