Question

右侧五个链接的顶部不可点击。如何在整个按钮中激活链接？
此外，我如何制作它，以便当我将鼠标悬停在链接上时，背景颜色仍然会像当前一样变化，但具有不透明度：0.5。每当我尝试这个时，背景颜色以及单词都变得透明。
还有一件事。如果我重新调整浏览器的大小，导航栏会移动并且看起来很糟糕。在重新调整浏览器大小时，如何保持导航栏的位置？

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
</head>

<body>
<section class="main_front">
<nav id="nav_container">

<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li"><a href="#">Goals</a></li>
<li class="nav_li"><a href="#">School Site</li></a>
<li class="nav_li"><a href="#">Web Design</li></a>
<li class="nav_li"><a href="#">Summer</li></a>
<li class="nav_li"><a href="#">Schedule</li></a>
</ul><!--end of right_links-->

</nav><!--end of nav_container-->
</section><!--end of main_front-->



<section class="footer">
<div class="phonenumber">
<b>Contact:</b> 239-XXX-XXXX
</div><!--end of phonenumber-->
<div id="email">
adesign@email.com
</div><!--end of email-->
<div class="address">
1234 Web Design Ave.
</div><!--end of address-->
</section><!--end of footer-->
</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */

body {
    margin:0;
    margin:none;    
}

.logo {
    float:left;
    margin-top:5px; 
}

.main_front {
    width:100%;
    height:90vh;
    background-color:#A9D2F1;   
}

/* .nav_links {
    width:1600px;
    height:100px;
    margin:auto;
    color:white;    
} */

.nav_li {
    float:right;
    margin-right:20px;
}




#nav_container {
    width:100%;
    height:79px;    
    /*background-color:#82B5E8;*/
    background-image:url(../images/nav_container_bg.png);
}

.right_links {
    width:70%;
    float:right;
    list-style-type:none;
    text-align:center;
}

.right_links a {
    display:inline-block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size:17px;
    margin-top:15px;
    font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}

.right_links li {
    width:130px;
    height:40px;    
    line-height:10px;
    text-align:center;  
    border-radius:15px;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -ms-transition:all 0.5s;
}

.right_links li a {
    display:block;
    width:130px;
    height:40px;
}



.right_links li:hover {
    background-color:#166083;

}   

.phonenumber {
    font-size:26px;
    margin-left:15px;
    float:left; 
}

.address {
    font-size:26px;
    margin-left:75%;

}

#email {
    font-size:26px;
    float:left;
    margin-left:-295px;
    margin-top:40px;
}   

.footer {
    width:100%;
    height:10vh;
    background-color:#8FC6ED;
}

Answer 1

将您的CSS更改为：

/* CSS Document */
 body {
    margin:0;
    margin:none;
}
.logo {
    float:left;
    margin-top:5px;
}
.main_front {
    width:100%;
    height:90vh;
    background-color:#A9D2F1;
}
/* .nav_links {
    width:1600px;
    height:100px;
    margin:auto;
    color:white;    
} */
 .nav_li {
    float:right;
    margin-right:20px;
}
#nav_container {
    width:100%;
    height:79px;
    /*background-color:#82B5E8;*/
    background-image:url(../images/nav_container_bg.png);
}
.right_links {
    width:70%;
    float:right;
    list-style-type:none;
    text-align:center;
}
.right_links a {
    display:block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size:17px;
    margin-top:0px; height:30px; padding-top:15px;
    font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
    width:130px;
    height:40px;
    line-height:10px;
    text-align:center;
    border-radius:15px;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -ms-transition:all 0.5s;
}
.right_links li a {
    display:block;
    width:130px;
    height:40px;
}
.right_links li:hover {
    background-color:rgba(22,96,131,0.5);
}
.phonenumber {
    font-size:26px;
    margin-left:15px;
    float:left;
}
.address {
    font-size:26px;
    margin-left:75%;
}
#email {
    font-size:26px;
    float:left;
    margin-left:-295px;
    margin-top:40px;
}
.footer {
    width:100%;
    height:10vh;
    background-color:#8FC6ED;
}

关于你的上一个问题，一切都取决于你需要什么。如果你想让它响应，导航的大小会有所不同，因此菜单元素会重新定位，这需要根据显示的大小决定你想做什么（你也可以做什么，因为没有调整大小）

Answer 2

您正在使用margin-top:15px向下移动按钮上的文字。将其更改为padding-top，整个按钮都可以点击。这是因为padding位于标记的内部，因此会扩展a标记的大小（这是您的可点击链接）。
你偶然发现了困扰我们很多人的问题。当元素中包含文本时，将不透明度应用于元素而不是文本中的文本是很棘手的。但是，有一些工作区很有用。这里有几个帖子：

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

CSS - Apply Opacity to Element but NOT To Text Within The Element
有两种方法可以指定页面上元素的位置/大小：固定的px / em 或百分比。固定大小不会重新调整大小，但百分比会重新调整大小。因此，而不是：

这样做：

<div style="height:10%;width:15%;"></div>

随着窗口大小的改变，div的宽度/高度也会改变。

这种方法有两个缺点：

一个。您可能无法仅使用导航栏执行此操作 - 您可能必须重构页面以在大多数位置使用百分比;

湾大型显示器比小型显示器具有更大的元件 - 但通常，这是一件好事。

大多数人在切换到百分比时所做的是设置外部页面边界（＆＃34;换行＆＃34;或＆＃34;容器＆＃34;或者在{{1以下）的任何顶层级别div以像素为单位 - 然后对下面的所有其他内容使用百分比。好的，很少所有 - 可以混合百分比和像素/ ems（当然，不在相同的元素）。通常，无论显示器/窗口的大小如何，都有一些div（按钮或形状或其他）将保持固定大小。

关于这一个的几个参考文献：

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Which is better to use in CSS, percentage or pixels?

这些链接的顶部不起作用，如何才能获得按钮内的链接？

2 个答案: