CSS3实现用户功能菜单特效.zip资源-CSDN文库

共9个文件

css：3个

eot：1个

ttf：1个

版权申诉

javascript

jQuery

HTML5

163 浏览量 2022-11-17 21:17:50 上传评论收藏 297KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现用户功能菜单特效.zip （9个子文件）

CSS3实现用户功能菜单特效

CSS3实现用户功能菜单特效.jpg 32KB

jiaoben3866

css

reset.css 774B

font-awesome.min.css 21KB

style.css 2KB

fonts

fontawesome-webfont.eot 55KB

fontawesome-webfont.woff 64KB

fontawesome-webfont.svg 280KB

fontawesome-webfont.ttf 110KB

index.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS3实现用户功能菜单特效 - 网页模板</title> <link href="css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> </head> <body> <div class="l-main"> <div class="menu"> <header class="menu__header"> <h1 class="menu__header-title">Incoming Messages</h1> </header> <div class="menu__body"> <ul class="nav"> <li class="nav__item"> <a href="#" class="nav__item-link is-active"> <i class="fa fa-envelope nav__item-icon"></i> <span class="nav__item-text">News</span> <span class="badge badge--warning">32</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-flag nav__item-icon"></i> <span class="nav__item-text">Priority</span> <span class="badge">8</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-space-shuttle nav__item-icon"></i> <span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-archive nav__item-icon"></i> <span class="nav__item-text">Archived</span> <span class="badge">3</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-trash nav__item-icon"></i> <span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <span class="nav__item-text">Show all</span> </a> </li> </ul> </div> </div> <div class="menu menu--small"> <header class="menu__header"> <h1 class="menu__header-title">Incoming</h1> </header> <div class="menu__body"> <ul class="nav"> <li class="nav__item"> <a href="#" class="nav__item-link is-active"> <i class="fa fa-envelope nav__item-icon"></i> <span class="badge badge--warning">32</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-flag nav__item-icon"></i> <span class="badge">8</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-space-shuttle nav__item-icon"></i> <span class="badge">0/17</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-archive nav__item-icon"></i> <span class="badge">3</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <i class="fa fa-trash nav__item-icon"></i> <span class="badge">9</span> </a> </li> <li class="nav__item"> <a href="#" class="nav__item-link"> <span class="nav__item-text">Show all</span> </a> </li> </ul> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉