欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中ul li的背景小圖標屬性設置的兩種情況

  發(fā)布時間：2013-09-27 16:32:12   作者：佚名   我要評論
ul li的背景小圖標屬性設置一般會有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細的介紹，經常div+css布局的朋友不妨參考下，希望對大家有所幫助
這里我們分兩種情況列出：
①當標題前的圖標是很長的一綹而不是單獨的一個點或者類似圖標時，在定義背景圖background要定義在<ul>里。因為很長，所以放在<li>的外邊<ul>里
②當標題前的圖標時單獨的一個點兒或者方塊或者其他類似圖標時，定義背景圖background要放在<li>里

A

復制代碼
代碼如下:

<style>
.test1 { width:100px; height:265px; background:url(http://www.86image.cn/statics/images/show/li.jpg) no-repeat scroll 0 8px; }
.test1 li {padding-left:30px; line-height:27px; list-style-type:none;}
</style>
<ul class="test1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>

如圖示：
 

B

復制代碼
代碼如下:

<style>
.test1 li { padding-left:15px; background:url("http:www.86image.cn/statics/images/tpl1/images/icon_fk.gif" ) no-repeat scroll 1px 8px; line-height:22px; list-style-type:none;}
</style>
<ul class="test1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

如圖示：

相關文章

  • CSS實現(xiàn)ul和li橫向排列的兩種方法

    這篇文章主要介紹了CSS實現(xiàn)ul和li橫向排列的兩種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-02-21

  • CSS的ul和li實現(xiàn)橫向排列和去掉li的點

    怎么實現(xiàn)ul的橫向排列和去掉li那個煩人的點，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時之需
    2013-10-23

  • 用ul、li標簽創(chuàng)建css橫向導航菜單示例

    創(chuàng)建CSS樣式文本導航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來很合理也很直觀，接下來為大家介紹下具體的創(chuàng)建過程，感興趣的朋友可以參考
    2013-09-21

  • css控制UL LI 的樣式詳解(推薦)

    DIV+CSS里，我們用得最多的就是ul li來顯示數(shù)據(jù)，如新聞按鈕等,下面給大家一個css ul li的例子供學習
    2023-05-21

  • UL、LI 無序列表實現(xiàn)純CSS網站導航菜單

    三行的純CSS網站導航欄菜單，改改風格，讓大家感到新鮮一點，其它主要還是使用了Li列表，整體布局簡潔，美觀大方，適合大部分網站使用，顏色和菜單空隙可隨意調節(jié)，希望大
    2009-11-08

  • CSS經驗:ul列表不正確使用的趨勢

    網頁制作Webjx文章簡介：不知道是標準害了大家還是大家害了標準，繼class和div被濫用后，ul列表也有被不正確使用的趨勢。 今天交流會上，分享前端的開發(fā)經
    2009-04-02

  • CSS在UL LI的樣式用法(UI上的應用)

    這篇文章主要介紹了CSS在UL LI的樣式用法，主要是UI上的應用，我們通過代碼分離的方式通過css完全控制css的樣式
    2023-05-21

最新評論