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