原始碼如下:
<!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>
以上是CSS關於list-style-image圖示的位置的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!