小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

表單制作-用CSS來美化表單 - CSS - 網(wǎng)頁(yè)設(shè)計(jì) - 金麥網(wǎng)絡(luò)(www.kingmx...

 GoTop 2007-11-19
    CSS，就是大家知道的層疊樣式單，它可以定義頁(yè)面元素的外觀，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補(bǔ)白樣式、邊界樣式等等，下面就從這幾個(gè)方面出發(fā)，討論怎樣將CSS應(yīng)用到表單中，徹底美化它！
    字體樣式的應(yīng)用
    字體樣式包括：字體族科(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這里不詳細(xì)講述，可以參考它的資料。也許你已經(jīng)注意到，按鈕上的文字不漂亮，其實(shí)可以通過CSS字體樣式來解決，同樣地，其它的幾個(gè)涉及到文字的表單項(xiàng)，例如，文本框、多行文本框、口令框、下拉選擇框都可以應(yīng)用字體樣式。為了充分展示這些應(yīng)用，下例特別設(shè)計(jì)了幾種樣式，在實(shí)際應(yīng)用中，不必這么凌亂，靈活運(yùn)用：
    表單元素的字體樣式展示






    表單CSS樣式分析：
    文本框里的文字是加粗的，大小是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">
    <option value="2" selected></option>
    <option value="1">freeinfo.</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;">
    背景顏色和圖像樣式的應(yīng)用
    表單元素的背景展示

    復(fù)選 單選

    表單CSS樣式分析：
    文本框背景是黑色的，字體是白色的，代碼：
    <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">
    <option selected style="background-color: #FF0000"></option>
    <option style="background-color: #0000CC">freeinfo.</option>
    <option style="background-color: #009900">chinabyte.com</option>
    <option style="background-color: #ff33cc">sina.com</option>
    <option style="background-color: #999999">sohu.com</option>
    </select>
    多行文本框的背景是一個(gè)圖像，代碼：
    <TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(0.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(0.gif)">
    邊框樣式的應(yīng)用
    邊框形式的展示:



    復(fù)選 單選
    表單CSS樣式分析：
    文本框有8種類型邊框樣式，即border-style，分別展示在本例中，
    邊框?qū)挾鹊脑O(shè)置有一個(gè)規(guī)律：
    border-width: [ thin | medium | thick | ＜長(zhǎng)度＞ ]
    邊框?qū)挾扔靡坏剿膫€(gè)值來設(shè)置元素的邊框?qū)挾?，它們分別被應(yīng)用于上、右、下和左邊框?qū)挾?。如果只給出一個(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: ＜顏色＞
    邊框顏色用一到四個(gè)值來設(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è)置，不然有“畫蛇添足”之感；
    邊框的特殊設(shè)計(jì)展示:

    代碼：<FORM name=form1 action="" method=post><INPUT style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value=文本框：只有下邊框 name=myRed> <INPUT style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按鈕1 name=Button></FORM>


    代碼：<FORM name=form1 action="" method=post><INPUT style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value=文本框：上下邊框顏色不同 name=myRed2> <INPUT style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按鈕2 name=Submit24></FORM>


    代碼：<FORM name=form1 action="" method=post><INPUT style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value=文本框：邊框、顏色不同 name=myRed3> <INPUT style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按鈕3 name=Submit32> </FORM>
    注意：邊框類型的外觀如下：
    none ：無邊框。與任何指定的border-width值無關(guān)；
    dotted ：點(diǎn)線；
    dashed ：虛線；
    solid ：實(shí)線邊框；
    double ：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；
    groove ：3D凹槽；
    ridge ：邊框突起；
    inset ：3D凹邊；
    outset ：3D凸邊；
    用圖像代替按鈕
    當(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)簽的屬性是一樣的
    演示：
    是不是只要用圖片就可以代替所有的按鈕呢？是的，不過，不是上面這么簡(jiǎn)單了，必須加上事件函數(shù)，不然的話，圖片都是提交按鈕，不能完成復(fù)位等功能，看看下面的例子就知道了：
    用圖片代替所有的表單按鈕：
    需要注意的事項(xiàng)： 
    代替submit按鈕的圖片代碼格式是<input type="image" name="..." src="..." onClick="document.formName.submit()">
    代替reset按鈕的代碼圖片格式是 <a href="javascript:document.formName.reset();"><img border=0 src="..."></a>
    這里的formName是表單的name屬性值。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多