1.程序案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*统一清除内外默认边距*/ * { padding: 0px; margin: 0px; } .article { width: 410px; height: 283px; border: 1px solid #ccc; margin: 50px; padding: 20px 15px 0; } .article h4 { color: #202026; font-size: 22px; border-bottom: 1px solid #ccc; padding-bottom: 3px; } .article li { list-style: none;/*清除列表的样式*/ height: 38px; line-height: 38px; border-bottom: 1px dashed #ccc; text-indent: 2em;/*首行缩进*/ } ul { margin-top: 12px; } .article a{ font-size: 14px; color: #333; text-decoration: none; } .article a:hover { text-decoration: underline; color: red; } </style> </head> <body> <div class="article"> <h4>最新的文章</h4> <ul> <li><a href="#">平面设计</a></li> <li><a href="#">淅淅沥沥里</a></li> <li><a href="#">梦想</a></li> <li><a href="#">梦中还在</a></li> <li><a href="#">依然在等待</a></li> </ul> </div> </body> </html>
2.效果
