今天在百度搜尋引擎發現了“CSS+DIV”關鍵詞排名從第一頁跌到第四頁，感覺到蠻可惜的。究其原因應該是好久沒有更新依葫蘆畫瓢學CSS+DIV系列文章造成的，原來計劃教程可以與我修改網易版首頁共同更新，但首頁提前完成了上線了，但還不能完全適應Firefox瀏覽器，在辛苦修改中。求教了一些CSS+DIV高手，他們給我的答案：從最簡單的CSS屬性學起。將學習筆記整理出來，與更多的CSS+DIV愛好者共同成長。
在網易首頁改版過程中，在div層套入border邊框是最常用的，它就像如同表格，可以將樣式、文字、圖片封裝起來。border邊框屬性主要學習邊框風格屬性(border-style)、邊框寬度屬性(border-width)、邊框顏色屬性(border-color)，這三個屬性可以對整個邊框或者單邊架構多樣化設定。通過解剖學習的方法，將每一種屬性分解出來，更好將基本屬性學到位，學會簡單的運用。
1.邊框風格屬性(border-style)，用來設定上下左右邊框的風格，具體參數值有：
none (沒有邊框)、dotted (點線式邊框)、dashed (破折線式邊框)、solid (直線式邊框)、double (雙線式邊框)、groove (槽線式邊框)、ridge(脊線式邊框)、inset (內嵌效果的邊框)、outset (突起效果的邊框)，下面以最為常用的直線式邊框為例，代碼參考寫法如下：
<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-style:solid;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09)：強化border屬性</div>
</body>
</html>
2.邊框寬度屬性(border-width)，用來設定上下左右邊框的寬度，具體參數值有：
medium (是預設值)、thin (比medium細)、thick (比medium粗)、用長度單位定值；可用絕對長度單位(cm, mm, in, pt, pc)或者用相對長度單位 (em, ex, px)。我比較喜歡用px的單位。以直線式1像素邊框為例，代碼參考寫法如下：
<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-style:solid; border-width:1px;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09)：強化border屬性</div>
</body>
</html>
3.邊框顏色屬性(border-color)，用來設定上下左右邊框的顏色，顏色值可參照調色盤，樣本以直線式1像素紅色邊框為例，代碼參考寫法如下：
<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-style:solid; border-width:1px; border-color:red;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09)：強化border屬性</div>
</body>
</html>
將這些三個屬性分解出來應該很簡單的，最後一個屬性樣本很容易將前面兩個屬性結合了。其實那樣的寫法過於詳細，可用綜合寫法對其代碼簡化。
.apple {border-style:solid; border-width:1px; border-color:red;}
寫成<span style=”color:Red”>.apple {border:1px solid red;}</span>
以上border邊框屬性是上下左右四個邊框統一設定，當然也可分開設定。如右邊框，只要將參數值變為：border-right, border-right-width, border-right-style, border-right-color。現舉例如下，同樣運用綜合寫法，
<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-top:1px solid red; border-right:2px double blue; border-bottom:1px solid red; border-left:2px double blue;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09)：強化border屬性</div>
</body>
</html>
強化border屬性，這是我自學時覺得應該掌握一些基礎性的知識，因為這些代碼最關鍵還是要學會運用，光看代碼是沒有用的，要學會自己去寫代碼，去發現其中錯誤的寫法，糾正一些常規的寫法，這樣才能加快手工寫入代碼的進程。下一課時，準備分享一些font屬性個人學習筆記的心得！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
