您的位置: 首页  >  文章  >  详解通过html与CSS做一个网页导航栏

详解通过html与CSS做一个网页导航栏

分类: 文章 • 2023-10-11 23:27:41

由于导航栏是几乎任何网页都必须具有的功能，所以学习他是我们必备的课程。下面，教程是通过代码实现由浅入深介绍导航栏，子菜单，以及样式，风格变化。首选需要认识<ul>和<ol>标签，<ul>是无序列表，<ol>是有序列表。<ol>有序列表在前端设计中基本上用的很少，制作网页导航栏，是通过无序列表<ul>来实现。
1.那么先看看有序列表是什么样的，ol标签。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol>
  <li>苹果</li>
  <li>梨子</li>
  <li>橘子</li>
</ol>
<ol start="40">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

他的属性有一下几个；

详解通过html与CSS做一个网页导航栏
运行下面的代码就可以看出有序列表的具体用法区别；

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<ol reversed>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<p><strong>注释：</strong>目前只有 Chrome 和 Safari 6 支持 ol 元素的 reversed 属性。</p>
<ol type=A>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<ol type=I>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

2.其次的重点是通过无序列表ul标签来一步一步来设计网页菜单：
（1）.通过<ul>标签做一个如下的简单版菜单样式；

<ul>
    <li>产品</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>
 <ul>
 	<li>产品</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（2）.做一个如下的子菜单：

<ul>
    <li>产品
<ul>
    <li>女装</li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

<ul>
<li>产品
<ul>
 	<li>女装</li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（3）.菜单横向排列：

<style>
ul li{float:left;width:250px;height:20px}</style>
<ul>
    <li>产品
<ul>
    <li>女装</li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

 <style>
ul li{float:left;width:200px;height:20px}</style>
<ul>
 	<li>产品
<ul>
 	<li>女装</li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（4）.去掉菜单字前面的圆圈原点:

<style>
ul li{float:left;width:200px;height:20px}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
    <li>产品
<ul>
    <li>女装</li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

 <style>
ul li{float:left;width:200px;height:20px}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
    <li>产品
<ul>
    <li>女装</li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

（5）.更改菜单样式风格：

<style>ul li{float:left;width:200px;height:30px;background-color:green;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
    <li>产品
<ul>
    <li>女装</li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

<style>
ul li{float:left;width:200px;height:30px;background-color:green;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
 	<li>产品
<ul>
 	<li>女装</li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（6）.菜单间距调整：

间距：调整宽高像素就好，不透明度：调节opacity值，字体颜色：调节background-color

<style>
ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
    <li>产品
<ul>
    <li>女装</li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

<style>
ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
 	<li>产品
<ul>
 	<li>女装</li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（7）.当然这个菜单是不能点击进入页面的，所以我们需要给其添加超链接a标签:

给女装添加一个超链接标签

<style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
    <li>产品
<ul>
    <li><a href="www.baidu.com" target="_blank" rel="noopener">女装</a></li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

<style>
ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;></style>
<ul>
 	<li>产品
<ul>
 	<li><a href="www.baidu.com" target="_blank" rel="noopener">女装</a></li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（8）.给鼠标滑动的地方加颜色

<style>ul li{float:left;width:100px;height:40px;background-color:green  ;opacity:0.8;}  ul {margin:0px;padding:0px;list-style:none;}    ul li a:hover {background-color:red}    </style>
<ul>
    <li>产品
<ul>
    <li><a href="www.baidu.com" target="_blank" rel="noopener">女装</a></li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

<style>
ul li{float:left;width:100px;height:40px;background-color:green	;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;}
ul li a:hover {background-color:red}
</style>
<ul>
 	<li>产品
<ul>
 	<li><a href="www.qaozen.com" target="_blank" rel="noopener">女装</a></li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

（9）.鼠标滑动显下拉菜单

<style>ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}    ul {margin:0px;padding:0px;list-style:none;}ul li ul li{display:none;}  ul li:hover ul li{display:block;}   ul li a:hover {background-color:red}    </style>
<ul>
    <li>产品
<ul>
    <li><a href="www.baidu.com" target="_blank" rel="noopener">女装</a></li>
    <li>男装</li>
    <li>男鞋</li>
    <li>女鞋</li>
</ul>
</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>首页</li>
</ul>

<style>
ul li{float:left;width:100px;height:40px;background-color:green;opacity:0.8;}
ul {margin:0px;padding:0px;list-style:none;}ul li ul li{display:none;}
ul li:hover ul li{display:block;}
ul li a:hover {background-color:red}
</style>
<ul>
 	<li>产品
<ul>
 	<li><a href="www.baidu.com" target="_blank" rel="noopener">女装</a></li>
 	<li>男装</li>
 	<li>男鞋</li>
 	<li>女鞋</li>
</ul>
</li>
 	<li>关于我们</li>
 	<li>联系我们</li>
 	<li>首页</li>
</ul>

本文转载自qaozen博客。由qaozen分享到csdn社区。

相关推荐