好看的文章列表布局

乐之者java

于 2020-05-01 12:30:27 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签：列表 css

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105876557

版权

前端专栏收录该内容

175 篇文章 3 订阅

订阅专栏

有时候需要展示文章的列表，自己写起来审美感又不是很强（其实根本没有审美感了.......），也就是没人给你说该做成什么样子，你自己想吧，又想得不好看，兴许程序员就是这样，审美是设计的事情，程序员只关心怎么去实现这种设计，就像与人交流，需要长时间的锻炼，为什么要与人交流？大道理自然很多，不过总感觉大道理事不关己，从切身利益来讲，很好的随机应变的语言表达能力，能让你在工作中少吃很多亏，不要认为是福，在工作中，别人没把你当朋友，也没把你当亲戚，你也没必要一味忍让，这样别人并不会感念你的好的，你自己揽事，别人也不会感激你的，别人的朋友圈依然不让你看，虽然我并不想看他的。审美与语言需要很长的时间来锻炼，而程序员就缺乏这个锻炼的场景，不过，大部分开发人员也不愿意去锻炼，那就只有安慰自己吃亏是福了。跑偏了，来看看我分享一个文章列表的样式。效果如下：

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>