有时候需要展示文章的列表，自己写起来审美感又不是很强（其实根本没有审美感了.......），也就是没人给你说该做成什么样子，你自己想吧，又想得不好看，兴许程序员就是这样，审美是设计的事情，程序员只关心怎么去实现这种设计，就像与人交流，需要长时间的锻炼，为什么要与人交流？大道理自然很多，不过总感觉大道理事不关己，从切身利益来讲，很好的随机应变的语言表达能力，能让你在工作中少吃很多亏，不要认为是福，在工作中，别人没把你当朋友，也没把你当亲戚，你也没必要一味忍让，这样别人并不会感念你的好的，你自己揽事，别人也不会感激你的，别人的朋友圈依然不让你看，虽然我并不想看他的。审美与语言需要很长的时间来锻炼，而程序员就缺乏这个锻炼的场景，不过，大部分开发人员也不愿意去锻炼，那就只有安慰自己吃亏是福了。跑偏了，来看看我分享一个文章列表的样式。效果如下：
html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>09-盒子模型相关属性练习之文章列表</title> </head> <body> <div class="article"> <h1>最新文章/<span>New Articles</span></h1> <ul> <li>文章标题1</li> <li>文章标题3</li> <li>文章标题4</li> <li>文章标题5</li> <li>文章标题2</li> </ul> </div> </body> </html>
css代码：
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,
textarea,p,blockquote,th,td{margin:0;padding:0}
body{
background:#efefef;
}
.article{
width:372px;
height:232px;
box-sizing:border-box;
border:1px solid black;
margin:0 auto;
/*嵌套元素之间的关系多使用padding*/
padding:15px;
}
h1{
font-family:"微软雅黑";
font-size:18px;
border-bottom:1px solid black;
padding-bottom:10px;
}
span{
font-family:"微软雅黑";
font-size:14px;
}
ul{
margin-top:10px;
list-style:none;
}
ul li{
line-height:30px;
border-bottom:1px dashed #666;
padding-left:20px;
font-family:"微软雅黑";
font-size:12px;
color:#242424;
}
</style>