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

使用方法
复制下面代码添加到网站适当显示的位置即可
<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>
相关文章
没有相关内容!