具体效果看本站首页侧边栏,实现起来其实也挺容易的。
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>
你可能对这些文章感兴趣:
- 适合小白的多说本地化、显示多说评论者UA信息及管理员标示教程(多说已say byebye)
- 一秒钟学习对一生都有用的知识(1)
- 陌小雨博客导航的优化思路
- WordPress有效屏蔽垃圾评论
- 分享一个带动态数字倒计时的页面跳转源码
- WordPress升级到WordPress4.9的办法
- WordPress子主题制作只需3步
- WordPress中wpdb操作数据库方法实例
- Yusi主题百度分享样式显示不正常解决办法(100%可行)
- 启用七牛后知更鸟主题无法评论解决办法
- WordPress主题添加jQuery图片延迟加载Lazyload代码
- WordPress插件推荐:theme-my-login
- Xampp出现Fatal error: Uncaught Error: Call to undefined function mysql_connect()
- 纯CSS给网站添加春节喜庆
如有疑问,请前往问答中心反馈!
反馈