第一种：垂直导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏实例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightblue;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color:blue;
}
</style>
</head>
<body>

</body>
</html>

第二种：水平左边导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏实例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightblue;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color:blue;
}
</style>
</head>
<body>

</body>
</html>

第三种：水平右边导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏实例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightblue;
}

li {
float: right;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color:blue;
}
</style>
</head>
<body>

</body>
</html>

css垂直+水平导航栏代码实例相关推荐

CSS实现垂直/水平导航栏
文章目录一级基本导航栏怎么显示?导航栏 = 链接列表垂直导航栏水平导航栏二级导航栏垂直二级水平二级动画效果考虑导航栏位置和导航栏下方内容位置行内元素和块级元素的具体区别是什么?in ...
CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...
【纯html+css垂直导航栏代码】
纯html+css垂直导航栏代码 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Bann ...
CSS导航栏水平导航栏出炉
越往后面这速度就降低下来了,前面的简单可以快速过去. <!DOCTYPE html> <html lang="en"><head><met ...
几种纯css布局的导航栏
1.垂直导航栏页面效果 <ul class="nav"><li><a href="home.htm">Home</a ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

css垂直+水平导航栏代码实例

第一种：垂直导航栏

第二种：水平左边导航栏

第三种：水平右边导航栏

css垂直+水平导航栏代码实例相关推荐

最新文章

热门文章