div css制作新闻动态图文资讯列表布局，简洁大气的单排图片文字列表布局展示代码。

使用方法

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、body引入HTML代码

<div class="container">
	<h2 class="title">新闻动态</h2>
	<p class="desc">商之翼每日趣闻，新鲜事尽在新闻动态！</p>
	<ul class="news">
		<li class="news-item">
			<h3><a href="#"><i class="iconfont"></i>公司动态</a></h3>
			<dl>

				<dt>
			<a href="#" >
				
				<img src="statics/images/news_pic1.jpg">
				
			</a>
		</dt>
				<dd>
					<a href="#"><span>06-06</span>【亿邦动力】商之翼CEO在中国电子商务大会演讲：借助同城电商达成资源共享，渗透到城市的每个细胞，实现精准扶贫！</a>
				</dd>

				<dd>
					<a href="#"><span>07-06</span>“运筹帷幄，营在未来”—2018商之翼第三届客户运营交流沙龙会议成功举办</a>
				</dd>

			</dl>
		</li>
		<li class="news-item">
			<h3><a href="#"><i class="iconfont"></i>电商资讯</a></h3>
			<dl>

				<dt>
			<a href="#" >
				
				<img src="statics/images/news_pic2.jpg">
				
			</a>
		</dt>
				<dd>
					<a href="#"><span>07-25</span>新零售：手机点餐触角已展露</a>
				</dd>

				<dd>
					<a href="#"><span>07-18</span> 百世：有意回归供应链，布局全球</a>
				</dd>

			</dl>
		</li>
		<li class="news-item">
			<h3><a href="#"><i class="iconfont"></i>客户案例</a></h3>
			<dl>

				<dt>
			<a href="#" >
				
				<img src="statics/images/news_pic3.jpg">
				
			</a>
		</dt>
				<dd>
					<a href="#"><span>04-28</span>客户案例 | 上海地产集团教给你如何玩转农产品电商</a>
				</dd>

				<dd>
					<a href="#"><span>12-05</span>客户案例 | “互联网+购车”新模式正在成为新的风口 </a>
				</dd>

			</dl>
		</li>
	</ul>
</div> 

资源出处：https://www.moyublog.com/codes/291.html