本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
导航栏的实现、固定顶部导航栏、二级菜单实现
效果图:
最近在使用这个导航栏的时候,发现页面在放大和缩小的情况下,导航栏的布局和显示都有些小问题,所以重新改了一下css部分的代码,重新贴上来
新的代码实现(优化布局):
<html> <head> <style type="text/css"> .top{ /* 设置宽度高度背景颜色 */ height: auto; /*高度改为自动高度*/ width:100%; margin-left: 0; background:rgb(189, 181, 181); position: fixed; /*固定在顶部*/ top: 0;/*离顶部的距离为0*/ margin-bottom: 5px; } .top ul{ /* 清除ul标签的默认样式 */ width: auto;/*宽度也改为自动*/ list-style-type: none; white-space:nowrap; overflow: hidden; margin-left: 5%; /* margin-top: 0; */ padding: 0; } .top li { float:left; /* 使li内容横向浮动,即横向排列 */ margin-right:2%; /* 两个li之间的距离*/ position: relative; overflow: hidden; } .top li a{ /* 设置链接内容显示的格式*/ display: block; /* 把链接显示为块元素可使整个链接区域可点击 */ color:white; text-align: center; padding: 3px; overflow: hidden; text-decoration: none; /* 去除下划线 */ } .top li a:hover{ /* 鼠标选中时背景变为黑色 */ background-color: #111; } .top ul li ul{ /* 设置二级菜单 */ margin-left: -0.2px; background:rgb(189, 181, 181); position: relative; display: none; /* 默认隐藏二级菜单的内容 */ } .top ul li ul li{ /* 二级菜单li内容的显示 */ float:none; text-align: center; } .top ul li:hover ul{ /* 鼠标选中二级菜单内容时 */ display: block; } body{ background:#eff3f5; } </style> <body> <div class="top"> <center> <ul> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#"><b>一级菜单</b></a></li> <li><a href="#">一级菜单</a></li> <li> <a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </center> </div> </body> </head> </html>
下面的原来的代码实现(页面放大缩小的时候导航版排版有问题):
<html> <head> <style type="text/css"> .top{ /* 设置宽度高度背景颜色 */ height: 50px; width:100%; background:rgb(189, 181, 181); position: fixed; /*固定在顶部*/ top: 0;/*离顶部的距离为0*/ } .top ul{ /* 清除ul标签的默认样式 */ width: 80%; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .top li { float:left; /* 使li内容横向浮动,即横向排列 */ margin-right:50px; /* 两个li之间的距离*/ } .top li a{ /* 设置链接内容显示的格式*/ display: block; /* 把链接显示为块元素可使整个链接区域可点击 */ color:white; text-align: center; padding: 14px 16px; text-decoration: none; /* 去除下划线 */ } .top li a:hover{ /* 鼠标选中时背景变为黑色 */ background-color: #111; } .top ul li ul{ /* 设置二级菜单 */ width: auto; background:rgb(189, 181, 181); position: absolute; display: none; /* 默认隐藏二级菜单的内容 */ } .top ul li ul li{ /* 二级菜单li内容的显示 */ margin-right:0; float:none; text-align: center; } .top ul li:hover ul{ /* 鼠标选中二级菜单内容时 */ display: block; } </style> <body> <div class="top"> <center> <ul> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#">一集菜单</a></li> <li><a href="#"><b>一级菜单</b></a></li> <li><a href="#">一级菜单</a></li> <li> <a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </center> </div> </body> </head> </html>
推荐学习:html视频教程
以上是CSS+HTML如何实现顶部导航栏的详细内容。更多信息请关注PHP中文网其他相关文章!

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版
视觉化网页开发工具