中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

為實(shí)現(xiàn)設(shè)計(jì)時(shí)的網(wǎng)頁(yè)頭部效果，我們需要以下兩幅圖：（點(diǎn)擊另存，并相應(yīng)修改文件名）

/images/headers/about.jpg

點(diǎn)擊放大

/images/general/logo_enlighten.gif：

首先我們給#header層添加背景圖案：

#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

我們使用的背景屬性為一些簡(jiǎn)寫的屬性名，用其能規(guī)定背景的顏色，圖案，圖案的位置，是否重復(fù)以及如何重復(fù)。之所以把背景色設(shè)為桔黃色，是因?yàn)楫?dāng)用戶使瀏覽器屏蔽圖片時(shí)，網(wǎng)站的頭部不會(huì)變的一片空白。應(yīng)該注意到圖片的路徑是相對(duì)于css的存放位置而言的，而不是html文件，因此有"../"。

接著替換掉<h1></h1>標(biāo)簽里的"Enlighten Designs":

<div id="header">
<h1><img src="images/general/logo_enlighten.gif"
width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>

logo_enlighten圖片浮在頭部的左上方，我們需要設(shè)置<h1>的屬性值為：

#header h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

這樣我們使存在于<h1>層的圖片向右浮動(dòng)，并且上邊距(margin-top)為57px，右間隙(padding-right)為31px，如下圖所示：

點(diǎn)擊放大

注意：細(xì)心的你可能會(huì)發(fā)現(xiàn)我們使用了padding-right而不是margin-right，這是因?yàn)镮E的怪毛病不少，它會(huì)在不定的地方無(wú)法正確顯示margin-right/left屬性，所以使用了padding(間隙,Dreamweaver中又被稱為填充)屬性。

作者提示：希望大家在以后的css編寫過(guò)程中，盡量使用padding屬性，以免造成瀏覽器調(diào)試麻煩。

出處：Jorux Notebook
責(zé)任編輯：moby

上一頁(yè) 頁(yè)面內(nèi)的基本文本的樣式(css)設(shè)置 下一頁(yè) 頁(yè)腳信息的表現(xiàn)設(shè)置

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。