css定義li 圖片開頭是如何完成的？

家好，我是吉礻羊。

css定義li 圖片開頭

上圖是如何實現的呢？可以說剛剛開始學習css時，這樣做是很好的，但是現在有點過了，但是功能還是要會的。

下面是實例代碼，新來的小伙伴們快去試下吧

css

<!--

body { font: 12px 宋體,Arial,Verdana,Tahoma,sans-serif; }

ul { maring: 0; padding: 0; }

li {

list-style: none;

display: block;

width: 200px;

height: 20px;

line-height: 20px;

text-indent: 25px;

background: url(http://img.lanrentuku.com/img/allimg/1507/14375325421351.gif) left center no-repeat;

}

-->

</style>

html

<table>

<ul>

<li>測試第一項</li>

<li>測試第二項</li>

<li>測試第三項</li>

<li>測試第四項</li>

<li>測試第五項</li>

<li>測試第六項</li>

</ul>

</td>

</tr>

<tr>

<ul>

<li>測試第一項</li>

<li>測試第二項</li>

<li>測試第三項</li>

<li>測試第四項</li>

<li>測試第五項</li>

<li>測試第六項</li>

</ul>

</td>

</tr>

</table>

這里我是用的表格，因為這樣拉出來的快，但是學習中的你記得寫成自己的div哦！

然我們從事web前端外包開發服務很長時間了，但是對于li-style-type 的名稱和對應的符號，依舊是模棱兩可的，這方面我們要反省，要加強記憶，要把查詢文檔放在任何可以快速查到的地方，你是否和我一樣？

css中用list-style-type指定列表（lists）前面符號,如下：

li {list-style-type:符號名稱}

符號名稱可用的值為：

disc : CSS1　實心圓

circle : CSS1　空心圓

square : CSS1　實心方塊

decimal : CSS1　阿拉伯數字

lower-roman : CSS1　小寫羅馬數字

upper-roman : CSS1　大寫羅馬數字

lower-alpha : CSS1　小寫英文字母

upper-alpha : CSS1　大寫英文字母

none : CSS1　不使用項目符號

armenian : CSS2　傳統的亞美尼亞數字

cjk-ideographic : CSS2　淺白的表意數字

georgian : CSS2　傳統的喬治數字

lower-greek : CSS2　基本的希臘小寫字母

hebrew : CSS2　傳統的希伯萊數字

hiragana : CSS2　日文平假名字符

hiragana-iroha : CSS2　日文平假名序號

katakana : CSS2　日文片假名字符

katakana-iroha : CSS2　日文片假名序號

lower-latin : CSS2　小寫拉丁字母

upper-latin : CSS2　大寫拉丁字母

來源：切圖網 www.qietu.com

ublime / vscode 快捷生成HTML代碼的實現

文章目錄

1.基本html結構

2.生成div加類名的快捷鍵

3.帶類名的div

4.帶id的div

5.屬性【】

6.后代>

7.兄弟+

8.上級^

9.乘法*

10.文本{}

1、基本html結構

操作：輸入 !+Enter鍵

注意：這里輸入“！”+回車鍵前，需要清空原來生成的基本結構

實現效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     
</body>
</html>

2、生成div加類名的快捷鍵

操作：輸入 div.list>div.item_$*6

實現效果：

<div class="list">
    <div class="item_1"></div>
    <div class="item_2"></div>
    <div class="item_3"></div>
    <div class="item_4"></div>
    <div class="item_5"></div>
    <div class="item_6"></div>
</div>

3、帶類名的div

操作：輸入 div.wrapper

實現效果：

<div class="wrapper"></div>

4、帶id的div

操作： div#wrapper

實現效果：

<div id="wrapper"></div>

5、屬性 []

操作： span[title=“test”]

實現效果：

<span title="test"></span>

6、后代 >

操作：輸入div>span>a

實現效果：

<span title="test"></span>

7、兄弟 +

操作： div+p+span

實現效果：

<div></div>
<p></p>
<span></span>

8、上級 ^

操作： div>span^i

實現效果：

<div><span></span></div>
<i></i>

9、乘法 *

操作： ul>li*2

實現效果：

<ul>
    <li></li>
    <li></li>
</ul>

10、文本 {}

操作： div>span{這是文本}

實現效果：

<div><span>這是文本</span></div>

在線咨詢

上一篇：JSP 文件上傳
下一篇：css3D旋轉相冊

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css定義li 圖片開頭 是如何完成的？

ublime / vscode 快捷生成HTML代碼的實現

文章目錄

1、基本html結構

操作： 輸入 !+Enter鍵

實現效果：

2、生成div加類名的快捷鍵

操作： 輸入 div.list>div.item_$*6

實現效果：

3、帶類名的div

操作： 輸入 div.wrapper

實現效果：

4、帶id的div

操作： div#wrapper

實現效果：

5、屬性 []

操作： span[title=“test”]

實現效果：

6、后代 >

操作： 輸入div>span>a

實現效果：

7、兄弟 +

操作： div+p+span

實現效果：

8、上級 ^

操作： div>span^i

實現效果：

9、乘法 *

操作： ul>li*2

實現效果：

10、文本 {}

操作： div>span{這是文本}

實現效果：

您的項目需求

css定義li 圖片開頭是如何完成的？

操作：輸入 !+Enter鍵

操作：輸入 div.list>div.item_$*6

操作：輸入 div.wrapper

操作：輸入div>span>a