原圖
效果圖
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .readtop{width: 270px;} .prompt1{border:1px solid #db3340;font-weight:400 ; padding-left:5px; padding-right: 5px; cursor: hand; color: #db3340;} .prompt{border:1px solid #ccc; padding-left: 5px;padding-right: 5px;} li{list-style:none;padding:5 5 5 5;line-height:50px; font-weight: bold;} .top1{font-weight:700;} .top{border-top:1px dashed #ccc;} a:hover{color:#db3340;} a{cursor:pointer;} </style> </head> <body> <ul class="readtop"> <li class="top1">圖書暢銷榜</li> <li class="top"> <span class="prompt1"><strong>1</strong></span> <a title="當我足夠好，才會遇見你">當我足夠好，才會遇見你</a> </li> <li class="top" ><span class="prompt1"><strong>2</strong></span> <a title="皮囊">皮囊</a></li> <li class="top"><span class="prompt1"><strong>3</strong></span> <a title="當我足夠好，才會遇見你">李光耀論中國與世界</a></li> <li class="top"><span class="prompt"><strong>4</strong></span> <a title="乖，摸摸頭">乖，摸摸頭</a></li> <li class="top" ><span class="prompt"><strong>5</strong></span> <a title="男女內參">男女內參</a></li> </ul> </body> </html>
這個css樣式，不適合在項目中使用，角度不夠高