^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 若文中代码有问题,可能是少了几个问号,留言一定会解决!
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 站点文章结尾新增了赞赏通道
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

实现炫酷的六宫格

具体效果看本站首页侧边栏,实现起来其实也挺容易的。

1、css

aside.sidebar nav{height:250px;overflow:hidden}aside nav ul{list-style-type:none;text-align:center}aside nav 
ul li{float:left;width:115px;line-height:124px;height:124px;margin-right:2px}aside nav ul li.ab
{background:#71a532}aside nav ul li.ab a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate
(360deg);-o-transform:rotate(360deg);background:#666;-webkit-transition:all 1s}aside nav ul li.sy
{background:#f90}aside nav ul li.sy a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-
o-transform:rotate(360deg);background:#F60;-webkit-transition:all 1s}aside nav ul li.js{background:#8c49ad}
aside nav ul li.js a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate
(360deg);background:#66C;-webkit-transition:all 1s}aside nav ul li.msh{background:#e7769e}aside nav ul li.msh 
a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate
(360deg);background:#F66;-webkit-transition:all 1s}aside nav ul li.xc{background:#a98659}aside nav ul li.xc 
a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate
(360deg);background:#C93;-webkit-transition:all 1s}aside nav ul li.ly{background:#63a8e8}aside nav ul li.ly 
a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate
(360deg);background:#06C;-webkit-transition:all 1s}aside nav ul li a{display:block;color:#FFF}aside nav ul li 
a:hover{font-weight:bold;color:#FF0}

2、Html

在小工具栏新建文本,拷贝下面的代码:

<nav>
      <ul>
        <li class="ab"><a href="#" rel="no follow" target="_blank">建站软件</a></li>
        <li class="sy"><a href="#" rel="no follow" target="_blank">知更鸟专题</a></li>
        <li class="js"><a href="#" rel="no follow" target="_blank">Xiu 专题</a></li>
        <li class="msh"><a href="#" rel="no follow"  target="_blank">Yusi 专题</a></li>
        <li class="xc"><a href="#"  rel="no follow" target="_blank">淘宝客</a></li>
        <li class="ly"><a href="#" rel="no follow" target="_blank">诗集</a></li>
     </ul>      
    </nav>
历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

评论 1

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. Han
    应该都可以放吧回复

登录

忘记密码 ?

切换登录

注册