当前位置 : 首页 > 代码 > 网页特效 > div css > div css新闻图文列表并排布局代码

VIP商用 div css新闻图文列表并排布局代码

div css制作新闻动态图文资讯列表布局,简洁大气的单排图片文字列表布局展示代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

推荐标签

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了