久久资源网

div css问答列表布局代码

div css问答列表布局代码

2020-12-05 21:43:56 DIV CSS

售价:5.00积分 会员免费

特别声明:资源售价只是赞助,不代表代码或者素材本身点数。收取费用仅维持本站的日常运营所需!

div css问答列表布局代码

div css开发者社区内容问答列表布局样式,结构清晰,图标使用svg格式兼容高分辨率手机以及电脑,图标均使用定位实现,简单易用,下载即可使用。

 

使用方法

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>

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

关注微信