怎么去掉li、ul等前面的點(diǎn)及如何去掉空格的方法
2013-07-02 21:36來源:未知發(fā)布者:laiquliu
http://www./wangluo/201204wl4947.html
大部分DIV+CSS網(wǎng)站制作布局時(shí)經(jīng)常會(huì)遇到LI點(diǎn)的情況，特別是對(duì)新手來說可能有點(diǎn)陌生，如何去掉
中的點(diǎn)呢，或者如何改變點(diǎn)成數(shù)字1234或者改成空心圓方塊等呢，又如何改變點(diǎn)的顏色？其實(shí)很簡單：直接定義LI的CSS為list-style-type :none即可去掉點(diǎn)，如
li{
list-style-type :none;
}
如果要改變點(diǎn)的顏色，那么li里的字也會(huì)變顏色與大小的了，但你可以使用圖片來作為前面的點(diǎn)，這樣就可以隨心所欲地裝飾了。
li{
list-style: url("pre.gif") outside circle;
}
LI點(diǎn)的其他用法CSS代碼：
list-style-type :
disc 默認(rèn)值。實(shí)心圓
circle 空心圓
square 實(shí)心方塊
decimal 阿拉伯?dāng)?shù)字
lower-roman 小寫羅馬數(shù)字
upper-roman 大寫羅馬數(shù)字
lower-alpha 小寫英文字母
upper-alpha 大寫英文字母
none 不使用項(xiàng)目符號(hào)
也可以在body樣式里加上list-style:none;就Ok了。
值得注意的是，如果在CSS里面定義了BODY的樣式，請(qǐng)注意在CSS里面定義。不要直接在代碼里加入。
如果是要去掉單個(gè)UL，LI前面的點(diǎn)可以直接：
...
...
...
...
css對(duì)li標(biāo)簽前面圓點(diǎn)和空白的顯示控制方式：
去掉標(biāo)簽前的點(diǎn)：#ul{list-style:none; }
要去掉空格，則添加 #ul{margin:0; padding:0; }
在ul中加入margin:0px; 空白處沒了,不過圓點(diǎn)也沒了。其實(shí)在ul中加margin:0px; 不是圓點(diǎn)沒了,而是看不到了，可以用空白定義來控制設(shè)置顯示，看如下演示：
HTML代碼
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
HTML代碼
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
使用margin控制：
HTML代碼
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
- 志文工作室
- 計(jì)算機(jī)技術(shù)學(xué)習(xí)博客
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
不過值得注意的是，各瀏覽器對(duì)margin的解釋不同，在IE下是這樣的，在FF下可能完全是另一個(gè)樣子。
所以如果真的需要顯示這個(gè)圓點(diǎn)的話，可以用background來設(shè)置。
其他幾點(diǎn)DIV+CSS設(shè)計(jì)參考建議：
div最好只用在大部區(qū)塊
細(xì)部的地方盡量別用div
h1標(biāo)題在一個(gè)頁面最好只出現(xiàn)一次
次標(biāo)題就用h2
段落標(biāo)題用h3
以此類推
不是屬於資料的圖片盡量以背景插入的方式來呈現(xiàn)
如果真有心邁向標(biāo)準(zhǔn)
style="..."這個(gè)東西就盡量別用
img標(biāo)簽記得加上alt=""
外一篇拓展參考學(xué)習(xí)：
如何應(yīng)用ul、li標(biāo)簽 創(chuàng)建css橫向?qū)Ш讲藛危?/SPAN>
我們制作導(dǎo)航條按照傳統(tǒng)的方法由放在一行表格單元里的圖形圖像構(gòu)成，或者由單元格內(nèi)的文字所組成，由于人們不再推薦用表格來定位任何非表格的頁面內(nèi)容，所以很多制作Web的人正在尋找新的方法，用結(jié)構(gòu)化的XHTML標(biāo)記和CSS格式來創(chuàng)建導(dǎo)航條。這樣的創(chuàng)建方式也更對(duì)搜索引擎蜘蛛友好，這對(duì)我們來說是非常重要的。
創(chuàng)建CSS樣式文本導(dǎo)航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來很合理也很直觀。但問題在于把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你最后通常都不得不插入一些東西或者非換行的空白字符作為分隔，讓這些文字分離開來，不至于混在一起。但這樣有意義嗎？
現(xiàn)在我們正常的做法是應(yīng)用ul、li標(biāo)簽把鏈接作為無序列表（unordered list）來標(biāo)識(shí)。再應(yīng)用CSS樣式對(duì)其進(jìn)行控制，按我們預(yù)想的形式在容器中顯示出來。對(duì)導(dǎo)航條使用無序列表似乎是不符合直觀感受的，因?yàn)槲覀兞?xí)慣于把無序列表作為一個(gè)豎著推起來的列表項(xiàng)目，每個(gè)前面都放著一個(gè)列表預(yù)設(shè)標(biāo)記。這似乎不符合導(dǎo)航條水平方向的習(xí)慣。但作為獨(dú)立列表項(xiàng)目集合的列表邏輯結(jié)構(gòu)能夠適用于導(dǎo)航條里的鏈接；而CSS的規(guī)則讓你能夠強(qiáng)制取代列表項(xiàng)目缺省的表現(xiàn)形式，以消除它們并安排列表項(xiàng)在容器內(nèi)按水平方向排列，而不是從上而下的規(guī)則?，F(xiàn)在讓我們來看看實(shí)例，根據(jù)無序列表創(chuàng)建CSS樣式和XHTML標(biāo)簽的橫向?qū)Ш讲藛巍?/SPAN>
我們看看下面的xhtml代碼：
復(fù)制內(nèi)容到剪貼板程序代碼 程序代碼
HomePage
Div+CSS教程
CSS布局實(shí)例
CSS2.0教程
CSS在線手冊(cè)
Web標(biāo)準(zhǔn)
XHTML教程
我們?cè)倏纯搓P(guān)于這段xhtml的CSS代碼：
復(fù)制內(nèi)容到剪貼板程序代碼 程序代碼
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
我們來看看上面的代碼的運(yùn)行效果：
HTML代碼
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
或許你并不能完全理解這些代碼都是什么意義，都用來控制什么，達(dá)到什么效果。
下面我們來解析上面的代碼：
xhtml代碼首先定義了一個(gè)容器div id="nav"。這個(gè)容器用來放置這個(gè)無序列表橫向?qū)Ш讲藛蔚膬?nèi)容，但也有人認(rèn)為這個(gè)容器是多余的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點(diǎn)是可擴(kuò)展的，我們要為將來的擴(kuò)展留有足夠的余地，如果我們的導(dǎo)航樣式設(shè)計(jì)的更加復(fù)雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習(xí)慣。
#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家并不能理解有什么作用，它定義了強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對(duì)象。關(guān)于white-space屬性可以參考這里。
#nav li中的list-style-type: none;去除了列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記。使其更象是純文本，而沒有列表標(biāo)記。display: inline;聲明則能夠讓列表項(xiàng)目在頁面上從左向右浮動(dòng)，而不會(huì)讓每個(gè)項(xiàng)目顯示在單獨(dú)的行里而從上至下的排列。這兩項(xiàng)聲明是我們實(shí)現(xiàn)無序列表橫向?qū)Ш讲藛蔚年P(guān)鍵。
#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內(nèi)容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制鏈接文字之間的空白間隔的，你可以試著改變數(shù)值試試看。
至此，無序列表創(chuàng)建css橫向?qū)Ш讲藛蔚墓ぷ骶徒Y(jié)束了。
在CSS中經(jīng)常會(huì)使用到li標(biāo)簽，默認(rèn)情況下使用li時(shí)，會(huì)在文字前面自動(dòng)加上一個(gè)黑色的小圓點(diǎn)，有時(shí)候會(huì)覺得這個(gè)圓點(diǎn)多余，所以要去掉。下面介紹幾種常用的方法。
方法一：
百度
雅虎
新浪
谷歌
方法二：
li {list-style-type:none;}
百度
雅虎
新浪
谷歌
方法三：
.li_style {list-style-type:none;}
百度
雅虎
新浪
谷歌
ul li{list-style-type: none;} 這個(gè)是去點(diǎn)的，不過一般網(wǎng)頁都會(huì)在li的前面加上一個(gè)自己做的背景點(diǎn)，這個(gè)就去不掉了，你可以試試ul li {background:none;}。不要復(fù)制，我這里面有漢語的標(biāo)點(diǎn)
li {
display: inline;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
sds
如何去掉LI列表前面的空白！
去掉LI前面的圓點(diǎn)，使用了list-style-type: none;不過前面出現(xiàn)了空白，無法消除，使用0margin,0padding也無效?？梢杂?ul{ list-style-type:none; padding:0; margin:0;} 試試看
去掉圓點(diǎn)的LI:
測(cè)試
(責(zé)任編輯：laiquliu)
|
