第九章:CSS表單設(shè)計(jì) 二維碼
471
今天我們開始學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)(div+css)》的css表單設(shè)計(jì),包含以下內(nèi)容和知識(shí)點(diǎn):
一、改變文本框和文本域樣式 如果前邊幾章學(xué)習(xí)的比較扎實(shí)的話,本節(jié)教程就相當(dāng)容易了。下邊先說(shuō)一下文本框,文本框和文本域都是可以用css進(jìn)行美化的。比如改變邊框精細(xì),顏色,添加背景色、背景圖像等。請(qǐng)看下邊的實(shí)例:
.text1 { border:1px solid #f60; color:#03C;} .text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;} .text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;} .text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;} 這四個(gè)樣式表分別對(duì)應(yīng)第2、3、4、5行表單,第一行是文本框的默認(rèn)樣式;第二行為設(shè)置邊框和字體顏色的樣式;第三行為設(shè)置邊框、寬度、高度、字體大小、行高的樣式;第四行設(shè)置邊框和增加背景色和背景圖片;第五行為增加一個(gè)gif動(dòng)畫的背景圖片,看起來(lái)是不是生動(dòng)許多,具體步驟不再贅述。下面我們看一下文本域的樣式設(shè)置:
.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;} 上圖中第一個(gè)為默認(rèn)的文本域樣式,第二個(gè)為設(shè)置邊框、寬度為百分比、高度和景圖片。overflow:auto定義當(dāng)內(nèi)容不超過(guò)現(xiàn)在文本域高度時(shí)不出現(xiàn)滾動(dòng)條。好了,下面運(yùn)行一下代碼看看兩者的效果吧
提示:可以先修改部分代碼后再運(yùn)行 以信載商,良心建站。遨游始終秉承“一次建站、終身維護(hù)”的宗旨,竭誠(chéng)為客戶提供最優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)。遨游建站率先植入seo優(yōu)化理念,讓你的網(wǎng)頁(yè)更利于搜索引擎抓取,關(guān)鍵詞排名更靠前。可仿站、可定制。無(wú)論是傳統(tǒng)型企業(yè)官網(wǎng)、集團(tuán)型品牌官網(wǎng),還是營(yíng)銷型網(wǎng)站、電商型網(wǎng)站、定制型網(wǎng)站、特殊行業(yè)網(wǎng)站(醫(yī)療、教育),全部搞定。 公司:網(wǎng)站建設(shè)_小程序設(shè)計(jì)_競(jìng)價(jià)托管代運(yùn)營(yíng)公司;郵箱:1013601535@qq.com 手機(jī):17073547034;QQ: 1013601535 在線留言咨詢,24小時(shí)內(nèi)回復(fù)
我想咨詢 *
企業(yè)名稱
手機(jī)號(hào)碼 *
您的姓名
所在城市 提交 |
網(wǎng)站建設(shè)問(wèn)題
熱門標(biāo)簽
最新發(fā)布 |