怎样用DIV和CSS做导航条

给大家做一个小列子,采用div和css来实现,同时我们并不用图片来做背景,直接用背景色来实现,鼠标悬停在对应栏目的名称后对应的背景蓝色变深。

一般导航条采用ul li列表布局,这里也不例外,也采用列表标签ul li + CSS布局。

在实际DIV+CSS布局项目中,一般不会只使用一次ul li列表,避免干扰其他地方使用ul li布局,避免对ul li设置样式影响其他地方,所以特地这里对ul设置一个#nav命名(一般导航条以nav或menu为CSS命名,这里选择nav),假如导航条背景宽度100%全屏或固定宽度均可,这里就由ul#nav控制,这里就设置100%全屏宽度蓝色背景。

这里一个技术点,对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排,从而让li并排布局。

然后需要对ul li里的a标签设置display:block的,但a父级li不设置具体宽度,所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。

立即学习“前端免费学习笔记(深入)”;

具体布局高度、颜色值、栏目间距距离均需要通过软件获得

具体案例p css代码

在引人初始化模板基础上进行案例代码布局。

新增各代码如下:

CSS代码:

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px} ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/

登录后复制

这里ul和#nav紧贴没有空格,代表#nav只针对ul标签设置,标签只有ul标签使用id=”nav”设置样式才能生效。

以上代码没有在ul外再设置DIV,这样可以节约一个DIV实现同样布局。

HTML代码


登录后复制     首页     HTML教程     CSS基础     CSS开发工具     CSS特效     CSS问题 

完整HTML源代码:

nbsp;html>    小小简单大方通用导航条    

登录后复制 首页 HTML教程 CSS基础 CSS开发工具 CSS特效 CSS问题   

完整CSS源代码:

@charset "utf-8"; body, p, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} /* \5B8B\4F53 代表 宋体 */ ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#000000;background:#FFF; text-align:center} .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} a{color:#000000;text-decoration:none}  a:hover{color:#BA2636}  .red ,.red a{ color:#F00} .lan ,.lan a{ color:#1E51A2} .pd5{ padding-top:5px} .dis{display:block} .undis{display:none}  ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px} ul#nav li a:hover{background:#0095BB}

登录后复制

这样就是一份完整的导航条了,用我们的CSS和DIV来实现的,有兴趣的朋友可以深度研究一下。

相关阅读:

HTML里的checkbo怎么使用

HTML里的checkbo怎么使用

HTML里的checkbo怎么使用

以上就是怎样用DIV和CSS做导航条的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3194870.html

(0)
上一篇 2025年4月1日 02:12:01
下一篇 2025年4月1日 02:12:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 解决Laravel项目中CSS文件无法加载的问题

    解决Laravel项目中CSS文件无法加载的问题,需要具体代码示例 在开发Laravel项目的过程中,有时候会遇到CSS文件无法加载的问题,这可能会导致页面样式混乱或者无法正常显示页面内容。这个问题通常是由于文件路径配置或者缓存导致的,接下…

    2025年5月2日
    000
  • 如何解决Laravel无法加载CSS样式的情况

    标题:如何解决Laravel无法加载CSS样式的情况 在使用Laravel进行Web开发的过程中,有时候会遇到CSS样式无法加载的情况,这可能会导致页面显示效果不正常。本文将介绍一些常见的原因以及解决方法,同时提供具体的代码示例供大家参考。…

    2025年5月2日
    000
  • 处理Laravel页面无法正确显示CSS的方法

    《处理Laravel页面无法正确显示CSS的方法,需要具体代码示例》 在使用Laravel框架开发Web应用时,有时候会遇到页面无法正确显示CSS样式的问题,这可能会导致页面呈现不正常的样式,影响用户体验。本文将介绍一些处理Laravel页…

    2025年5月2日
    000
  • Laravel页面无法加载CSS文件的解决方法

    Laravel页面无法加载CSS文件的解决方法,需要具体代码示例 在使用Laravel框架开发网站时,有时会遇到页面无法加载CSS文件的情况,这可能会导致页面样式混乱或者无法正常显示。这个问题通常是由于文件路径设置不正确或者文件引入方式有误…

    2025年5月2日
    000
  • Laravel中CSS无法加载的解决方案

    Laravel中CSS无法加载的解决方案 当我们使用Laravel来开发网站或应用程序时,有时会遇到CSS无法加载的问题。这可能是因为文件路径设置不正确或者服务器配置不当。本文将为您介绍一些常见的解决方案,并附上具体的代码示例。 确保CSS…

    2025年5月2日
    000
  • laravel需要哪些基础

    学习 Laravel 需具备以下基础:1. 扎实的 PHP 编程基础;2. Web 开发基础知识;3. Composer 包管理工具的使用;4. Git 版本控制系统的使用;5. 关系型数据库的概念及 MySQL 或 PostgreSQL的…

    2025年5月2日
    000
  • laravel读什么?有什么用?

    Laravel是一款PHP开发框架,用于快速构建Web应用。新手应从官方文档入手,逐步学习Laravel的核心概念,如路由、控制器、模型和视图。其次,了解PHP、数据库、前端技术和面向对象编程基础知识。在实践中学习,从简单的项目开始,在出错…

    2025年5月2日
    000
  • ThinkPHP 6 环境配置(Nginx/Apache + PHP 8)

    配置 thinkphp 6 环境需要在 nginx 或 apache 上结合 php 8 进行设置。1) nginx 配置:编辑 nginx.conf 文件,设置 server 块以正确处理 php 文件。2) apache 配置:在 ht…

    2025年5月2日
    000
  • 基于 Swoole 开发 HTTP 静态文件服务器的技巧

    使用 swoole 构建 http 静态文件服务器需要以下步骤:1. 创建并配置 swoole http 服务器。2. 利用 sendfile 方法高效传输文件。3. 优化性能,如缓存 mime 类型和使用协程处理并发请求。通过这些步骤,可…

    2025年5月2日
    000
  • Yii 框架静态资源优化策略有哪些?

    在yii框架中优化静态资源可以通过以下步骤实现:1. 使用asset bundle管理资源,2. 配置asset manager进行资源合并与压缩,3. 利用cdn托管资源,4. 设置缓存策略,5. 保持代码可读性与维护性。这些策略有助于提…

    2025年5月2日
    000

发表回复

登录后才能评论