網(wǎng)頁設(shè)計列表元素表

《網(wǎng)頁設(shè)計列表元素表》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

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

2、url(url)list-sty

3、le-position：outside

4、insidelist-style-type：disc:默認(rèn)值。實心圓circle:空心圓square:實心方塊decimal:阿拉伯?dāng)?shù)字lower-roman:小寫羅馬數(shù)字upper-roman:大寫羅馬數(shù)字lower-alpha:小寫英文字母upper-alpha:大寫英文字母none:不使用項目符號www.xiaolong520.com版權(quán)所有4使用圖片自定義項目符號：直接用圖片代替項目符號：利用背景來制作精確定位的項目符號Ul{List-style-ima

5、ge:url(圖片路徑）；}控制項目符號距文字的距離可用屬性：text-indent1、取消項目符號：ul{list-style-type:none;}2、對每個列表項定義不重復(fù)背景，且要求文字不能壓住背景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使列

6、表變?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);更適合對象的布局模式BlockNoneinlineinline-blocklist-itemul{display:inline;}ulli{display:inline;}www.xiaolong520.com版權(quán)所有6列表縮進(jìn)排版：text-indent：

7、用于控制段落文本的首行縮進(jìn)ul{list-style-type:none;padding-left:30px;}ulli{margin:5px;text-indent:-30px;}綜合案例www.xiaolong520.com版權(quán)所有74.4表單設(shè)計萬維網(wǎng)向瀏覽者傳遞信息，使瀏覽者非常方便地從互聯(lián)網(wǎng)取得需要的信息。在交互式的網(wǎng)絡(luò)中，表單是一個不可缺少的元素，它是交互的一個入口。只要有交互出現(xiàn)的地方，就會有表單。一個完整的交互表單由兩部分組成：一是客戶端包含的表單頁面，用于填寫瀏覽者進(jìn)行交互的信息；另

8、一個是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息。www.xiaolong520.com版權(quán)所有8標(biāo)簽名稱特別屬性說明文件上傳框（inputtype=”file”）accept設(shè)定接收內(nèi)容格式（見Form標(biāo)簽）圖片提交框（inputtype=”image”）align設(shè)置圖片旁邊文字的對齊方式，有如下值可以設(shè)置：Left、right、top、texttop、middle、Absmiddle、baseline、bottom、absbottomAlt設(shè)置圖片替換文字，供顯示不了圖片的情況下使用Src設(shè)置圖

9、片框中圖片地址單選框（inputtype=radio）Checked設(shè)置當(dāng)前單選框是否被選中列表框（select/option)selected設(shè)置某項是否被選中按鈕（inputtype=button/submit/reset)提交表單的值多選擇框（inputtype=checkbox）Checked設(shè)置當(dāng)前多選框是否被選中文本輸入框（inputtype=”text”）maxlength設(shè)置文本輸入框最大容納字符數(shù)Readonly設(shè)置當(dāng)前文本輸入框是否為只讀www.xiaolong520.com版權(quán)所

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