CSS的ul和li實現(xiàn)橫向排列和去掉li的點
發(fā)布時間:2013-10-23 17:39:28 作者:佚名
我要評論

怎么實現(xiàn)ul的橫向排列和去掉li那個煩人的點,現(xiàn)在找到方法了,在此與大家分享下,感興趣的朋友可以參考下,以備不時之需
今天做網(wǎng)頁是老是不懂怎么實現(xiàn)ul的橫向排列和去掉li那個煩人的點,現(xiàn)在找到方法了,做個筆記:
#ul {
float:left;
}
#ul li {
float:left;
list-style:none;
}
順便拓展一下li的list-style:
ul {
list-style:square inside url('.../.img');
}
ul {
list-style:circle;
}
ol {
list-style:upper-roman;
}
ol {
list-style:lower-alpha;
}
再寫個今天看到的東西,是關(guān)于dl,dt,dd的,其實就是類似于子類的,我比較少見到各個網(wǎng)頁上用:
<dl>
<dt>Apple</dt>
<dd>蘋果</dd>
<dt>Boy</dt>
<dd>男孩</dd>
</dl>
效果如下:
復(fù)制代碼
代碼如下:#ul {
float:left;
}
#ul li {
float:left;
list-style:none;
}
順便拓展一下li的list-style:
復(fù)制代碼
代碼如下:ul {
list-style:square inside url('.../.img');
}
ul {
list-style:circle;
}
ol {
list-style:upper-roman;
}
ol {
list-style:lower-alpha;
}
再寫個今天看到的東西,是關(guān)于dl,dt,dd的,其實就是類似于子類的,我比較少見到各個網(wǎng)頁上用:
復(fù)制代碼
代碼如下:<dl>
<dt>Apple</dt>
<dd>蘋果</dd>
<dt>Boy</dt>
<dd>男孩</dd>
</dl>
效果如下:

相關(guān)文章
- 這篇文章主要介紹了CSS實現(xiàn)ul和li橫向排列的兩種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2020-02-21
- ul li的背景小圖標屬性設(shè)置一般會有兩種情況:定義在ul里及l(fā)i里,這兩種定義在什么情況下使用,在下文給出詳細的介紹,經(jīng)常div+css布局的朋友不妨參考下,希望對大家有所幫2013-09-27
DIV+CSS里,我們用得最多的就是ul li來顯示數(shù)據(jù),如新聞按鈕等,下面給大家一個css ul li的例子供學(xué)習(xí)
2023-05-21 UL、LI 無序列表實現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單,改改風(fēng)格,讓大家感到新鮮一點,其它主要還是使用了Li列表,整體布局簡潔,美觀大方,適合大部分網(wǎng)站使用,顏色和菜單空隙可隨意調(diào)節(jié),希望大
2009-11-08
網(wǎng)頁制作Webjx文章簡介:不知道是標準害了大家還是大家害了標準,繼class和div被濫用后,ul列表也有被不正確使用的趨勢。
今天交流會上,分享前端的開發(fā)經(jīng)
2009-04-02
這篇文章主要介紹了CSS在UL LI的樣式用法,主要是UI上的應(yīng)用,我們通過代碼分離的方式通過css完全控制css的樣式
2023-05-21