css 导航条突出显示当前页面

html-css08

css 导航条突出显示当前页面,第1张

#home #nav li#m1 a,

#about #nav li#m2 a,

#products #nav li#m3 a,

#services #nav li#m4 a,

#contact #nav li#m5 a{ color: #FFF background: #DC4E1B url(newfile.gif) no-repeat}

<div id="home">

<ul id="nav">

<li id="m1"><a href="1.html">Home</a></li>

<li id="m2"><a href="2.html">About</a></li>

<li id="m3"><a href="3.html">Products</a></li>

</ul>

</div>

在编程中编写出函数需要突出显示的代码。每个不同的值都需要不同的代码,CSS的3个组成部分中,“对象”是很重要的,它指定了对哪些网页元素进行设置,因此,它有个专门的名称,选择器。所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式声明,即可实现效果。 回答于 2022-04-11 抢首赞 已踩 0 查看全部1个回答 — 为你推荐更多精彩内容 — 正在加载 加载失败 点击重新加载

微信

微博

QQ

QQ空间

答案纠错

举报

取消 赞赏答主 5 10 50 100 200

已赞赏0财富值

合计:0 财富值

登录后赞赏 选择举报类型 侵犯版权 色情低俗 涉嫌违法犯罪 时政信息不实 垃圾广告 低质灌水 工作人员会在48小时内处理,处理结果请关注系统通知,感谢您对百度知道的支持。 确定 void function(a,b,c,d,e,f){function g(b){a.attachEvent?a.attachEvent("onload",b,!1):a.addEventListener&&a.addEventListener("load",b)}function h(a,c,d){d=d||15var e=new Datee.setTime((new Date).getTime()+1e3*d),b.cookie=a+"="+escape(c)+"path=/expires="+e.toGMTString()}function i(a){var c=b.cookie.match(new RegExp("(^| )"+a+"=([^]*)(|$)"))return null!=c?unescape(c[2]):null}function j(){var a=i("PMS_JT")if(a){h("PMS_JT","",-1)try{a=a.match(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]?{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}a.r&&b.referrer.replace(/#.*/,"")!=a.r||alog("speed.set","wt",a.s)}}if(a.alogObjectConfig){var k=a.alogObjectConfig.sample,l=a.alogObjectConfig.randd="https:"===a.location.protocol?"https://fex.bdstatic.com"+d:"http://fex.bdstatic.com"+d,k&&l&&l>k||(g(function(){alog("speed.set","lt",+new Date),e=b.createElement(c),e.async=!0,e.src=d+"?v="+~(new Date/864e5)+~(new Date/864e5),f=b.getElementsByTagName(c)[0],f.parentNode.insertBefore(e,f)}),j())}}(window,document,"script","/hunter/alog/dp.mobile.min.js") window.tt = 1676815216

这个当然可以实现了,所谓突出显示效果跟滑动门的道理差不多,需要用到的是:hover

********************************************************

定义和用法

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:

********************************************************

我不清楚你说的突出显示的效果,是不是图片变大。

如果是那样的话,可以<img class="big">先定义一下,然后之后img.big:hover {width:多少pxheight:多少px}

就是把它置为顶层就可以了。具体的浮动什么的,依情况而定,写CSS熟悉以后很简单。

或者我觉得直接就可以用滑动门的办法,用两张图来替换就行。

<div id="header">

<ul>

<li><a href="#">Home</a></li>

<li id="current"><a href="#">News</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

#header {

float:left

width:100%

background:yellow

font-size:93%

line-height:normal

}

#header ul {

margin:0

padding:0

list-style:none

}

#header li {

float:left

margin:0

padding:0

}

#header a {

display:block

}

#header li {

float:left

background:url("norm_right.gif")

no-repeat right top

margin:0

padding:0

}

#header a {

display:block

background:url("norm_left.gif")

no-repeat left top

padding:5px 15px

}

#header #current {

background-image:url("norm_right_on.gif")

}

#header #current a {

background-image:url("norm_left_on.gif")

}

嗯,你现在网上看一下滑动门的文章吧,我说的也不是很清楚,只是提供了一个思路,具体的看几个网页模板的代码相应的部分就可以理解了,嗯希望对你有帮助吧。