原图
效果图
<!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样式，不适合在项目中使用，角度不够高