为网站首页添加六格实用栏目区块

为网站首页添加六格实用栏目区块，让网站看起来更加生动

截图

使用方法

复制下面代码添加到网站适当显示的位置即可

<div class="grid-widget">
<!-- 链接A -->
<a class="gw-link gwa" href="https://www.258dh.net/favorites/web.html" rel="bookmark">
<div class="io-icon"><i class="io io-zaixianjiaocheng"></i></div>
<h4 class="qw-title">建站导航</h4>
<div class="qw-title">主流建站程序</div>
<div class="qw-title">发挥你的想象，建出完美站点</div>
</a>
<!-- 链接B -->
<a class="gw-link gwb" href="https://www.258dh.net/favorites/sousuochaxun.html" rel="bookmark">
<div class="io-icon"><i class="io io-tongjichaxun"></i></div>
<h4 class="qw-title">信息查询</h4>
<div class="qw-title">便民信息查询</div>
<div class="qw-title">信息在线查询，主要就是方便</div>
</a>
<!-- 链接C -->
<a class="gw-link gwc" href="https://www.258dh.net/favorites/zaixiangongju.html" rel="bookmark">
<div class="io-icon"><i class="io io-gongju"></i></div>
<h4 class="qw-title">实用工具箱</h4>
<div class="qw-title">在线工具箱</div>
<div class="qw-title">工具打开即用，方便最主要</div>
</a>
<!-- 链接D -->
<a class="gw-link gwd" href="https://www.258dh.net/favorites/ziyuanzhan.html" rel="bookmark">
<div class="io-icon"><i class="io io-dianying"></i></div>
<h4 class="qw-title">电影采集站</h4>
<div class="qw-title">电影资源站</div>
<div class="qw-title">电影采集站，影视站长才懂得</div>
</a>
<!-- 链接E -->
<a class="gw-link gwe" href="https://www.258dh.net/favorites/xuanxuedaohang.html" rel="bookmark">
<div class="io-icon"><i class="io io-bagua"></i></div>
<h4 class="qw-title">玄学导航</h4>
<div class="qw-title">人生生日密码</div>
<div class="qw-title">了解人生运势，从这里开始</div>
</a>
<!-- 链接F -->
<a class="gw-link gwf" href="https://www.258dh.net/apps/rj.html" rel="bookmark">
<div class="io-icon"><i class="io io-ruanjianxiazai1"></i></div>
<h4 class="qw-title">软件下载</h4>
<div class="qw-title">万能软件下载</div>
<div class="qw-title">你要的软件这里都有，懂得都懂</div>
</a>
<div class="clear"></div>
</div>

<style>
.grid-widget {
margin: 0 -6px 0 0;
}

.grid-widget a {
position: relative;
background: #fff;
float: left;
width: 16.66666666666667%;
color: #000;
text-align: center;
margin: 0 -1px -1px 0;
padding: 20px 10px 15px 10px;
border: 1px solid #ddd;
transition-duration: .5s;
}

.grid-widget a:hover {
background: #c40000;
color: #fff;
border: 1px solid #c40000;
}

.grid-widget a:hover .io-icon .io {
color: #fff;
}

.io-icon .io{
font-size: 80px !important;
color: #c40000;
line-height: 80px;
margin: 0 0 20px 0;
display: block;
}

@media screen and (max-width: 900px) {
.grid-widget a {
width: 33.333333333333333%;
}
}

@media screen and (max-width: 700px) {
.grid-widget a {
width: 50%;
}
}

@media screen and (max-width: 400px) {
.grid-widget a {
width: 100%;
}
}
</style>