如何用css美化表單

解決方法：用普通標(biāo)簽?zāi)M，背景圖設(shè)置在普通標(biāo)簽里面，表單功能還是用input來(lái)實(shí)現(xiàn)，交互功能得用JavaScript來(lái)實(shí)現(xiàn)。換句話說(shuō)，CSS控制普通標(biāo)簽的樣式來(lái)美化表單，JavaScript實(shí)現(xiàn)表單交互功能。

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供華州網(wǎng)站建設(shè)、華州做網(wǎng)站、華州網(wǎng)站設(shè)計(jì)、華州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、華州企業(yè)網(wǎng)站模板建站服務(wù)，10年華州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

案例分析：

移動(dòng)端兼容 - 調(diào)用相冊(cè)的按鈕樣式處理

具體情形：input type="file" accept="image/*;capture=camera"或者input type="file" capture="photo"設(shè)背景圖無(wú)效。在我們的移動(dòng)端網(wǎng)頁(yè)當(dāng)中，會(huì)有上傳照片的操作需求。此時(shí)會(huì)使用到文件類(lèi)型的input文本框，但是不同的系統(tǒng)不同的瀏覽器在樣式上均不相同，而且，設(shè)置背景圖也沒(méi)有效果。

解決方法：通過(guò)設(shè)置opacity為0來(lái)進(jìn)行模擬，背景圖設(shè)置在其他標(biāo)簽里面。換句話說(shuō)樣式用普通標(biāo)簽?zāi)M，功能用input來(lái)實(shí)現(xiàn)。

測(cè)試效果圖：

《CSS美化表單大集錦》

怎樣將form表單中的數(shù)據(jù)應(yīng)用到css樣式中

1、CSS魔法

CSS，就是大家知道的層疊樣式單，它可以定義頁(yè)面元素的外觀，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補(bǔ)白樣式、邊界樣式等等，下面就從這幾個(gè)方面出發(fā)，討論怎樣將CSS應(yīng)用到表單中，徹底美化它！

1.1 字體樣式的應(yīng)用

字體樣式包括：字體族科(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font- weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這里不詳細(xì)講述，可以參考它的資料。

也許你已經(jīng)注意到，按鈕上的文字不漂亮，其實(shí)可以通過(guò)CSS字體樣式來(lái)解決，同樣地，其它的幾個(gè)涉及到文字的表單項(xiàng)，例如，文本框、多行文本框、口令框、下拉選擇框都可以應(yīng)用字體樣式。

為了充分展示這些應(yīng)用，下例特別設(shè)計(jì)了幾種樣式，在實(shí)際應(yīng)用中，不必這么凌亂，靈活運(yùn)用：

樣例12：表單元素的字體樣式展示

分析：

文本框里的文字是加粗的，大小是9pt，字體是宋體，代碼：

＜input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋體; font-size: 12px; font-weight: bold" value="加粗"＞

口令框文字是紅色的，代碼：

＜input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"＞

下拉框文字顏色是紅色的，字體是Verdana，大小是9pt，代碼：

＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞

＜o(jì)ption value="2" selected＞yesky.com＜/option＞

＜o(jì)ption value="1"＞redidea.net＜/option＞

＜/select＞

多行文本框了的字體是Verdana，有下劃線，大小是9pt，代碼：

＜TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right＞underline css style＜/TEXTAREA＞

發(fā)送1和發(fā)送2按鈕的文字不同，是因?yàn)榘l(fā)送1按鈕使用了9pt的宋體文字，所以比較美觀，發(fā)送1按鈕的代碼：

＜input type="submit" name="Submit" value="發(fā)送1" style="font-family:宋體; font-size: 9pt;"＞

小結(jié)：只要我們對(duì)字體的樣式熟悉了，就可以靈活多變，不一定要在標(biāo)簽里面使用style來(lái)定義，完全可以在＜head＞里定義，或者外部引用CSS文件，用到的時(shí)候引用一下就能達(dá)到預(yù)期的效果。?

1.2 背景顏色和圖像樣式的應(yīng)用

有很多時(shí)候，網(wǎng)頁(yè)由于顏色的搭配，不得不對(duì)表單的背景顏色和圖像樣式進(jìn)行設(shè)計(jì)，背景顏色利用background-color屬性，背景圖像利用background-image屬性，顏色和圖像同樣能夠得到意想不到的效果。

　樣例13：?表單元素的背景展示?

分析：?

文本框背景是黑色的，字體是白色的，代碼：

＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞

口令框背景是灰色的，代碼：

＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞

單選和復(fù)選按鈕的背景是紅色的，代碼：

＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞

＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞

下拉選擇框的選項(xiàng)是豐富多彩的背景，代碼：

＜select name="select2" size="1"＞

＜o(jì)ption selected style="background-color: #FF0000"＞yesky.com＜/option＞

＜o(jì)ption style="background-color: #0000CC"＞redidea.com＜/option＞

＜o(jì)ption style="background-color: #009900"＞chinabyte.com＜/option＞

＜o(jì)ption style="background-color: #ff33cc"＞sina.com＜/option＞

＜o(jì)ption style="background-color: #999999"＞sohu.com＜/option＞

＜/select＞

多行文本框的背景是一個(gè)圖像，代碼：

＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞

submit1按鈕的背景是黃色的，代碼：

＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞

submit2按鈕的背景是一個(gè)圖像，代碼：

＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞

小結(jié)：用好background-color屬性和background-image屬性，就可以設(shè)計(jì)很出“色”表單了。

1.3 邊框樣式的應(yīng)用?

也許你覺(jué)得表單的邊框過(guò)于死板，我們能否設(shè)計(jì)單線條，或者其它的邊框樣式呢？當(dāng)然可以！

和邊框有關(guān)的屬性有：邊框式樣border-style、上邊框border-top、右邊框border-right、下邊框border- bottom、左邊框border-left、邊框顏色border-colr、邊框?qū)挾?border-width、上邊框?qū)挾萣order-top-width、右邊框?qū)挾萣order-right-width、下邊框?qū)挾萣order- bottom-width、左邊框?qū)挾萣order-left-width、邊框 border，這里不作詳細(xì)的講述，請(qǐng)參考有關(guān)資料。

　樣例14：?8種邊框形式的展示?

分析：

文本框有8種類(lèi)型邊框樣式，即border-style，分別展示在本例中，

邊框?qū)挾鹊脑O(shè)置有一個(gè)規(guī)律：

border-width: [ thin | medium | thick | ＜長(zhǎng)度＞ ]{1,4}

邊框?qū)挾扔靡坏剿膫€(gè)值來(lái)設(shè)置元素的邊框?qū)挾龋鼈兎謩e被應(yīng)用于上、右、下和左邊框?qū)挾取Ｈ绻唤o出一個(gè)值，它被應(yīng)用于所有邊框?qū)挾取Ｈ绻麅蓚€(gè)或三個(gè)值給出了，省略了的值與對(duì)邊相等

例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞

邊框顏色的設(shè)置有一個(gè)規(guī)律：

border-colr: ＜顏色＞{1,4}

邊框顏色用一到四個(gè)值來(lái)設(shè)置元素的邊框顏色。如果四個(gè)值都給出了，它們分別被應(yīng)用于上、右、下和左邊框顏色。如果只給出一個(gè)值，它被應(yīng)用于所有邊框顏色。如果兩個(gè)或三個(gè)值給出了，省略了的值與對(duì)邊相等。

對(duì)于多行文本框以及按鈕，設(shè)置邊框的方法和文本框一樣，不再陳述；

由于下拉選擇框Select不支持邊框的設(shè)置，所以對(duì)它設(shè)置是徒勞的；

單選按鈕和復(fù)選按鈕的邊框，設(shè)置的效果不十分協(xié)調(diào)，所以建議不要對(duì)它們?cè)O(shè)置，不然有“畫(huà)蛇添足”之感；

　樣例15：邊框的特殊設(shè)計(jì)展示

聰明的讀者一定會(huì)想到，如果設(shè)計(jì)單邊框，一定更加漂亮，對(duì)！下面我們來(lái)嘗試以下部分邊框的設(shè)置效果，本例僅僅以Solid和dotted兩種類(lèi)型的邊框作演示，其它類(lèi)型的邊框原理相同：?注意：邊框類(lèi)型的外觀如下：

none ：無(wú)邊框。與任何指定的border-width值無(wú)關(guān)；

dotted ：點(diǎn)線；

dashed ：虛線；

solid ：實(shí)線邊框；

double ：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；

groove ：3D凹槽；

ridge ：邊框突起；

inset ：3D凹邊；

outset ：3D凸邊；

2、圖像魔法

圖像，是網(wǎng)頁(yè)的重要元素，能否應(yīng)用到表單中呢？接下來(lái)，我們用圖像來(lái)改造死板的表單，分兩個(gè)部分來(lái)探討：用圖像代替按鈕、用背景圖美化表單元素。

2.1 用圖像代替按鈕

由于默認(rèn)的表單按鈕太丑陋，絕大多數(shù)的網(wǎng)站采用了圖像按鈕，那么，我們通過(guò)兩個(gè)實(shí)例來(lái)看看怎樣實(shí)現(xiàn)的：

樣例16：用圖像代替提交按鈕：

當(dāng)只有一個(gè)提交按鈕的時(shí)候，可以簡(jiǎn)單地實(shí)現(xiàn)，不用加事件函數(shù)，代碼是：

＜input type="image" name="..." src="url" width="" height="..." border="..."＞

除了標(biāo)簽改為input type="image"以外，其它的屬性和＜img＞標(biāo)簽的屬性是一樣的，例如：?

是不是只要用圖片就可以代替所有的按鈕呢？是的，不過(guò)，不是上面這么簡(jiǎn)單了，必須加上事件函數(shù)，不然的話，圖片都是提交按鈕，不能完成復(fù)位等功能，看看下面的例子就知道了：

樣例17：用圖片代替所有的表單按鈕：?注意：

代替submit按鈕的圖片代碼格式是

＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞

代替reset按鈕的代碼圖片格式是

a href="javascript:document.formName.reset();"＜img border=0 src="..."＞/a

注：這里的formName是表單的name屬性值。

2.2 用背景圖美化表單元素

其實(shí)，前面已經(jīng)提到過(guò)，用background-image:url()屬性來(lái)定義表單元素的背景圖，這里僅舉一例，可以看到，除了select沒(méi)有效果以外，其它的都可以配合網(wǎng)頁(yè)的背景來(lái)設(shè)置它們。

再表單中寫(xiě)css樣式

of course

input type="text" onblur="this.style.borderLeft='1px solid #C1DAD7'"

前端開(kāi)發(fā)應(yīng)該知道的幾個(gè)CSS網(wǎng)頁(yè)表單布局技巧

1、絕對(duì)定位

在絕大過(guò)程中，想確定一個(gè)元素在網(wǎng)站當(dāng)中的固定位置，絕對(duì)定位是實(shí)現(xiàn)這個(gè)方式的解決辦法。在網(wǎng)頁(yè)當(dāng)中，絕對(duì)定位可精確的控制元素在網(wǎng)頁(yè)當(dāng)中的位置，我們可使用頂部、底部、左側(cè)和右側(cè)，附上一個(gè)像素值來(lái)控制元素所在的位置。

position:absolute;top:50px;right:50px

上面的CSS設(shè)置一個(gè)元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內(nèi)使用絕對(duì)定位。

2、覆蓋所有樣式

寫(xiě)CSS的時(shí)候都應(yīng)該知道，當(dāng)你想給一個(gè)元素添加一個(gè)新的CSS樣式，但這個(gè)樣式之前已經(jīng)被定義過(guò)了。此時(shí)我們可以采用！important來(lái)定義。

例如，如果我想在我的網(wǎng)站的特定部分的H3標(biāo)題是紅色而不是黃色，可以使用下面的CSS：

.section h3 {color:red !important; }

3、居中

居中分很多情況，一般會(huì)分成文本居中和DIV的內(nèi)容居中。

文本居中

文本居中使用text-align：center; 。如果想讓文本在左右兩側(cè)，可以使用左側(cè)或右側(cè)。

DIV內(nèi)容

DIV內(nèi)容居中跟文本居中不一樣。CSS可以這樣定義：

#div1 { display: block; margin: auto; width: anything under 100% }

把寬度設(shè)置為“100％以下”的原因是因?yàn)槿绻?00％寬度，那么如果是全寬度，并且不需要居中。最好有一個(gè)固定的寬度，如60％或550像素等。

4、垂直對(duì)齊（對(duì)于一行文本）

要使菜單的高度和文本的行高一致，可以這么設(shè)置：

.nav li{line-height:50px; height:50px;}

5、懸停效果

這適用于按鈕，文本鏈接，網(wǎng)站的部分，圖標(biāo)等等。如果你想做一個(gè)懸停效果，可以試試：

.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}

這個(gè)功能可以讓你的h2標(biāo)簽的顏色從黑色變成黃色。

6、懸停效果過(guò)渡

對(duì)于懸停效果，如使用菜單或網(wǎng)站上的圖像，我們肯定不希望顏色快速貼近結(jié)果，所以我們可以通過(guò)使用時(shí)間變化來(lái)達(dá)到過(guò)渡的效果。

.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}

這就使得樣式上的改變，可以是從黑色變黃色的過(guò)渡時(shí)間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會(huì)顯得太突兀。

7、a標(biāo)簽的狀態(tài)

我們?cè)谟龅絘標(biāo)簽的時(shí)候，一定要給a標(biāo)簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過(guò)樣式可以讓用戶知道這個(gè)鏈接是否被點(diǎn)擊過(guò)，更利于用戶體驗(yàn)。

a:link {color: blue; } a:visited {color: red; }

8、輕松調(diào)整圖像大小以適應(yīng)

說(shuō)到這個(gè)樣式，我之前不知道可以通過(guò)以下方式達(dá)到圖片的自適應(yīng)效果。作為一個(gè)新手，我相信這個(gè)效果肯定有很多人都想做，當(dāng)然，我提供的方法也只是其中的一種：

img {max-width:100%;height:auto;}

這個(gè)樣式意味著最大的圖像可能是100％，并根據(jù)圖像寬度自動(dòng)計(jì)算高度。在某些情況下，您可能還必須指定寬度為100％。

9、父級(jí)元素和子元素

如果ni不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個(gè)元素的子元素，請(qǐng)使用子元素選擇器：

h1 strong {color:red;}

特殊情況下你可能會(huì)想定義第N個(gè)子元素的樣式，這樣就可以用到下面這個(gè)樣式：li:nth-child(n)

具體的使用方法可以去w3school上看。

10、將CSS應(yīng)用于多個(gè)類(lèi)或選擇器

如果你想要在所有圖片，博客部分和側(cè)邊欄上添加相同的邊框。你不必寫(xiě)出相同的CSS樣式重復(fù)3次。只需列出這些項(xiàng)目，用逗號(hào)分隔：

.blog,img,.sidebar {border: 1px solid #000;}

CSS樣式是什么?

不知你是否真知道，答案很長(zhǎng)，學(xué)習(xí)總是枯燥的!

要有耐心看喔!

樣式

CSS是Cascading style Sheets的簡(jiǎn)稱(chēng)，中文譯作“層疊樣式表單”.

實(shí)際上它是一組樣式。你可能對(duì)CSS這個(gè)名詞比較陌生，實(shí)際上無(wú)論你用Internet Explorer還是Netscape Navigator在網(wǎng)上沖浪，幾乎隨時(shí)都在與CSS打交道，在網(wǎng)上沒(méi)有使用過(guò)CSS的網(wǎng)頁(yè)可能不好找。不管你用什么工具軟件制作網(wǎng)頁(yè)，都有在有意無(wú)意地使用CSS。用好CSS能使你的網(wǎng)頁(yè)更加簡(jiǎn)煉，為什么同樣內(nèi)容的網(wǎng)頁(yè)，有的人做出來(lái)有幾十KB，而高手做出來(lái)只有十幾KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小經(jīng)驗(yàn)以及一些網(wǎng)友來(lái)信提問(wèn)的問(wèn)題整理出來(lái)，供諸位參考。

1、CSS在網(wǎng)頁(yè)制作中一般有三種方式的用法，那么具體在使用時(shí)該采用哪種用法？

當(dāng)有多個(gè)網(wǎng)頁(yè)要用到的CSS，采用外連CSS文件的方式，這樣網(wǎng)頁(yè)的代碼大大減少，修改起來(lái)非常方便；只在單個(gè)網(wǎng)頁(yè)中使用的CSS，采用文檔頭部方式；只有在一個(gè)網(wǎng)頁(yè)一、兩個(gè)地方才用到的CSS，采用行內(nèi)插入方式。

2、CSS的三種用法在一個(gè)網(wǎng)頁(yè)中要以混用嗎？

三種用法可以混用，且不會(huì)造成混亂。這就是它為什么稱(chēng)之為“層疊樣式表”的原因，瀏覽器在顯示網(wǎng)頁(yè)時(shí)是這樣處理的：先檢查有沒(méi)有行內(nèi)插入式CSS，有就執(zhí)行了，針對(duì)本句的其它CSS就不去管它了；其次檢查頭部方式的CSS，有就執(zhí)行了；在前兩者都沒(méi)有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執(zhí)行優(yōu)先級(jí)是：行內(nèi)插入式、頭部方式、外連文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？

在Dreamweaver3中使用外連文件式CSS并沒(méi)有特殊要求，同樣是用記事本創(chuàng)建一個(gè)*.css文件，在網(wǎng)頁(yè)的head與/head之間加上一句這樣的代碼：link rel="stylesheet" href="在這里填上你的CSS文件地址（相對(duì)路徑+文件名）" type="text/css" 就行了。

4、如何用Dreamweaver3快速創(chuàng)建CSS外連式文件？

對(duì)于一個(gè)初接觸CSS的網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)講，要用記事之類(lèi)的編輯器，去創(chuàng)建一個(gè)CSS外連式文件是相當(dāng)困難的。由于Dreamweaver3對(duì)CSS支持的很好，用它來(lái)幫助就輕松多了。具體可以這樣操作：

1）先在紙上寫(xiě)好在網(wǎng)站的網(wǎng)頁(yè)中可能要用到的格名稱(chēng)，然后在Dreamweaver3的編輯窗中調(diào)出CSS面板，一個(gè)一個(gè)地定義，并在一個(gè)空白頁(yè)上適當(dāng)?shù)貙?xiě)一點(diǎn)相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改；

2）全部定義好后，再用記事本創(chuàng)建一個(gè)空的CSS外連式文件，把在head與/head之間的那段定義好的CSS復(fù)制到CSS文件中去，就大功告成了。整個(gè)過(guò)程就是點(diǎn)鼠標(biāo)，方便吧？

5、在Dreamweaver3中采用行內(nèi)插入式CSS要手動(dòng)寫(xiě)代碼嗎？

不用！先用CSS面板定義好要用的CSS，然后，在要插入CSS的標(biāo)記插入：style=""，再把你剛才定義的CSS從head后面拖到這個(gè)雙引號(hào)中來(lái)，把花括號(hào)以外的部分刪去就行了。

6、在方檔頭部方式和外連文件方式的CSS中都有“!--”和“--”，好象沒(méi)什么用，不要可以嗎？

這一對(duì)東東的作用是為了不引起低版本瀏覽器的錯(cuò)誤。如果某個(gè)執(zhí)行此頁(yè)面的瀏覽器不支持CSS，它將忽略其中的內(nèi)容。雖然現(xiàn)在使用不支持CSS瀏覽器的人已很少了，由于互聯(lián)網(wǎng)上幾乎什么可能都會(huì)發(fā)生，所以還是留著為妙。

7、如何給一部分文字加背景色？

給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色卻沒(méi)有相應(yīng)的功能，我們可以先做一個(gè)定義背景色的CSS（如：bgstyle），在DW3中點(diǎn)幾下鼠就完成了。如一個(gè)定義淡黃色背景的CSS是這樣的：

style type="text/css"

!--

.bgstyle { background: #FFFFCC}

--

/style

在要用時(shí)選取那段文字，再在CSS面板上點(diǎn)一下“bgstyle”就行了。

8、如何給部分文字加背景圖像？

與加背景色操作類(lèi)似，中是在背景在選擇加載圖象就是了，一個(gè)定義好的加背景圖象的CSS例子的代碼是這樣的：

style type="text/css"

!--

.imgbgstyle { background-image: url(/logo.gif)}

--

/style

在要用時(shí)選取那段文字，再在CSS面板上點(diǎn)一下“imgbgstyle”就行了。

9、如何使頁(yè)面的背景在文字“滾動(dòng)”時(shí)背景圖案靜止不動(dòng)？

要使背景圖案不隨文字“滾動(dòng)”的CSS是這樣的：

style type="text/css"

!--

BODY { background: purple url(/bg.jpg);

background-repeat:repeat-y;

background-attachment:fixed

}

--

/style

10、如何定義字間距？

在DW3中CSS的屬性定義對(duì)話框（style Definition for .style1)的“Block”上的“l(fā)etter spaceing”屬性定義的就是字間距，它指的是每一個(gè)字符之間的額外間距，經(jīng)長(zhǎng)度為單位，正負(fù)值均可，當(dāng)取負(fù)值時(shí)產(chǎn)生字符擠在一起的效果。下面代碼是一個(gè)定義好的字間距CSS例子：

style type="text/css"

!--

.style1 { letter-spacing: 3px}

--

/style

11、如何給文字加上劃線、下劃線、刪除線和閃爍？

在DW3中CSS的屬性定義對(duì)話框(style Definition for .style1)的“Type”上的“decoration”屬性定義的就是這些內(nèi)容，要注意的是閃爍屬性有些版本的瀏覽器不支持，少用為好。下面是一個(gè)定義好上述效果的CSS例子：

style type="text/css"

!--

.style1 { text-decoration: underline overline line-through blink}

--

/style

其中： “underline”是定義下劃線；“overline ”是定義上劃線；“ line-through”定義的是刪除線；“blink”

定義的是文字閃爍。

12、如何使網(wǎng)頁(yè)具有“首行縮進(jìn)”功能？

由于DW3輸入空格不方便，利用“首行縮進(jìn)”將彌補(bǔ)這個(gè)不足。在DW3中CSS的屬性定義對(duì)話框（style Definition for .style1)的“Block”上的“text-indent”屬性定義的就是“首行縮進(jìn)”，所謂“首行”是指每段內(nèi)容的第一行，也就是直接按回車(chē)鍵就形成了一個(gè)新的段落。縮進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開(kāi)始縮進(jìn)兩個(gè)漢字，設(shè)置好的CSS如下所示：

style type="text/css"

!--

.style1 { text-indent: 2em}

--

/style

在DW3要注意：在DW3中CSS的屬性定義對(duì)話框（style Definition for .style1)的“Block”上的“text-indent”右面的縮進(jìn)單位選擇框中“ems”指的就是“em”。

13、在用表格進(jìn)行排版時(shí)，能使某一方向上的內(nèi)容離開(kāi)表格線一點(diǎn)嗎？

可以！在DW3中CSS的屬性定義對(duì)話框（style Definition for .style1)的“Box”上的“margin”定義的就是內(nèi)容離開(kāi)邊緣的距離，分別可定義四個(gè)方向：“top”“bottom”“l(fā)eft”“right”。下面就是定義在左邊離開(kāi)“10px”的CSS例子代碼：

style type="text/css"

!--

.style1 { margin: 0px 0px 0px 10px}

--

/style

14、能給某部分內(nèi)容加邊框嗎？

用CSS可以給某部分內(nèi)容加邊框，在DW3中CSS的屬性定義對(duì)話框（style Definition for .style1)的“Border”定義的就是邊框線，“top”“bottom”“l(fā)eft”“right”四邊可分別定義線的粗細(xì)和顏色，這些定義好后不要忘記在下面的“style”中定義線型，否則將看不邊框線，因?yàn)槟J(rèn)的線型是“none”。下面是一個(gè)定義了上邊框?yàn)椋核{(lán)色細(xì)線；左邊框?yàn)椋壕G色中粗線的CSS例子：

style type="text/css"

!--

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

--

參考：百度百科

網(wǎng)站標(biāo)題：表單樣式css,表單樣式類(lèi)
網(wǎng)頁(yè)地址：http://chinadenli.net/article2/dsgocic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)