一個(gè)網(wǎng)頁練習(xí)（二）

        這一次，我們繼續(xù)來處理網(wǎng)頁中的一個(gè)段落，讓他達(dá)到如圖所示的效果。

    我們看到他其中的一個(gè)段落與其他段落的表現(xiàn)形式區(qū)別很大，原因就在于我們通過CSS為這個(gè)段落改變了他的表現(xiàn)。

        下面我們來詳細(xì)的對這個(gè)段落進(jìn)行講解。我們先引入一個(gè)概念，盒模型（box model），他是CSS看待HTML元素的一種方式。他將每個(gè)元素從內(nèi)向外分為內(nèi)容區(qū)（content area）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）4部分，幾個(gè)部分層層包裹就像一個(gè)盒子。

        如上圖我們將整個(gè)盒模型進(jìn)行了標(biāo)記，黑色框內(nèi)的為內(nèi)容區(qū)，其外層用黃線標(biāo)識出來的為內(nèi)邊距部分，擁有鋸齒效果的為邊框（未標(biāo)識），再外一層就是外邊距了（綠色線條標(biāo)識）。

        從圖中我們可以直觀的看出，我們對段落的字體進(jìn)行了設(shè)置，并設(shè)置了內(nèi)外邊距的大小，內(nèi)容區(qū)和內(nèi)邊距的背景顏色也做了改變并增加了一個(gè)圖標(biāo)，邊框的效果也進(jìn)行了設(shè)置，形成了類似郵票的效果。

    既然我們是對單獨(dú)的一個(gè)段落進(jìn)行的改變，就不能對所有的<p>元素進(jìn)行設(shè)置了，這里就用到了我們以前講的選擇器的概念。首先，我們?yōu)樾枰淖兊脑靥砑觕lass屬性，以供選擇器進(jìn)行區(qū)分（添加id元素也可以）。代碼如下：

		<p class="guarantee">			<!--添加了class屬性-->		  Our guarantee: at the lounge, we're committed to PRoviding you, 		  our guest, with an exceptional experience every time you visit. 		  Whether you're just stopping by to check in on email over an 		  elixir, or are here for an out-of-the-ordinary dinner, you'll 		  find our knowledgeable service staff pay attention to every detail. 		  If you're not fully satisfied, have a Blueberry Bliss Elixir on us.		</p>
lounge.html部分代碼
    對HTML的修改就這一點(diǎn)。下面是對CSS的改變，因?yàn)閮?nèi)容較多，我們先做一些簡單的改變，再慢慢增加。先上代碼：
body {	font-size: small;	font-family: Verdana, Helvetica, Arial, sans-serif;  /*設(shè)置了多種備用字體，以適應(yīng)不同的客戶系統(tǒng)*/	line-height: 1.6em;		/*設(shè)置了1.6倍的行高*/}h1,h2 {	color: #007e7e;		/*與logo顏色一致的顏色*/}h1 {	font-size: 150%;	/*內(nèi)容字體的150%大*/}h2 {	font-size: 130%;}/*以上的代碼和上次一樣，下面是本次新加的*/.guarantee {	border-color: black;		border-width: 1px;	border-style: solid;		background-color: #a7cece;	padding: 25px;		/*指定內(nèi)邊距大小,他是 padding: 25px 25px 25px 25px; 的簡寫，						后一種寫法指定的順序?yàn)樯稀⒂摇⑾隆⒆螅槙r(shí)針）*/	padding-left: 80px;		/*為左側(cè)內(nèi)邊距單獨(dú)制定邊距80px，他覆蓋了上一句中的25px*/	margin: 30px;		/*指定外邊距大小*/	margin-right: 250px;	line-height: 1.9em;	font-style: italic;		/*指定字體為斜體*/	font-family: Georgia, "Times New Roman", Times, serif;	color: #444444;	}
    他相應(yīng)的顯示效果如下：
    這里我們已經(jīng)完成了布局以及背景色的改變，需要說明的有三點(diǎn)：
    1.類似于padding、margin的屬性，他們用來設(shè)置元素四個(gè)方向的邊距，他的設(shè)置順序?yàn)轫槙r(shí)針，依次為上、右、下、左，若四邊設(shè)置為相同的值則可采用簡寫，即只設(shè)置一個(gè)值。所以padding : 25px 25px 25px 25px 與padding : 25px 效果相同。
    2.可通過下方的屬性覆蓋上方的屬性。例子中padding-left : 80px覆蓋了上一句padding設(shè)置的效果，下面的margin與margin-right也如此。
    3.background-color設(shè)置的背景顏色只影響內(nèi)容區(qū)及內(nèi)邊距，外邊距的背景不受影響。
    下面我們再制作邊框的郵票效果，其實(shí)這里利用了一個(gè)技巧，邊框外面的背景是白色的，我們將邊框設(shè)置為與其相同的顏色，并設(shè)置了虛線效果，利用邊框線本身與背景融合的效果，形成了郵票的感覺。CSS中只改變了border-color和border-style兩個(gè)屬性。代碼如下所示：
.guarantee {	border-color: white;	/*改為了白色*/	border-width: 1px;	border-style: dashed;	/*指定邊框?yàn)樘摼€（這里與 border-color: white; 結(jié)合，							實(shí)現(xiàn)了類似郵票邊緣的效果）*/	background-color: #a7cece;	padding: 25px;		/*指定內(nèi)邊距大小,他是 padding: 25px 25px 25px 25px; 的簡寫，						后一種寫法指定的順序?yàn)樯稀⒂摇⑾隆⒆螅槙r(shí)針）*/	padding-left: 80px;		/*為左側(cè)內(nèi)邊距單獨(dú)制定邊距80px，他覆蓋了上一句中的25px*/	margin: 30px;		/*指定外邊距大小*/	margin-right: 250px;	line-height: 1.9em;	font-style: italic;		/*指定字體為斜體*/	font-family: Georgia, "Times New Roman", Times, serif;	color: #444444;	}
    效果如圖：
    好了，現(xiàn)在背景上還缺一個(gè)圖標(biāo)，素材如下：
    他是一個(gè)gif格式的圖片，如果用photoshop之類的圖像處理軟件打開的話，可以發(fā)現(xiàn)圖像的大部分都是類似于瓷磚的效果。如下：
    這表示圖的這一部分是透明的，如果放到網(wǎng)頁中就會顯示為背景顏色。需要注意的是gif和png文件擁有這種效果，jpg和bmp沒有。
    下面我們通過CSS將圖片加入到背景中去。很簡單，就一句代碼，如下：
background-image: url(images/background.gif);
    之所以使用background-image指定背景圖案，因?yàn)楸尘安皇蔷W(wǎng)頁內(nèi)容，而網(wǎng)頁內(nèi)容在HTML中用<img>指定。
    我們再來看一下網(wǎng)頁效果：
    可以看到背景圖案是以平鋪的效果占滿了整個(gè)區(qū)域，如果需要指定顯示樣式需要添加以下屬性。
background-repeat: no-repeat;background-position: top left;
    根據(jù)英文我們可以知道他們的含有：讓背景圖案不在重復(fù)顯示，并讓圖案位于左上位置。
    Lounge.css的最終代碼如下：
body {	font-size: small;	font-family: Verdana, Helvetica, Arial, sans-serif;  /*設(shè)置了多種備用字體，以適應(yīng)不同的客戶系統(tǒng)*/	line-height: 1.6em;		/*設(shè)置了1.6倍的行高*/}h1,h2 {	color: #007e7e;		/*與logo顏色一致的顏色*/}h1 {	font-size: 150%;	/*內(nèi)容字體的150%大*/}h2 {	font-size: 130%;}/*以上的代碼和上次一樣，下面是本次新加的*/.guarantee {	border-color: white;	/*改為了白色*/	border-width: 1px;	border-style: dashed;	/*指定邊框?yàn)樘摼€（這里與 border-color: white; 結(jié)合，							實(shí)現(xiàn)了類似郵票邊緣的效果）*/	background-color: #a7cece;	padding: 25px;		/*指定內(nèi)邊距大小,他是 padding: 25px 25px 25px 25px; 的簡寫，						后一種寫法指定的順序?yàn)樯稀⒂摇⑾隆⒆螅槙r(shí)針）*/	padding-left: 80px;		/*為左側(cè)內(nèi)邊距單獨(dú)制定邊距80px，他覆蓋了上一句中的25px*/	margin: 30px;		/*指定外邊距大小*/	margin-right: 250px;	line-height: 1.9em;	font-style: italic;		/*指定字體為斜體*/	font-family: Georgia, "Times New Roman", Times, serif;	color: #444444;	background-image: url(images/background.gif);	/*使用background-image指定背景圖案，因?yàn)楸尘?/							/*不是網(wǎng)頁內(nèi)容，網(wǎng)頁內(nèi)容在HTML中用<img>指定*/	background-repeat: no-repeat;	background-position: top left;}
    這樣我們就得到了本次開始時(shí)所設(shè)計(jì)的效果，下一次我們繼續(xù)完善網(wǎng)頁。