<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;Document</title>
<style>
ul{
/*デフォルトの小さなドット*/
list-style-type: disc;
/*中空の小さなドット* /
list-style-type:circle;
/*小さな実線の正方形*/
list-style-type:square;
/*番号付きリストに変換された数値シーケンス*/
list-style-type: 10 進数;
/*シリアル番号の前に 0 を追加します: 例: 01、02、03*/
list-style-type: 10 進数先頭ゼロ;
/ *画像を使用する 原点ではなく、サイズが非常に小さくて使いにくいため、代わりに li タグを直接制御します */
/*list-style-image: url(1.jpg);*/
}
/*リスト項目の自動定義*/
li{
/*ドットのキャンセル*/
list-style-type: none;
/*画像の位置を予約*/
padding-left: 2em;
/*画像をアップロード*/
list-style-image: url(1.jpg);
/*画像リスト項目は繰り返されません*/
背景-repeat: no-repeat;
/*画像サイズ*/
background-size: 1em 1em;
/*画像位置設定、テキスト上部グリッドとの位置合わせ、xy 軸目視検査*/
背景位置: 0 4px;
}
</style>
</head>
<body>
<h3>フロントエンド開発ツール</h3> ;
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
;li> Bootstrap</li>
</ul>
</body>
</html>
chobits42017-12-11 09:02:48
この問題を解決するには、次の 2 つの方法を使用することをお勧めします: 1. ソース画像のサイズを変更します。 2. li:before を使用してセットアップします
li{ list-style: none; } li:before{ content: ''; display: inline-block; height: y; width: x; background-image: url(); }