Web前端开发实战4:导航菜单(一)「建议收藏」

Web前端开发实战4:导航菜单(一)「建议收藏」在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。导航菜单种类很多,但是制作原理都是大同小异的,这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单:    垂直导航菜单:    水平导航菜单:    一垂直菜单   制作原理:(1)用无序列表构建菜单;(2)标签的设置:ullia{display:block;}。定义的

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

       在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。导航菜单种类很多,但是制作原理都是大同

异的,这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单:

       垂直导航菜单:

Web前端开发实战4:导航菜单(一)「建议收藏」

       水平导航菜单:

Web前端开发实战4:导航菜单(一)「建议收藏」

       一垂直菜单

      制作原理:(1)用无序列表构建菜单;(2)<a>标签的设置:ul li a{display:block;}。定义的关键是将<a>标签设置为

元素。

       代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"微软雅黑";
}
.nav{
   height:200px;
   width:90px;
   margin-top:50px;
   margin-left:10px;
}
.nav ul{
   list-style:none;
}
.nav li a{
   background-color:#EEEEEE;
   text-decoration:none;
   color:#000000;
   /*设置的关键*/
   display:block;
   width:90px;
   height:40px;
   line-height:40px;
   text-align:center;
   margin-bottom:1px;
}
.nav li a:hover{
   background-color:#FF6600;
   color:#FFFFFF;
}
</style>
</head>

<body>
<div id="nav" class="nav">
     <ul>
	<li><a href="#">网站首页</a></li>
	<li><a href="#">课程大厅</a></li>
	<li><a href="#">学习中心</a></li>
	<li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

       效果展示:

       初始化状态或鼠标离开的状态:

Web前端开发实战4:导航菜单(一)「建议收藏」

       鼠标放上去的状态:

Web前端开发实战4:导航菜单(一)「建议收藏」

       二水平菜单

       制作原理:在垂直菜单的基础上,将li元素进行左浮动设置。由于li元素浮动脱离原来的文档流会失去宽和高,因

此一定要在a元素上使用display:block属性将其变为块级元素,然后进行宽和高的设置。

       只改变CSS样式代码:

/*CSS全局设置*/
*{
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"微软雅黑";
}
.nav{
   height:40px;
   margin-top:50px;
   margin-left:10px;
}
.nav ul{
   list-style:none;
}
/*设置的关键*/
.nav li{
   float:left;
}
.nav li a{
    background-color:#EEEEEE;
    text-decoration:none;
    color:#000000;
    display:block;
    width:90px;
    height:40px;
    line-height:40px;
    text-align:center;
    margin-right:1px;
}
.nav li a:hover{
    background-color:#FF6600;
    color:#FFFFFF;
}

       效果展示:

Web前端开发实战4:导航菜单(一)「建议收藏」

       三圆角菜单

       制作原理:在水平菜单的基础上我们进行CSS圆角属性的设置,但是IE6,7,8浏览器并不支持这个属性,制作一定

要考虑浏览器的兼容性,在这里我们使用圆角属性。解决不兼容的方法就是我们可以裁剪圆角背景图作为每个li元素

的背景即可。

       完整的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"微软雅黑";
}
.nav{
   height:50px;
   margin-top:20px;
   margin-left:10px;
}
.nav ul{
   list-style:none;
   height:50px;
   border-bottom:10px solid #FF6600;
   padding-left:30px;
}
.nav li{
   float:left;
   margin-top:10px;
}
.nav li a{
    background-color:#EEEEEE;
    text-decoration:none;
    color:#000000;
    display:block;
    width:90px;
    height:40px;
    line-height:40px;
    text-align:center;
    margin-left:1px;
    /*设置圆角属性,IE6,7,8不支持*/
    border-top-left-radius:15px;
    border-top-right-radius:15px;
}
.nav li a:hover,.nav li a.on{
    background-color:#FF6600;
    color:#FFFFFF;
}
</style>
</head>

<body>
<div id="nav" class="nav">
     <ul>
	<li><a class="on" href="#">网站首页</a></li>
	<li><a href="#">课程大厅</a></li>
	<li><a href="#">学习中心</a></li>
	<li><a href="#">经典案例</a></li>
	<li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

       效果展示:

       初始化状态或鼠标离开的状态:

Web前端开发实战4:导航菜单(一)「建议收藏」

       鼠标移上去的状态:

Web前端开发实战4:导航菜单(一)「建议收藏」





版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159460.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 移除word文档的域代码 remove all field codes of word[通俗易懂]

    移除word文档的域代码 remove all field codes of word[通俗易懂]去除word中因使用mendeley或endnote等文献管理软件而产生的域代码。网上很多说使用CTRL+SHIFT+F9,但亲测不行,可能是软件版本问题。使用以下方法解决:CTRL+A全选文章;CTRL+6去除全文域代码。参考:https://community.endnote.com/t5/EndNote-Styles-Filters-and/Removing-field-codes-adjusts-spacing-in-Word-document/td-p/152892http

  • 解决IDEA插件安装慢、超时、不成功问题[通俗易懂]

    解决IDEA插件安装慢、超时、不成功问题[通俗易懂]解决IDEA插件安装慢、超时、不成功问题1.修改本地hosts文件,打开文件位置:Windows系统Hosts文件路径:C:\Windows\System32\drivers\etc\hosts用工具打开hosts文件2.打开国内插件的节点IP地址http://tool.chinaz.com/speedtest/plugins.jetbrains.com在检测结果中选择一个相对耗时少的IP地址,因为比较快然后按照第一步在hosts文件里加上即可,然后保存(需要以管理员身份)3.重

  • navicat 在线激活码[免费获取]

    (navicat 在线激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • Python基础知识点整理之基本语法元素[通俗易懂]

    Python基础知识点整理之基本语法元素[通俗易懂]一、程序的格式框架1.缩进缩进是指每行语句前的空白区域,用来表示Python程序间的包含和层次关系。一般语句不需要缩进,顶行书写且不留空白。当表示分支、循环、函数、类等含义,在if,while,for,def,class等保留字所在的完整语句后通过英文冒号(:)结尾,并在之后进行缩进,表示前后代码之间的从属关系。代码编写中,缩进可以用Tab键实现,也可以用4个空格实现。缩进…

  • git安装教程 windows10_灯保姆安装公司

    git安装教程 windows10_灯保姆安装公司git安装与使用的保姆级教程,图文齐全,一步一步教,小白看了都说好~,安装、使用、创建仓库、同步代码、检查代码、创建分支、合并主分支等等…

  • 盒子模型(Box Model)「建议收藏」

    盒子模型(Box Model)「建议收藏」所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片等元素是内容区域盒子的厚度我们成为盒子的边框盒子内容与边框的距离是内边距(类似单元格的cellpadding)盒子与盒子之间的距离是外边距(类似单元格的cells…

    2022年10月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号