本篇文章主要講述的是關於HTML中的ul標籤的預設小點給取消掉,還有關於HTML的無序列表ul標籤的樣式解釋,給出了ul標籤中的type屬性三種值的介紹。現在就讓我們一起來看這篇文章吧
首先這篇文章一開始我們就開始介紹在html中是怎麼把ul標籤的點給去掉的:
#大家應該都使用過ul無序列表標籤,ul標籤的用法很多,很多時候我們都可以用點來替代,這樣也感覺挺好的。但有時候用點替代感覺不太好用,這時候我們通常都想著如何去掉那個點,或是改成別的樣式。今天這篇文章主要說的話就是如何去掉那個點的,後面我們也會說改成別的樣式去顯示。 (想看更多就來PHP中文網,這裡有關於HTML學習的課程)
#現在說說如何去掉點,我們用完全的程式碼實例來示範ul標籤:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <ul> <li>php中文网</li> <li>百度百科</li> <li>腾讯课堂</li> </ul> </body> </html>
這是一個基本的ul無序列表的應用,顯示效果如下圖所示:
這裡面都是自訂的小圓點,很多時候用小圓點也是可以的,但是如果我們想要去掉小圓點該怎麼做呢?來看看小編是怎麼實現的。
再給一個全部的ul標籤程式碼示範:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> <style type=""text/css> ul{ list-style: none; } </style> </head> <body> <ul> <li>php中文网</li> <li>百度百科</li> <li>腾讯课堂</li> </ul> </body> </html>
和上一個程式碼相比,這個程式碼只是加了一個css樣式的文件,用一點css樣式,就能改變ul無序列表的樣式。有些人雖然不會css樣式,但是這麼簡單的樣式只要記得就好,知道該怎麼寫就能消除掉ul標籤的預設點就行了。
這個的效果圖如下:
是不是真的沒有小圓點了,這樣的標籤能應用與很多場合,例如適合做導航條之類的應用,說完了去掉小圓點了。
二、現在我們說怎麼把ul標籤變成其它的樣式,比如,小圓點變成方正的形狀。讓我們繼續來看
在這裡我們說的是ul標籤的type的屬性,這個屬性在有序列表ol標籤中也能用,不過屬性的值不一樣而已。現在讓我們來看看type標籤在ul標籤中的應用程式:
這還有一個ul標籤的實例:
<ul type="square"> <li>php中文网</li> <li>百度百科</li> <li>腾讯课堂</li> </ul>
上圖type=“square”這是什麼意思呢?讓我們來看看效果圖:
看上圖,有點小了,但很明顯,是從原來的小圓點變成了現在的方正的黑點了。這就是樣式的其中之一,還有一個屬性值是:
type=「circle」這個的意思也很容易理解,我們還是先看一下效果圖:
#如上圖,現在都變成空心圓了,這是用HTML ul標籤和屬性組合而成的三種樣式(還有一種樣式是把小圓點變回來的,用的是type=“
disc”)在很多都開始用css樣式表來為標籤設定樣式,但還是有很多人都喜歡用純html標籤來實現樣式,就比如小編我,就一直用的都是HTML標籤的樣式,很少去用css樣式,有些時候是標籤的樣式不好用的時候我才去用css樣式來代替。
好了以上就是這篇關於ul標籤文章的全部內容(想學更多就來PHP中文網,一個學程式設計的網站),有問題的可以在下方留言。
【小編推薦】
html5中的meta標籤的三要素是什麼? meta標籤的使用總結
html select下拉框樣式怎麼製作? html select樣式詳解
以上是HTML中ul標籤如何去掉點? HTML無序列表的樣式實例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!