滚动鼠标顶部菜单变小
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>大小可变导航菜单演示</title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .bfwcont .header { position: fixed; left: 0; top: 0; width: 100%; background-color: #323436; } .bfwcont .inner { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1; } .bfwcont h1 { float: left; } .bfwcont h1 img { display: block; border: 0; } .bfwcont .nav { float: right; list-style-type: none; font-family: "Microsoft Yahei"; } .bfwcont .nav li { float: left; margin-left: 5px; } .bfwcont .nav a { float: left; color: #cecece; text-decoration: none; } .bfwcont .nav a:hover { background-color: #555; } .bfwcont .large .inner { padding: 20px 0; } .bfwcont .large h1 img { height: 64px; } .bfwcont .large .nav { padding-top: 10px; } .bfwcont .large .nav a { height: 44px; padding: 0 20px; line-height: 44px; font-size: 18px; } .bfwcont .small .inner { padding: 10px 0; } .bfwcont .small h1 img { height: 34px; } .bfwcont .small .nav { padding-top: 3px; } .bfwcont .small .nav a { height: 28px; padding: 0 10px; line-height: 28px; font-size: 14px; } .bfwcont .header, .dowebok .inner, .dowebok a, .dowebok img, .dowebok li { tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0