div css问答列表布局代码

div css问答列表布局代码

收藏
div css问答列表布局代码
div css开发者社区内容问答列表布局样式,结构清晰,图标使用svg格式兼容高分辨率手机以及电脑,图标均使用定位实现,简单易用,下载即可使用。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 歪秀
  • 上传时间 7年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。