1.效果
2.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0px; } li { list-style: none; } .news{ 298px; height: 198px; border:1px solid #ccc; margin:0 auto; background-image: url(images/line.jpg); margin-top:100px; padding:15px; } .box h2 { font-size: 18px; border-bottom: 1px solid #ccc; padding:5px 0px; margin-bottom: 10px; } .list li { height: 30px; border-bottom: 1px dashed #ccc; line-height: 30px; background: url(images/arr.jpg) no-repeat 5px center; } .list li a { font-size: 12px; color:#333; text-decoration: none; margin-left:20px; } .list li a:hover { text-decoration: underline; } </style> </head> <body> <div class="news"> <div class="box"> <h2>最新文章/New Articles</h2> </div> <div class="list"> <ul> <li><a href="#">北京招聘网页设计，平面设计，php</a></li> <li><a href="#">体验javascript的魅力</a></li> <li><a href="#">jquery世界来临</a></li> <li><a href="#">网页设计师的梦想</a></li> <li><a href="#">jquery中的链式编程是什么</a></li> </ul> </div> </div> </body> </html>