幫我看看ul和li的設置
益伦
益伦 2017-12-10 21:28:44
0
1
1182

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> ;Document</title>
   <style>
ul{
           /*預設小圓點*/
list-style-type: disc;
/空心小圓點*/
list-style-type: disc;
/空心* /
list-style-type: circle;
/*實心小方塊*/
list-style-type:square;
/*數字序號,變成有序列表*/
list-style-type: decimal;
/*序號前面加0:  例:01、02、03*/
list-style-type: decimal-leading-zero;
/*用圖片代替原點,必須尺寸很小,不好用,換直接對li標籤控制*/
           /*list-style-image: url(1.jpg);*/
}
      /*自定義清單項目*/
li{
           /*取消小圓點*/
list-style-type: none;
/*預留圖片位置*/
padding-left: 2em;
/*上傳圖片*/
list-style-image: url(1.jpg);
/*圖片清單項目不重複*/
background-repeat: no-repeat;
/*圖片大小*/
background-size: 1em 1em;
/*圖片位置設置,和文字頂格對其,xy軸目測*/
background-position: 0  4px;
}
   </style>
</head>
<body>
<h3>前端開發工具<
<
<ul>h3>前端開發工具</h3>
<ul>
#    <li>HTML</li>
   <li>CSS</li>
   <li>javaScript</li>
   <li>javaScript</li>##1   < ;li>Bootstrap</li>

</ul>

</body>
</html>

#######顯示的結果列表項目引用的圖片還是顯示很大,沒有縮小成1em大小,這是為啥? ###
益伦
益伦

全部回覆(1)
chobits4

建議使用下面兩個方法解決:1.更改你來源圖片的大小。 2.使用li:before進行設定

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}


熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板