水平导航栏和垂直导航栏

效果图：

垂直导航栏：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{list-style-type: none;margin: 0;padding: 0;border-radius:5px}ul.n1 {background-color: bisque;width: 10%;position: fixed;height: 100%;border: 1px solid black;}li.h1{border: 1px solid black;}li.h1 h2{font-size: 1.25em;color: black;display: block;text-decoration: none;}li.h1 :hover,li h1:active{background-color: blue;color: white;}li.h2 a{font-size: 1em;text-align: center;color: black;display: block;text-decoration: none;background-color: antiquewhite;}.n2{display: none;}li.h2 :hover{background-color: aqua;}li.h1 :hover .n2{display: block;}</style>
</head>
<body><ul class="n1"><h2>原神</h2><li class="h1"><h2 href="#">世界探险</a><ul class="n2"><li class="h2"><a href="#">蒙德</a></li><li class="h2"><a href="#">璃月</a></li><li class="h2"><a href="#">稻妻</a></li><li class="h2"><a href="#">须弥</a></li><li class="h2"><a href="#">枫丹</a></li></ul></li>  <li class="h1"><h2 href="#">活动挑战</h2></li><li class="h1"><h2 href="#">抽卡记录</h2></li></ul><div style="margin-left:11%;padding:1px 15px;height:800px;background-color: rgb(175, 253, 254);">内容</div>
</body>
</html>

水平导航

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="01.css">
</head>
<body><div class="title"><ul class="n1"><li class="logo"><p class="logo">原神</p></li><li class="h1"><h2>世界探险</a><ul class="n2"><li class="h2"><a href="#">蒙德</a></li><li class="h2"><a href="#">璃月</a></li><li class="h2"><a href="#">稻妻</a></li><li class="h2"><a href="#">须弥</a></li><li class="h2"><a href="#">枫丹</a></li></ul></li>  <li class="h1"><h2 href="#">活动挑战</h2></li><li class="h1"><h2 href="#">抽卡记录</h2></li><li class="h11"><a href="#">关于我们</a></li><li class="h11"><a href="#">官网</a></li></ul></div><div class="content"></div>
</body>
</html>

CSS

*{margin: 0;padding: 0;list-style-type: none;text-decoration: none;
}div.title {width: 100%;height: 50px;background-color: rgb(198, 188, 48);
}
li.h1 {float: left;display: block;width: 250px;height: 50px;font-size: 28px;
}
li.h11 {float: right;display: block;width: 100px;height: 50px;font-size: 15px;
}
li.logo{float: left;display: block;width: 200px;
}
p.logo{text-align: center;font-size: 40px;
}
li.h2 a{display: block;background-color: rgb(198, 188, 48); text-decoration: none;color: black;  text-align: center;font-size: 20px;
}
li.h2{display: none;
}
li.h2:hover a{background-color: white;
}
li.h1:hover{background-color: white;
}
li.h1:hover .h2{display: block;
}
div.content{background-color: white;width: 100%;height: 800px;
}

水平导航栏和垂直导航栏相关推荐

前端组件从零之垂直导航栏
今天继续组件文章的分享.结合上一次讲到的水平导航栏,今天就讲讲垂直导航栏.其实原理和水平导航栏原理其实差不多类似,那么就来谈谈. 说到垂直导航栏,用到最多的地方就是电商网页,特别像淘宝,天猫,京东,苏 ...
html+css+导航栏（垂直+水平+下拉式）
HTML+CSS 希望能每天更新祷告吧kikikkk 导航栏导航条基本上是一个链接列表所以使用 ul 和li元素非常有意义垂直导航栏需要 a元素的样式,建立一个垂直的导航栏导航栏的各个格子宽 ...
CSS技能点--垂直导航栏实例
点此查看所有教程.项目.源码导航文章目录 1. 背景 2. 实现过程 2.1 创建ul导航栏 2.2 优化列表样式 2.3 设置导航栏整体风格 2.4 优化超级链接样式 2.5 添加图标 2.6 ...
【纯html+css垂直导航栏代码】
纯html+css垂直导航栏代码 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
上一节:电商项目实战第四节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[轮播图特效] 文章目录 [考拉海购网站]之[商品栏及右侧垂直导航] 第一步,页面布局分布情况分析第二步,根据页面 ...
css:动画高级垂直导航栏王者荣耀导航栏
垂直导航栏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
小程序导航穿透且自定义导航栏
需求实现小程序隐藏头部导航栏,且导航栏穿透无高度,并且要定义返回事件文章目录直接上图 index.wxml index.js index.wxss index.json 页面引用 json配置 ...
android studio 顶部导航栏_Android10 手势导航开发与处理：边到边（I）
这是我们有关"手势导航"系列的第一篇文章. 借助Android 10,已添加了新的系统导航模式,允许用户向后导航,导航至主屏幕并通过手势触发设备助手. Android 10 中新手 ...

水平导航栏和垂直导航栏

水平导航栏和垂直导航栏相关推荐

最新文章

热门文章