一個網(wǎng)頁練習（二）

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

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

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

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

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

    既然我們是對單獨的一個段落進行的改變，就不能對所有的<p>元素進行設置了，這里就用到了我們以前講的選擇器的概念。首先，我們?yōu)樾枰淖兊脑靥砑觕lass屬性，以供選擇器進行區(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的修改就這一點。下面是對CSS的改變，因為內(nèi)容較多，我們先做一些簡單的改變，再慢慢增加。先上代碼：
body {	font-size: small;	font-family: Verdana, Helvetica, Arial, sans-serif;  /*設置了多種備用字體，以適應不同的客戶系統(tǒng)*/	line-height: 1.6em;		/*設置了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; 的簡寫，						后一種寫法指定的順序為上、右、下、左（順時針）*/	padding-left: 80px;		/*為左側(cè)內(nèi)邊距單獨制定邊距80px，他覆蓋了上一句中的25px*/	margin: 30px;		/*指定外邊距大小*/	margin-right: 250px;	line-height: 1.9em;	font-style: italic;		/*指定字體為斜體*/	font-family: Georgia, "Times New Roman", Times, serif;	color: #444444;	}
    他相應的顯示效果如下：
    這里我們已經(jīng)完成了布局以及背景色的改變，需要說明的有三點：
    1.類似于padding、margin的屬性，他們用來設置元素四個方向的邊距，他的設置順序為順時針，依次為上、右、下、左，若四邊設置為相同的值則可采用簡寫，即只設置一個值。所以padding : 25px 25px 25px 25px 與padding : 25px 效果相同。
    2.可通過下方的屬性覆蓋上方的屬性。例子中padding-left : 80px覆蓋了上一句padding設置的效果，下面的margin與margin-right也如此。
    3.background-color設置的背景顏色只影響內(nèi)容區(qū)及內(nèi)邊距，外邊距的背景不受影響。
    下面我們再制作邊框的郵票效果，其實這里利用了一個技巧，邊框外面的背景是白色的，我們將邊框設置為與其相同的顏色，并設置了虛線效果，利用邊框線本身與背景融合的效果，形成了郵票的感覺。CSS中只改變了border-color和border-style兩個屬性。代碼如下所示：
.guarantee {	border-color: white;	/*改為了白色*/	border-width: 1px;	border-style: dashed;	/*指定邊框為虛線（這里與 border-color: white; 結(jié)合，							實現(xiàn)了類似郵票邊緣的效果）*/	background-color: #a7cece;	padding: 25px;		/*指定內(nèi)邊距大小,他是 padding: 25px 25px 25px 25px; 的簡寫，						后一種寫法指定的順序為上、右、下、左（順時針）*/	padding-left: 80px;		/*為左側(cè)內(nèi)邊距單獨制定邊距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)在背景上還缺一個圖標，素材如下：
    他是一個gif格式的圖片，如果用photoshop之類的圖像處理軟件打開的話，可以發(fā)現(xiàn)圖像的大部分都是類似于瓷磚的效果。如下：
    這表示圖的這一部分是透明的，如果放到網(wǎng)頁中就會顯示為背景顏色。需要注意的是gif和png文件擁有這種效果，jpg和bmp沒有。
    下面我們通過CSS將圖片加入到背景中去。很簡單，就一句代碼，如下：
background-image: url(images/background.gif);
    之所以使用background-image指定背景圖案，因為背景不是網(wǎng)頁內(nèi)容，而網(wǎng)頁內(nèi)容在HTML中用<img>指定。
    我們再來看一下網(wǎng)頁效果：
    可以看到背景圖案是以平鋪的效果占滿了整個區(qū)域，如果需要指定顯示樣式需要添加以下屬性。
background-repeat: no-repeat;background-position: top left;
    根據(jù)英文我們可以知道他們的含有：讓背景圖案不在重復顯示，并讓圖案位于左上位置。
    Lounge.css的最終代碼如下：
body {	font-size: small;	font-family: Verdana, Helvetica, Arial, sans-serif;  /*設置了多種備用字體，以適應不同的客戶系統(tǒng)*/	line-height: 1.6em;		/*設置了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;	/*指定邊框為虛線（這里與 border-color: white; 結(jié)合，							實現(xiàn)了類似郵票邊緣的效果）*/	background-color: #a7cece;	padding: 25px;		/*指定內(nèi)邊距大小,他是 padding: 25px 25px 25px 25px; 的簡寫，						后一種寫法指定的順序為上、右、下、左（順時針）*/	padding-left: 80px;		/*為左側(cè)內(nèi)邊距單獨制定邊距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指定背景圖案，因為背景*/							/*不是網(wǎng)頁內(nèi)容，網(wǎng)頁內(nèi)容在HTML中用<img>指定*/	background-repeat: no-repeat;	background-position: top left;}
    這樣我們就得到了本次開始時所設計的效果，下一次我們繼續(xù)完善網(wǎng)頁。