網(wǎng)頁(yè)設(shè)計(jì)列表元素表單和字體

《網(wǎng)頁(yè)設(shè)計(jì)列表元素表單和字體》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第4章CSS網(wǎng)站元素設(shè)計(jì)復(fù)習(xí)回顧制作導(dǎo)航通常使用的標(biāo)簽是

2、url(url)list-style-position：outside

3、insidelist-style-type：disc:

4、默認(rèn)值。實(shí)心圓circle:空心圓square:實(shí)心方塊decimal:阿拉伯?dāng)?shù)字lower-roman:小寫(xiě)羅馬數(shù)字upper-roman:大寫(xiě)羅馬數(shù)字lower-alpha:小寫(xiě)英文字母upper-alpha:大寫(xiě)英文字母none:不使用項(xiàng)目符號(hào)www.xiaolong520.com版權(quán)所有4使用圖片自定義項(xiàng)目符號(hào)：直接用圖片代替項(xiàng)目符號(hào)：利用背景來(lái)制作精確定位的項(xiàng)目符號(hào)Ul{List-style-image:url(圖片路徑）；}控制項(xiàng)目符號(hào)距文字的距離可用屬性：text-indent1、取消項(xiàng)目符號(hào)：ul{list-style-type:none;}2、對(duì)每個(gè)列表項(xiàng)定義不重復(fù)背景，且要

5、求文字不能壓住背景l(fā)i{background-image:url(images/flower_bullet.gif);background-repeat:no-repeat;background-position:0px3px;padding-left:15px;}www.xiaolong520.com版權(quán)所有5使列表變?yōu)槎温鋎isplay屬性：標(biāo)簽div，a，span的默認(rèn)顯示方式是否相同？列表元素轉(zhuǎn)換為一行顯示：強(qiáng)制轉(zhuǎn)換顯示模式：Display：inline與float的比較:display:inline;適合上下文關(guān)聯(lián)float:left(right);更適合對(duì)象的布局模式BlockNo

6、neinlineinline-blocklist-itemul{display:inline;}ulli{display:inline;}www.xiaolong520.com版權(quán)所有6列表縮進(jìn)排版：text-indent：用于控制段落文本的首行縮進(jìn)ul{list-style-type:none;padding-left:30px;}ulli{margin:5px;text-indent:-30px;}綜合案例www.xiaolong520.com版權(quán)所有74.4表單設(shè)計(jì)萬(wàn)維網(wǎng)向?yàn)g覽者傳遞信息，使瀏覽者非常方便地從互聯(lián)網(wǎng)取得需要的信息。在交互式的網(wǎng)絡(luò)中，表單是一個(gè)不可缺少的元素，它是交互的一個(gè)

7、入口。只要有交互出現(xiàn)的地方，就會(huì)有表單。一個(gè)完整的交互表單由兩部分組成：一是客戶(hù)端包含的表單頁(yè)面，用于填寫(xiě)瀏覽者進(jìn)行交互的信息；另一個(gè)是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息。www.xiaolong520.com版權(quán)所有8標(biāo)簽名稱(chēng)特別屬性說(shuō)明文件上傳框（inputtype=”file”）accept設(shè)定接收內(nèi)容格式（見(jiàn)Form標(biāo)簽）圖片提交框（inputtype=”image”）align設(shè)置圖片旁邊文字的對(duì)齊方式，有如下值可以設(shè)置：Left、right、top、texttop、middle、Absmiddle、baseline、bottom、absbottomAlt設(shè)置圖片替換文字，供

8、顯示不了圖片的情況下使用Src設(shè)置圖片框中圖片地址單選框（inputtype=radio）Checked設(shè)置當(dāng)前單選框是否被選中列表框（select/option)selected設(shè)置某項(xiàng)是否被選中按鈕（inputtype=button/submit/reset)提交表單的值多選擇框（inputtype=checkbox）Checked設(shè)置當(dāng)前多選框是否被選中文本輸入框（inputtype=”text”）maxlength設(shè)置文本輸入框最大容納字符數(shù)Readonly設(shè)置當(dāng)前文本輸入框是否為只讀www.xiaolong520.com版權(quán)所有9改變輸入框及文本域樣式改變邊框樣式、顏色、背景顏色等：

9、圓角輸入框設(shè)計(jì)要點(diǎn)：Border:border-colorborder-styleborder-width1、圓角圖片作為背景2、沒(méi)有邊框3、調(diào)整輸入文本位置www.xiaolong520.com版權(quán)所有10其他樣式設(shè)計(jì)：改變下拉列表樣式：分清類(lèi)別改變按鈕樣式：背景圖片與邊框、縮進(jìn)綜合案例www.xiaolong520.com版權(quán)所有11表單設(shè)計(jì)的原則明確的輸入標(biāo)示驗(yàn)證數(shù)據(jù)及減少提交次數(shù)提供智能的