【css】使用float实现水平导航栏

这篇具有很好参考价值的文章主要介绍了【css】使用float实现水平导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

该实例使用float 浮动实现元素浮动在水平方向,从而实现水平导航栏效果。

overflow: hidden:当不给父级元素设置高度的时候,其内部元素浮动后会导致下面的元素顶上去,这是因为子元素浮动后,子元素脱离标准流,不占位,父元素检测不到子元素的大小,从而高度为0。下面的ul要是没有添加该属性时,只显示主页,其他隐藏。

去掉overflow: hidden的效果:高度为零。
【css】使用float实现水平导航栏,前端,css,html,前端
去掉overflow: hidden和添加高度的效果:
【css】使用float实现水平导航栏,前端,css,html,前端
下面是添加了 overflow: hidden的代码:

<style>
ul {
  list-style-type: none;//去掉列表样式
  margin: 0;
  padding: 0;
  overflow: hidden;//这个很重要,玄学,溢出隐藏,没有这个的话,会导致只显示主页,其他隐藏
  background-color: #333;
}

li {
  float: left;//向左浮动
}

li a {
  display: inline-block;//设置行内块
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;//去掉文本装饰
}

li a:hover {
  background-color: #111;//鼠标悬浮显示样式
}

.active {
  background-color: red;//激活类样式
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>

渲染效果:
【css】使用float实现水平导航栏,前端,css,html,前端文章来源地址https://www.toymoban.com/news/detail-624125.html

到了这里,关于【css】使用float实现水平导航栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css 实现 html 元素内文字水平垂直居中的N种方法

            上一篇博文写了div 中元素居中的N种常用方法,那么单个html元素:div(块级元素代表),span(行内元素代表)中的文字如何水平垂直都居中呢?实现方法如下:         本文例子使用的 html body结构下的模型如下:         例子居中效果都如下图: 注:当把div

    2024年02月13日
    浏览(54)
  • 【前端 | CSS系列】—— 第1篇:如何实现水平垂直居中对齐?

    单纯的元素 左右居中 对齐: 块级元素 可以使用 magrin: 0 auto ; 非块级元素 使用 text-align: center;

    2024年02月13日
    浏览(52)
  • [HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 横向二级导航菜单 Web页面设计实例 总结 该练的还是要练,终究是自己的! 网页标题:二级下拉导航

    2024年01月17日
    浏览(73)
  • HTML+CSS导航栏及下拉菜单的实现

    导航栏是位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,起着链接站点或者软件内的各个页面的作用。 关于位于页面顶部的导航栏究竟是如何实现的,希望下面的代码可以对朋友们有帮助。 效果展示

    2024年02月11日
    浏览(45)
  • HTML + CSS + JavaScript【实战案例】 实现动画导航栏效果

    ​Hello~ 咱们今天一起来学习一个动画导航的小项目 HTML结构

    2024年02月03日
    浏览(62)
  • html+css实现二级导航栏效果,简单易看懂噢!

    这应该是这几天以来看到的最简单易懂的有二级菜单栏的导航栏效果实现了 使用html+css实现,看了好几天导航栏的实现方式,要么是太复杂的需要JS或者框架的,要么是太简单仅仅使用div和超链接的, 再要么就是只有简单的一级导航,没有二级菜单栏的,心情复杂 就想找一个

    2024年02月06日
    浏览(44)
  • web前端——HTML+CSS实现奥运五环

    web前端——HTML+CSS实现奥运五环  

    2024年02月05日
    浏览(51)
  • web前端——HTML+CSS实现九宫格

    web前端——HTML+CSS实现九宫格

    2024年02月05日
    浏览(44)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 【前端】CSS水平居中的6种方法

    后文:【前端】CSS垂直居中的7种方法_karshey的博客-CSDN博客 左右两边间隔相等的居中 display: flex; justify-content: center; 居中子元素 子绝父相,子元素 margin:auto 原理: top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height 上述式子中

    2024年02月12日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包