css列表標(biāo)簽list與表格標(biāo)簽table詳解
列表list,無(wú)序列表ul,有序列表ol
1.列表項(xiàng)樣式list-style-type
無(wú)列表默認(rèn)為dist實(shí)心圓,有序列表默認(rèn)為decimal阿拉伯?dāng)?shù)字(前面不帶0)
其他無(wú)序列表常用none無(wú)樣式,circle空心圓,square實(shí)心方塊
有序列表常用decimal-leading-zero以0開(kāi)頭的數(shù)字,lower-roman、upper-roman小寫(xiě)、大寫(xiě)羅馬數(shù)字,lower-alpha、upper-alpha小寫(xiě)、大寫(xiě)英文字母
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
2.列表項(xiàng)標(biāo)記的圖像list-style-image: url
ul { list-style-image: url('sqpurple.gif'); }
3.列表項(xiàng)標(biāo)記的位置list-style-position
默認(rèn)值outside,標(biāo)記位于文本的左側(cè),且放置在文本以外,環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊
inside,標(biāo)記放置在文本以?xún)?nèi),且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊
上述三個(gè)屬性可集合在一起,通過(guò)list-style表示,順序?yàn)閠ype、position、image,可根據(jù)需要選擇
例如ul { list-style: square url("sqpurple.gif"); }
表格table
1.邊框border
如果僅使用border,例如table, th, td { border: 1px solid black; },得到的效果如下,因?yàn)閠h和td都有各自的邊框
可再通過(guò)border-collapse屬性設(shè)置表格的邊框被折疊成一個(gè)單一的邊框或隔開(kāi)
table {border-collapse: collapse;} table, td, th {border: 1px solid red;background-color:lightgray;color:green;text-align:center}
2.表格寬度和高度,例如
table{width:100%;} th{height:40px;} tr{height:30px;}
3.表格內(nèi)文本對(duì)齊方式
text-align水平對(duì)齊,vertical-align垂直對(duì)齊(設(shè)置垂直對(duì)齊方式時(shí)必須指定td的高度)
上一篇:前端獲取http狀態(tài)碼400的返回值實(shí)例
欄 目:CSS/HTML
下一篇:學(xué)習(xí)小實(shí)例--滾動(dòng)條的簡(jiǎn)單實(shí)現(xiàn)
本文標(biāo)題:css列表標(biāo)簽list與表格標(biāo)簽table詳解
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/11485.html
您可能感興趣的文章
- 01-11純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容
- 01-11CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
- 01-11CSS3中Transition屬性詳解以及示例分享
- 01-11詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別
- 01-11HTML <!DOCTYPE> 標(biāo)簽
- 01-11使用css實(shí)現(xiàn)全兼容瀏覽器的三角形
- 01-11使用css實(shí)現(xiàn)全兼容tooltip提示框
- 01-11從零學(xué)CSS系列之文本屬性
- 01-11用css截取字符的幾種方法詳解(css排版隱藏溢出文本)
- 01-11CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02html5算法,html5協(xié)議
- 04-02html5圖形,html5圖形縮放
- 04-02html5登錄模板,html5登錄注冊(cè)模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02關(guān)于html5播放視頻代碼的信息
- 04-02html5chm手冊(cè),html操作手冊(cè)
- 04-02朋友圈html5,朋友圈發(fā)泄情緒的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5掃二維碼,html5調(diào)用手機(jī)攝像頭掃描
隨機(jī)閱讀
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 04-02jquery與jsp,用jquery
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10delphi制作wav文件的方法
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置