使用HTML和CSS创建导航菜单

最新推荐文章于 2022-12-19 16:08:57 发布
最新推荐文章于 2022-12-19 16:08:57 发布
阅读量375 收藏 3
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46399258/article/details/106353607
版权

创建结构：在这里，我们将使用 li 标签创建一个普通的结构。这将创建一个简单的界面，你可以通过运行以下代码进行检查：

HTML代码如下：

<!DOCTYPE html> <html> <head>    
 <title>如何使用HTML和CSS创建面导航</title> 
 </head>
  <body>    
  <h1>web前端开发公众号</h1>    
   <b>网址：www.webqdkf.com</b>   
  <ul class="addressLink">       
 <li>            
<a href="#">HOME</a>      
   </li>     
  <li>       
<a href="#">WEB</a>      
   </li>        
  <li>           
   <a href="#">CSS</a>      
  </li>      
       <li>     
      <a href="#">HTML</a>     
    </li>        
 <li>         
 <a href="#">JS</a>     
 </li>       
 <li>       
<a href="#">VUE</a>      
 </li>    
</ul> 
 </body> 
 </html>

设计结构：这是最困难的任务，是在导航的右侧创建箭头形状。为了创建箭头形状，我们将使用:: after选择器。使用z-index属性将一个列表放置在另一列表上。对于CSS开发人员而言，这些事情都是非常容易的。
CSS代码：

   <style> 
        body { 
            text-align: center; 
        } 
        h1{ 
            color: #; 
        } 
          
        /* Styling addressLink class */ 
        .addressLink { 
            list-style: none; 
            overflow: hidden; 
            font: 16px; 
            margin: 30px; 
            padding: 0px; 
            border: 2px solid black; 
            font-style: italic; 
        } 
          
        /* Floating addressLink list */ 
        .addressLink li { 
            float: left; 
        } 
          
        /* Styling addressLink list's anchor element*/ 
        .addressLink li a { 
            background: #19b0cb; 
            color: white; 
            text-decoration: none; 
            padding: 5px 0px 5px 65px; 
            position: relative; 
            float: left; 
        } 
          
        .addressLink li a:after { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid #19b0cb; 
            margin-top: -50px; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 2; 
        } 
          
        .addressLink li a:before { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid white; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 1; 
        } 
          
        /* First child padding */ 
        .addressLink li:first-child a { 
            padding-left: 10px; 
        } 
          
        /* Second child bg-color */ 
        .addressLink li:nth-child(2) a { 
            background: #7c7f7f; 
        } 
          
        /* Second child Second half bg-color */ 
        .addressLink li:nth-child(2) a:after { 
            border-left-color: #7c7f7f; 
        } 
          
        /* Third child bg-color */ 
        .addressLink li:nth-child(3) a { 
            background: #b4b4b4; 
        } 
          
        /* Third child Second half bg-color */ 
        .addressLink li:nth-child(3) a:after { 
            border-left-color: #b4b4b4; 
        } 
          
        /* Last child bg-color and text-color */ 
        .addressLink li:last-child a { 
            background: transparent !important; 
            color: #000; 
        } 
          
        .addressLink li:last-child a:after { 
            border: 0px; 
        } 
          
        /* Hover on list's anchor element */ 
        .addressLink li a:hover { 
            background: #7c7f7f; 
        } 
          
        .addressLink li a:hover:after { 
            border-left-color: #7c7f7f !important; 
        } 
</style>

最后，在本文中，我们将结合HTML和CSS代码来完成，全部代码如下：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>如何使用HTML和CSS创建导航</title> 
    <style> 
        body { 
            text-align: center; 
        } 
        h1{ 
            color: #; 
        } 
          
        /* Styling addressLink class */ 
        .addressLink { 
            list-style: none; 
            overflow: hidden; 
            font: 16px; 
            margin: 30px; 
            padding: 0px; 
            border: 2px solid black; 
            font-style: italic; 
        } 
          
        /* Floating addressLink list */ 
        .addressLink li { 
            float: left; 
        } 
          
        /* Styling addressLink list's anchor element*/ 
        .addressLink li a { 
            background: #19b0cb; 
            color: white; 
            text-decoration: none; 
            padding: 5px 0px 5px 65px; 
            position: relative; 
            float: left; 
        } 
          
        .addressLink li a:after { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid #19b0cb; 
            margin-top: -50px; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 2; 
        } 
          
        .addressLink li a:before { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid white; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 1; 
        } 
          
        /* First child padding */ 
        .addressLink li:first-child a { 
            padding-left: 10px; 
        } 
          
        /* Second child bg-color */ 
        .addressLink li:nth-child(2) a { 
            background: #7c7f7f; 
        } 
          
        /* Second child Second half bg-color */ 
        .addressLink li:nth-child(2) a:after { 
            border-left-color: #7c7f7f; 
        } 
          
        /* Third child bg-color */ 
        .addressLink li:nth-child(3) a { 
            background: #b4b4b4; 
        } 
          
        /* Third child Second half bg-color */ 
        .addressLink li:nth-child(3) a:after { 
            border-left-color: #b4b4b4; 
        } 
          
        /* Last child bg-color and text-color */ 
        .addressLink li:last-child a { 
            background: transparent !important; 
            color: #000; 
        } 
          
        .addressLink li:last-child a:after { 
            border: 0px; 
        } 
          
        /* Hover on list's anchor element */ 
        .addressLink li a:hover { 
            background: #7c7f7f; 
        } 
          
        .addressLink li a:hover:after { 
            border-left-color: #7c7f7f !important; 
        } 
</style> 
</head> 
  
<body> 
    <h1>web前端开发公众号</h1> 
    <b>网址：www.webqdkf.com</b> 
    <ul class="addressLink"> 
        <li> 
            <a href="#">HOME</a> 
        </li> 
        <li> 
            <a href="#">WEB</a> 
        </li> 
        <li> 
            <a href="#">CSS</a> 
        </li> 
        <li> 
            <a href="#">HTML</a> 
        </li> 
         <li> 
            <a href="#">JS</a> 
        </li> 
        <li> 
            <a href="#">VUE</a> 
        </li> 
    </ul> 
</body> 
  
</html>
X W F
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html如何把纵向垂直菜单变成横向,css横向菜单
weixin_35282085的博客
06-09 6362
第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： 首页产品介绍服务介绍技术支持立刻购买联系我们 CSS定义为：.test ul{list-s...
HTML课堂案例2
一只小白657的博客
10-14 121
表格制作 <!DOCTYPE html> <html lang="zh-CN"> <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"> <titl
html+css 实现简易导航栏功能
09-22
主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
html自定义菜单按钮图片,editormd,markdown 自定义导航栏按钮
weixin_31633071的博客
07-01 401
editormd,markdown 自定义导航栏按钮可以通过修改源代码来实现，但是没有必要那么麻烦。editormd本身就有增加自定义按钮的扩展官网：https://github.com/pandao/editor.md/官网案例：https://github.com/pandao/editor.md/blob/master/examples/custom-toolbar.html![](http...
HTML字母导航栏怎么做,如何用css做导航栏？
weixin_34175978的博客
05-30 1183
如何用css做导航栏？1、新建一个html文件，在head部分，编写css样式○ list-style-type: none;是除掉导航前面默认带的点○ li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化，如下图所示：2、在html页面body里面编写导航栏内容○ 通过来实现导航栏，完整代码如下图所示：(相关课程推荐：css视频教...
状态输出导航栏html,css3与html5实现响应式导航菜单(导航栏)效果分享
weixin_33242139的博客
05-30 287
此方法可以应用到有特别多的链接菜单项目中，特别在移动项目中，它可以将所有菜单转换成一个按钮式的下拉菜单。HTML示例中有一个导航菜单的html结构，元素用来定位导航菜单，.current表示当前活动的导航项。复制代码代码如下:首页客户服务产品展示经典案例联系我们CSS首先我们要给菜单nav相对定位，我们在.nav li中使用display: inline-block代替float:left，这样一...
HTML编程 双向列表,jquery双向列表选择器DIV模拟版(示例代码)
weixin_39705065的博客
06-28 224
双向列表选择器DIV模拟/*** two_way_list_selector.js - v1.0.0 (2016/7/26)** Allows you to easily page layout!* by tie. qq：2185987263** Copyright (C) 2016, tie.* All rights reserved.***/vartwo_way_list_selector=f...
html+css实现页面顶部导航栏
热门推荐
caterpie_771881的博客
11-03 1万+
利用html+css制作下拉式的导航栏
HTML+CSS设计一个简单的水平一级导航栏
m0_58291075的博客
12-19 9246
(3)为了能够改变里的高度和宽度，我们首先让display：inline-block；这里是重点，因为属于inline类型不能够改变高度和宽度，只有转换类型为inline-block才能够改变。(2)#nav里设置导航栏的宽度以及外边框属性（此处font-size=0是为了防止每个超链接选项出现间隙，你可以删除此项对比效果）前面我学习了一段时间的HTML和CSS知识，下面我们来运用知识实现一个简单的水平一级导航栏。这里是在中使用三个标签，为了方便我没有使用或者.
利用 html 和 css 实现导航栏下拉(display block、display none)
ZYCRY的博客
10-26 4933
利用 html 和 css 实现导航栏下拉(display block、display none) 需求 设计并实现一个导航栏菜单，对某个项目比如你的个人书籍按类别（硬件类、软件类、语言类、网络类等分法）进行分门别类，其中上面括号中的类别为导航栏的一级菜单，它们各自的二级菜单是你所拥有的或知道的几本可能的属于这些类别的具体书籍。大致功能如下： 1、新建一个web项目，在标签中创建一个容器，指定class属性=“header”。在容器中创建一个无序列表，指定class属性=“header_ul”。在其中添加几
HTML+CSS导航菜单设计
崚嶒
07-02 770
一、一级水平导航菜单 1、表格+超链接 <table> <tr> <td>&nbsp;</td> <td><a href="#">首页</a></td> <td><a href="#">期刊介绍</a></td> <td><a href="#">编委会</a></td> <td&gt
html5纯css实现导航栏特效
05-25
html5纯css实现导航栏特效!不适用任何js代码！需要看看的速下载
CSS Cookbook 创建文字导航菜单和翻转特效
01-19
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML ...CSS Cookbook例子 创建文字导航菜单和翻转特效 </title> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <style type
使用CSS3制作响应式导航菜单的方法
12-13
关于使用响应式设计来创建一个手机导航栏，之前我曾经写过一个教程。现在我发现了一种新的方式，可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐。不...
使用CSS3创建动态菜单效果
12-30
该教程，我们将讨论CSS3的一些新功能和新特性，并教你在不使用图片和JavaScript的情况下，如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性： border-radius和animation。 　Demo演示 第一步：编辑菜单的HTML...
CSS技巧 使用标签来创建导航菜单(滑动门教程)
12-11
HTML和CSS代码如下: ===========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=...
简单的CSS 下拉导航菜单实现代码
12-02
在这个导航菜单中Portfolio项下有一个子菜单,我用粗体表示出来,最后说一句别忘了关闭(可以看这个:css技巧-清除多余的标签让代码更加有意义) HTML代码 复制代码代码如下: ”nav”> <ul> ”first”><a>Home</a></li> ...
html+css实现简单导航栏
qq18__的博客
05-06 987
实现一个简单的导航栏，当鼠标移动到某个链接时改变背景颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用行内块元素做一个导航栏</title> <style type="text/css"> a { disp...
html5和css3导航栏
最新发布
12-16
在创建导航栏的过程中，我们可以使用HTML5来定义导航栏的结构，例如使用元素来表示导航栏，使用和元素来创建导航栏的列表和单独的导航项。此外，我们还可以使用元素来创建超链接，从而实现导航栏中不同菜单项的跳转...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X W F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值