有序无序的变换 序号变图片 序号的各种形式变换
生活随笔
收集整理的這篇文章主要介紹了
有序无序的变换 序号变图片 序号的各种形式变换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在html上寫一個列表，如
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style>li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>語文</li><li>數學</li><li>英語</li></ol></body> </html>運行后
會發現序號1，2，3在li標簽的外面，那么怎么實現把序號放在里面呢？很簡單，像下面這么寫就能實現
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style>ol{list-style-position: inside;/*列表位置：在里面*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>語文</li><li>數學</li><li>英語</li></ol></body> </html>還可以設置為不要序號，將1，2，3變為方形和圓形等形狀，如
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style>ol{list-style-position: inside;/*列表位置：在里面*/list-style-type: square;/*方形*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>語文</li><li>數學</li><li>英語</li></ol></body> </html>運行后
?
?
還可以將塊形東西變為圖片，如
將一張有箭頭的圖片復制
?
再粘貼在img中
再在ol{}中寫
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style>ol{list-style-position: inside;/*列表位置：在里面*/list-style-image: url(../img/0x300a0a0.png);/*引入圖片*/list-style-type: square;/*方形*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>語文</li><li>數學</li><li>英語</li></ol></body> </html>運行后，
發現圖片太大了，我也找不到圖片小的箭頭。這里給個事列怎么變為圖片而已。
這里可以簡寫， 將
list-style-position: inside;
list-style-image: url(../img/0x300a0a0.png);
list-style-type: square;
改為
list-style: inside url(../img/0x300a0a0.png) square;
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style>ol{/*list-style-position: inside;list-style-image: url(../img/0x300a0a0.png);list-style-type: square;*/list-style: inside url(../img/0x300a0a0.png) square;/*順序不能亂*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>語文</li><li>數學</li><li>英語</li></ol></body> </html>運行后一樣效果。
值得注意的是，經過這么折騰后有序列表變了無序列表，而有序列表也可變為無序列表，如
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style>ul{/*list-style-position: inside;list-style-image: url(../img/0x300a0a0.png);list-style-type: square;*/list-style-position: outside ;list-style-type: decimal;/*順序不能亂*/}li{border: 1px solid red;font-size: 20px;}</style><body><ul><li>語文</li><li>數學</li><li>英語</li></ul></body> </html>?運行后，就變為有序的了。
?
總結
以上是生活随笔為你收集整理的有序无序的变换 序号变图片 序号的各种形式变换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ADSL宽带拨号王(HelloNet)
- 下一篇： 嵌入式：ARM的DMA设计