HTML普通导航栏浮动导航条:1).当鼠标移动在某个文字上时背景色变为蓝色 2).蓝色背景RGB：#0095BB

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML普通导航栏浮动导航条:1).当鼠标移动在某个文字上时背景色变为蓝色 2).蓝色背景RGB：#0095BB相关的知识，希望对你有一定的参考价值。

1).用无序列表制作横向导航条2).导航条填充背景色为灰色3).导航条上显示内容有“首页”、“产品中心”、“新闻中心”、“咨询投诉”、“关于我们” 4).字体为“宋体”，字体大小为16px，字体颜色为白色，加粗
拜托各位大神帮帮我吧！

参考技术A <head>
<title></title>
<style type="text/css">
#u1

float:left;
background-color:rgba(180,180,180,0.6);

li

width:84px;
list-style-type:none;
float:left;
font-size:20px;
font-weight:bold;

.style1

background-color:Blue;

.style2background-color:white;
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
$("li").mousemove(function ()
$(this).addClass("style1").mouseout(function ()
$(this).removeClass("style1");
);
);

);

</script>
</head>
<body>
<ul id="u1">
<li>首页</li>
<li>产品中心</li>
<li>新闻中心</li>
<li>咨询投诉</li>
<li>关于我们</li>
</ul>
</body>
</html>追问

你在逗我吗？

在浮动导航栏中调整徽标大小

【中文标题】在浮动导航栏中调整徽标大小【英文标题】：Resizing logo in floating navigation bar 【发布时间】：2014-02-23 02:54:05 【问题描述】：

我有一个位于屏幕顶部的导航栏。我必须首先说，我知道像这样的导航栏在移动设备上可能会很尴尬，我刚刚从我的代码中删除了媒体查询，因为它不会影响它们。

我的问题是，如果用户的屏幕对于移动版来说太大，但又太小而无法容纳整个导航栏，那么公司徽标就会缩进导航栏下方以及下方元素下方。我希望徽标自动调整大小，但我还不能做到这一点。我尝试为徽标链接设置自动宽度，并且还弄乱了其他标签，但仍然没有运气。菜单栏上的链接数量也可以变化，所以目前有 5 个元素，但最多可以有 7 个。我需要这种大小变化来影响徽标。

有人告诉我，徽标需要与包装器相关，但 NavBar div 的大小会随着窗口一起缩小。

直播链接：http://rental.joshblease.co.uk/stack.php小提琴 http://jsfiddle.net/dZVyZ/

截图：

在屏幕上 > 900px 宽

在

必填结果

最后一张图片有一个较小的标志，当宽度太小时会缩小

HTML：

<div id="MainWrapper">
<div id="NavBar">
        <ul>
            <li class="Down DownBlue"><a href="/index/">Home</a></li>
            <li class="Green"><a href="/Property/">View</a></li>
            <li class="Pink"><a href="/About/">About Us</a></li>
            <li class="Purple"><a href="/Josh/">Josh Blease</a></li>
            <li class="Orange"><a href="/Contact/">Contact</a></li>
        </ul>
        <a href="/index/"><img id="NavLogo" src="/Images/Logo.png" /></a>
    </div>
    <div class="Clear"></div>
</div>

CSS：

#MainWrapper 
    max-width: 900px;
    width: 100%;
    margin: 0 auto 0 auto;

.Clear
    clear: both;

#NavBar
    overflow: hidden;
    display: block;
    position: fixed;
    width: inherit;
    max-width: 900px;
    z-index: 999;
    height:70px;
    background: url(../Images/NavBg.png);
    padding-left: 10px;

#NavBar ul
    list-style: none;

#NavBar li
    float: left;
    padding: 20px 0 10px;
    margin-right: 10px;

#NavBar li a
    padding: 30px 10px 10px;
    background-color: #CBCBCB;
    color: #000;
    font-size: 17px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottom-right: 5px;
    -moz-border-radius-bottom-left: 5px;
    transition: background 300ms ease-in-out;
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;

#NavBar .Down, .JavaOff #NavBar li:hover
    padding-top: 30px;

#NavLogo
    float: right;
    height: 60px;
    padding: 5px 15px;

【问题讨论】：

您是否在徽标上使用了相对宽度？尝试例如宽度：15%；和高度：自动；。你有一个小提琴或真实的网页来查看你的问题吗？既然你已经在使用媒体查询了，是不是不能再为这个尺寸添加一个？ @MichaB - 看看这里rental.joshblease.co.uk/stack.php我现在就做一个小提琴 @badAdviceGuy 我会，但列表的宽度可以改变的事实可能会使它变得无用。它由像 wordpress 这样的管理面板控制，但自定义构建，因此客户端可能有更多导航项。标识应该相对于其容器的宽度，并用min-width 来限制它。容器的宽度应该相对于导航栏的宽度，可能是“最大宽度”，具体取决于您的需要。 【参考方案1】：

检查这个小提琴：http://jsfiddle.net/Diesel9Design/dZVyZ/1/

我给了 UL 一个固定的大小，让它向左浮动：

#NavBar ul 
    list-style: none outside none;
    width:500px;
    float: left;

然后我将徽标包裹在一个 div 中，并为其留出 500 像素的边距。这允许 div 找出可用的剩余大小。然后我将徽标宽度设置为 100%，BAM 会根据剩余空间自行调整大小。

<div class="logoWrap">
      <a href="/index/"><img id="NavLogo" src="http://rental.joshblease.co.uk/images/Logo.png" /></a>
</div>

.logoWrap 
    margin-left:500px;
    padding:10px 0 0;


#NavLogo 
    width:100%;

【讨论】：

【参考方案2】：

最简单的解决方案是#Navlogo 中的 css calc 函数，如下所示；用同样的方法调整高度；所以它看起来不会被拉伸或挤压。

#NavLogo 
float: right;
height: 60px;
padding: 5px;
width: calc(100% - 500px);

但如果你问我，我宁愿使用 javascript 或 jQuery 以获得更好的控制。另外，我也不喜欢方向；最好将<ul> 放在单独的<div> 中，而将图像放在不同的<div> 中。希望这对现在有所帮助。

【讨论】：

【参考方案3】：

就像你在问题中写的：

有人告诉我，徽标需要与包装器相关，但是 NavBar div 与窗口一起缩小。

您需要定义您愿意为徽标元素提供多少空间。由于您需要响应式解决方案，因此可以按百分比定义。

我建议将导航的大小限制在 70% 左右。您还可以添加最小宽度：；以防止列表项中断。看起来媒体查询生效太晚了，因为导航的一些列表项变得太短了。

你的问题。我添加了一些 CSS，希望能满足您的需求：

#NavBar ul

    margin:0;
    padding: 0;

    float: left;
    width: 70%;


#NavBar ul + a

    display: block;
    margin-left: 70%;
    text-align: right;
    width: 30%;



#NavLogo 

    display: inline-block;
    margin-top: 10px;
    max-width: 100%;
    height: auto;

测试小提琴：http://fiddle.jshell.net/p28HE/

编辑：您还可以从#NavLogo 中删除float.right

使用此解决方案，徽标最多将占据屏幕宽度的 30%。这可以通过 css 更改并覆盖宽度媒体查询以获得更好的移动视图。如果此解决方案对您有用或我可能遗漏了什么，请发表评论。

【讨论】：

以上是关于HTML普通导航栏浮动导航条:1).当鼠标移动在某个文字上时背景色变为蓝色 2).蓝色背景RGB：#0095BB的主要内容，如果未能解决你的问题，请参考以下文章

html导航栏悬浮在最右边

无法在移动/ipad 浏览器上浮动 twitter 引导导航栏

React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

在浮动导航栏中调整徽标大小

筋斗云效果（云朵在导航栏内随着鼠标移动）

html框架左侧导航栏如何实现移动鼠标显示二级菜单

HTML普通导航栏 浮动导航条:1).当鼠标移动在某个文字上时背景色变为蓝色 2).蓝色背景RGB：#0095BB

在浮动导航栏中调整徽标大小

HTML普通导航栏浮动导航条:1).当鼠标移动在某个文字上时背景色变为蓝色 2).蓝色背景RGB：#0095BB