本文用css的簡單樣式來實現(xiàn)邊框、表格和三角形的頁面展示项乒，包括一些常用寫法的學(xué)習(xí)啰劲。
邊框的設(shè)置
我們先舉例實現(xiàn)，再深入探究其中的寫法檀何。
1 . 先總覽全局
需要哪些html的標(biāo)簽：
<p> <div>
需要哪些css的樣式：
邊框的設(shè)置蝇裤，其中有顏色、四周邊框的顯示和隱藏频鉴、背景顏色栓辜。
元素的居中設(shè)置
文字和邊框的距離設(shè)置
2 .寫出html
因為元素相對少，且不復(fù)雜垛孔，直接在html的body里面用div把內(nèi)容包裹起來藕甩。然后div下面再嵌套四個同級的div標(biāo)簽，這四個div里面分別嵌套一個p標(biāo)簽周荐，p標(biāo)簽里面寫入文本狭莱。具體如下：
3 .寫出css樣式
我們先把整個頁面元素全部居中僵娃，設(shè)置<body>下的子代<div class="layout">,然后css中設(shè)置其塊級元素margin=0 auto居中。如下：
其中width：600px設(shè)置整個塊級元素<div>的寬度
然后設(shè)置每個邊框之間的距離腋妙，因為每個邊框的標(biāo)簽都是有l(wèi)ayout這個類別下面的div的子代默怨，所以選擇器寫成 .layout>div即可，margin-top使外邊框的高度改變骤素，我們設(shè)置成30px匙睹。如下：
現(xiàn)在所有的段落位置就就位了，我們只要對每個段落的文本框進(jìn)行編輯就可以了济竹。設(shè)置各個包裹<p>標(biāo)簽的div類別分別為h-container痕檬、h-container style-1、h-container style-2送浊、h-container style-3梦谜。如圖：
從上圖可以看出如果對.h-container進(jìn)行樣式編輯，則可以對所有含有.h-container類別的標(biāo)簽進(jìn)行設(shè)置樣式袭景。
第一個邊框有很細(xì)的灰色的實線邊框改淑，四個角為小幅度圓角，行高1.5倍浴讯，還要設(shè)置內(nèi)邊距的距離朵夏，寫法如下：
有朋友會問，你這樣寫下面不是全部會變成一樣的格式嗎榆纽？
是的仰猖，下面確實變成一樣的格式，但是接下來我們設(shè)置下面表格的樣式使用的是.h-container.style-n的方式奈籽，我們知道當(dāng)同時具備相同類別的樣式設(shè)置時饥侵，權(quán)重大的生效，此時后者有兩個類選擇器衣屏，權(quán)重更重躏升，所以會覆蓋掉我們前面設(shè)置的不要的屬性。
然后我們看下一個邊框狼忱，背景為粉紅色膨疏，左右邊框是紅色，上下邊框沒有內(nèi)邊距和上一個一樣不做修改钻弄，沒有圓角佃却。所以寫法如下：
這里同樣有一個樣式覆蓋的情況，同一個標(biāo)簽樣式設(shè)置下面的樣式會覆蓋上面的樣式窘俺，所以本邊框最后并不會全部消失饲帅。
下面兩個邊框情況類似，所以就只放圖片了：
自此，邊框頁面實現(xiàn)灶泵。
總結(jié)
對于實現(xiàn)這個邊框育八，這種寫法最關(guān)鍵的地方在于對同一個標(biāo)簽的同樣屬性設(shè)置樣式時，權(quán)重和優(yōu)先級的確定赦邻。把全局通用的屬性单鹿，通過權(quán)重較輕、優(yōu)先級弱的選擇器設(shè)置出來深纲，再分別對個性化比較強(qiáng)的屬性通過權(quán)重重，優(yōu)先級高的標(biāo)簽選擇器單獨設(shè)置劲妙，大大減少了設(shè)置過程中的時間湃鹊。
表格
我們同樣再看一個例子
1 .縱覽全局
上下兩個表格內(nèi)容上是一模一樣，樣式不同镣奋；
很容易想到用表格table標(biāo)簽實現(xiàn)這個頁面币呵；
邊框不一樣，怎么設(shè)置出部分邊框不一致侨颈，這是難點余赢；
表格背景顏色是白灰交替，這也是難點哈垢；
2 .html
3 .css
首先還是如上面例子一樣妻柒，先設(shè)置全局屬性，把字體耘分、兩個表格居中举塔，并且設(shè)置表格的外邊框。如下：
然后這里我們發(fā)現(xiàn)有個問題求泰，那就是對于表格而言央渣，里面的每個單元格都有自己獨立的邊框，而在我們要求完成的樣式中是公用的渴频，所以需要讓表格邊框共用芽丹，就要用到
border-collapse: collapsed;但有時候表格合并不了，為了以防萬一可以加上border-spacing: 0卜朗。然后把表格通用格式先寫出來拔第，如下：
這里提示一下，關(guān)于width：100%并不是一個好主意场钉，簡單頁面看不出來楼肪，一旦到頁面比較復(fù)雜的時候，其寬度通常會超出惹悄，因為這個語句本身的意思是和父元素一樣的寬度春叫，但是這個可不包含margin。
然后我們再讓表格的行<tr>底部的border再設(shè)置一下，防止之後表格2用borber:none;的時候消失暂殖，我們需要使用一個權(quán)重比較大的選擇器价匠。如下：
在通用屬性下，我們再次在兩個表格的行下添加了權(quán)重比較重的樣式呛每，下面我們只需要對表格2使用borber:none就可以讓原本通用屬性邊框消失踩窖，而權(quán)重重，優(yōu)先級高的選擇器保留晨横，效果就類似于把上左右的邊框消失洋腮。
那么間隔的灰白色怎么解決？
我用的是偽類選擇器 .h-table tr:nth-child(2n)手形，意思是類別為.h-table類別的table下啥供，匹配父代為標(biāo)簽為tr，其tr的子代順序為雙數(shù)的子代库糠，翻譯一下就是表格里行里面為雙數(shù)行數(shù)的這部分伙狐。寫法如圖：
剩下的事就把樣式補(bǔ)全
總結(jié)
同樣是使用權(quán)重和優(yōu)先級的選擇器方式來實現(xiàn)邊框的隱藏和出現(xiàn)。
在選擇白灰交替出現(xiàn)的行時瞬欧，我們用了偽類選擇器贷屎，實現(xiàn)了這個效果。
三角形
1 .縱覽全局
這個實現(xiàn)主要是考慮怎么變成三角形艘虎。這里使用的方式是邊框變粗唉侄，然后里面寬高為0，但是這樣的話就是個正方形野建，所以再把上下左右的邊框變成可見或者不可見美旧。
2 .html
3 .css
先設(shè)置全局屬性
想要邊框不可見，使用transparent
.aa{
border-top: 30px solid blue;
border-left: 30px solid red;
border-right: 30px solid yellow;
border-bottom: 30px solid green;
}
.bb{
border-top: 30px solid blue;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
}
.cc{
border-top: 30px solid transparent;
border-left: 30px solid red;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
}
.dd{
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-right: 30px solid yellow;
border-bottom: 30px solid transparent;
}
.ee{
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
}
.ff{
border-top: 30px solid transparent;
border-left: 30px solid red;
}
.gg{
border-top: 30px solid transparent;
border-right: 30px solid green;
}
完成贬墩！
