当前位置 : 首页 > 代码 > 网页特效 > div css > div css问答列表布局代码

VIP商用 div css问答列表布局代码

div css开发者社区内容问答列表布局样式,结构清晰,图标使用svg格式兼容高分辨率手机以及电脑,图标均使用定位实现,简单易用,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、body引入HTML代码

<div class="developer-con">
	<div class="developer-inner">
		<div class="developer-tit">
			<h3>开发者社区</h3>
		</div>
		<div class="developer-box">
			<ul class="developer-list">
				<li class="developer-list-item">
					<dl>
						<dt class="group-title">
							<a href="#" class="group-header"> <i class="group-column"></i> 专栏</a>
						</dt>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>腾讯云直播答题方案解析</p>
								<ul class="group-content-info">
									<li>
										<i></i>4587
									</li>
								</ul>
							</a>
						</dd>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>如何做好游戏内实时语音体验</p>
								<ul class="group-content-info">
									<li>
										<i></i>2997
									</li>
								</ul>
							</a>
						</dd>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>腾讯云独家详解小程序多人视频通话</p>
								<ul class="group-content-info">
									<li>
										<i></i>3240
									</li>
								</ul>
							</a>
						</dd>
					</dl>
				</li>
				<li class="developer-list-item">
					<dl>
						<dt class="group-title">
							<a href="#" class="group-header"> <i class="group-column icon-ask"></i> 问答</a>
						</dt>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>基于云计算的物联网应用场景有哪些?</p>
								<ul class="group-content-info">
									<li>
										<i class="icon-pl"></i>4587
									</li>
								</ul>
							</a>
						</dd>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>如何看待比尔盖茨对人工智能的评价:中国排第二?</p>
								<ul class="group-content-info">
									<li>
										<i class="icon-pl"></i>2997
									</li>
								</ul>
							</a>
						</dd>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>为什么手机屏下指纹技术难以实现?</p>
								<ul class="group-content-info">
									<li>
										<i class="icon-pl"></i>3240
									</li>
								</ul>
							</a>
						</dd>
					</dl>
				</li>
				<li class="developer-list-item">
					<dl>
						<dt class="group-title">
							<a href="#" class="group-header"> <i class="group-column icon-lib"></i> 实验室</a>
						</dt>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>基于 Ubuntu 搭建 WordPress 个人博客</p>
								<ul class="group-content-info">
									<li>
										<i class="icon-time"></i>4587
									</li>
									<li class="group-li">
										<i class="icon-user"></i>4587
									</li>
								</ul>
							</a>
						</dd>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>基于 CentOS 搭建微信小程序服务</p>
								<ul class="group-content-info">
									<li>
										<i class="icon-time"></i>4587
									</li>
									<li class="group-li">
										<i class="icon-user"></i>4587
									</li>
								</ul>
							</a>
						</dd>
						<dd class="group-content">
							<a href="#" class="group-content-item">
								<p>基于 Ubuntu 搭建 Discuz 论坛</p>
								<ul class="group-content-info">
									<li>
										<i class="icon-time"></i>4587
									</li>
									<li class="group-li">
										<i class="icon-user"></i>4587
									</li>
								</ul>
							</a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>
</div>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

推荐标签

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了