CSS關於list-style-image表徵圖的位置的問題解決

來源:互聯網
上載者:User
原始碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>實驗二</title><style type="text/css">li.HTML5 {list-style-image:url(HTML5和CSS3執行個體教程.jpg);}li.Program {list-style-image:url(編程原本.jpg);}li.iPhone {list-style-image:url(24小時玩轉iPhone.jpg);}</style></head><body><div style="text-align:center"><ul><li class="Program">編程原本</li><li class="iPhone">24小時玩轉iPhone</li><li class="HTML5">HTML5和CSS3執行個體教程</li></ul></div></body></html>

啟動並執行效果。我要的是圖片可以完全顯示。如果呢個可以解決的話,再追加分數

<style type="text/css">                                              /*將li設定為塊狀,在加個高度試試*/                                               li{display:block; height:30px;}li.HTML5 {list-style-image:url(HTML5和CSS3執行個體教程.jpg);}li.Program {list-style-image:url(編程原本.jpg);}li.iPhone {list-style-image:url(24小時玩轉iPhone.jpg);}</style>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.