我的HTML和CSS表现异常。我有一个名为header的div元素,其中有一个页面内链接列表。当我将CSS应用于链接或div元素时,链接将被禁用,即什么都没有
发生在鼠标单击上。我尝试了很多,但无法发现错误。感谢您的帮助。
这是我的HTML组件:
<div class = "header">
<img class="logo" src="logo.png" />
<ul id = "nav">
<li><a href="#homes">Home</a></li>
<li><a href="#tutorials">Tutorial</a></li>
<li class="last"><a href="#contacts">Contact Us</a></li>
</ul>
</div>
这是我要应用的CSS:
.header{position:relative;width:950px; margin:0 auto; z-index: -1;}
.header #nav{float: right; margin-top:55px}
.header #nav li{float:left; padding-right:15px; padding-left:15px; line-height:12px; border- right:1px solid #06F; list-style-type: none;}
.header #nav li.last{border-right:none;}
.header #nav li a{display: inline;font-family: Helvetica, sans-serif; font-weight: bold; font-size: 22px; color:#081d58;}
.header #nav li a:hover{color:#253494;}
最佳答案
我想您可能不完全了解href:“#homes”的作用。如果您在一个名为www.mywebsite.com的网站上,并且将使用href:“ #homes”,它将使您位于同一页面上,但是将名称为#homes的div滚动到页面顶部。
#homes会将您的页面链接到www.mywebsite.com#homes。我的猜测是您想打开一个名为www.mywebsite.com/homes的新网页,在这种情况下,您应该将href更改为:
<a href: "http://www.mywebsite.com/homes">Home</a>
另外,您的#home div不是可滚动的内容,因此浏览器无法将其移动到顶部,并且页面保持不变。
希望这能解决您的问题^^
关于html - CSS自行禁用链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26789242/