資源描述:
《網(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)簽是
,列表項(xiàng)內(nèi)容用
.使用的樣式屬性是:list-style:none;www.xiaolong520.com版權(quán)所有24.3使用列表元素列表在網(wǎng)頁(yè)設(shè)計(jì)中使用的頻率非常高:整齊、直觀(guān),如新聞網(wǎng)站、電子商務(wù)網(wǎng)站等www.xiaolong520.com版權(quán)所有3列表樣式屬性:list-style:設(shè)置列表的所有屬性選項(xiàng)語(yǔ)法:list-style:list-style-image:none
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ù)提供智能的