使用方法：

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>開發(fā)者社區(qū)</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>如何做好游戲內(nèi)實時語音體驗</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>基于云計算的物聯(lián)網(wǎng)應(yīng)用場景有哪些？</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>為什么手機屏下指紋技術(shù)難以實現(xiàn)？</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 搭建微信小程序服務(wù)</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>