0371-53778175
15333818157
15333818157
在鄭州網(wǎng)站建設(shè)的網(wǎng)頁(yè)編碼中，DIV+CSS網(wǎng)頁(yè)制作技術(shù)是非常常用的技術(shù)，熟練使用DIV+CSS技術(shù)對(duì)網(wǎng)頁(yè)制作非常重要。在本網(wǎng)頁(yè)中，鄭州網(wǎng)站建設(shè)整理了一些關(guān)于DIV+CSS網(wǎng)頁(yè)制作技術(shù)的幾個(gè)常用的技巧及其實(shí)現(xiàn)的代碼，可供網(wǎng)站建設(shè)相關(guān)技術(shù)人員在網(wǎng)頁(yè)制作中參考使用。
一、網(wǎng)頁(yè)制作中div內(nèi)邊距padding屬性用法：
padding屬性用于定義元素的填充屬性.可以設(shè)置填充距離.可以直接輸入數(shù)值定義填充距離，也可以設(shè)auto為自動(dòng)距離。需要注意的是，在設(shè)置padding值后一定要將該DIV趁的原width和heignt值減去相應(yīng)設(shè)置里的padding值。padding屬性定義可以采用簡(jiǎn)寫的形式。padding屬性的簡(jiǎn)寫在默認(rèn)狀態(tài)下需要提供4個(gè)參數(shù)值。按順序分別為上、右、下、左。如果元素上和下填充的是相同的值，左和右填充的是相同的值，則可以使用兩個(gè)參數(shù)值定義.分別表示上下和左右。
二、實(shí)現(xiàn)一個(gè)層固定在底部，隨滾動(dòng)條滾動(dòng)：
<body scroll="no" style="margin:0px">
<div style="height:expression(document.body.clientHeight);overflow:auto;">
<div style="height:2000px">大頁(yè)面</div>
</div>
<div style="height:100px;background-color:#AAAAAA;position:relative;top:-100px;z-index:-1">bottom</div>
</body>
三、如何使用font設(shè)定文字字體、顏色、大�。�
font-style設(shè)定斜體，比如font-style: italic;
font-weight設(shè)定文字粗細(xì)，比如font-weight: bold;
font-size設(shè)定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問(wèn)題參考CSS手冊(cè)）
line-height設(shè)定行距，比如line-height: 150%;
color設(shè)定文字顏色（注意不是font-color），比如color: red;
font-family設(shè)定字體，比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;（這是通用的寫法）
以上都可以寫在一行font屬性里（除了color屬性需要單獨(dú)寫）：
font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;
四、如何使用margin，text-align控制段落排版：
中文段落使用margin標(biāo)簽，左右（相當(dāng)于縮進(jìn)）、段前段后的空白，比如：
p{
margin: 18px 6px 6px 18px; /*分別是上、右、下、左，十二點(diǎn)開始的順時(shí)針?lè)较?/
}
文字的對(duì)齊方式用text-align，比如：
p{
text-align: center; /*居中對(duì)齊*/
}
對(duì)齊方式還有l(wèi)eft、right和justify（兩端對(duì)齊）
五、給行內(nèi)元素定義寬度：
行內(nèi)常用的元素包括：<span>，<a>，strong>和<em>。塊元素包括<div>，<p>，<h1>，<form>和<li> 。我們不能定義行內(nèi)元素的寬度，為了解決這個(gè)問(wèn)題你可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素。
span { width: 150px; display: block }
六、如何讓固定寬度的頁(yè)面居中
為了讓頁(yè)面在瀏覽器居中顯示, 需要相對(duì)定位外層div, 然后把margin設(shè)置為auto。
#wrapper {
margin: auto;
position: relative;
}
七、如何隱藏水平滾動(dòng)條：
為了避免出現(xiàn)水平滾動(dòng)條, 在body里加入 overflow-x:hidden .
body { overflow-x: hidden; }當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí), 這個(gè)技巧將非常有用。
八、如何去掉網(wǎng)頁(yè)設(shè)計(jì)中超鏈接的下劃線：
未被點(diǎn)擊時(shí)超鏈接文字無(wú)下劃線，顯示為藍(lán)色;當(dāng)鼠標(biāo)在鏈接上時(shí)有下劃線，鏈接文字顯示為紅色;當(dāng)點(diǎn)擊鏈接后，鏈接無(wú)下劃
線，顯示為綠色。
實(shí)現(xiàn)方法很簡(jiǎn)單，在源代碼的和之間加上如下的CSS語(yǔ)法控制:
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-－>
</style>
其中：
a:link 指正常的未被訪問(wèn)過(guò)的鏈接;
a:active 指正在點(diǎn)的鏈接;
a:hover 指鼠標(biāo)在鏈接上;
a:visited 指已經(jīng)訪問(wèn)過(guò)的鏈接;
text-decoration是文字修飾效果的意思;
none參數(shù)表示超鏈接文字不顯示下劃線;
underline參數(shù)表示超鏈接的文字有下劃線
同樣，如果把none替換成overline，則給超鏈接文字加上劃線，而換成line-through給超鏈接文字加上刪除線，blink則使文字在閃爍。
1765879842 2632505191 2236519391
