个人中心
gpt4 book ai didi

html - 如何展开此导航栏以及使链接专用于按钮本身？

转载 作者：太空宇宙 更新时间：2023-11-04 13:01:09 28 4
gpt4 key购买 nike

我试图让每个按钮彼此分开。另外，如果您将鼠标放在导航栏的右侧，链接仍然可以点击，我该如何删除它？

这是 JSFIDDLE链接

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 class="nav_container">
<div class="nav_links">
<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<a href="#"><li class="nav_li">Schedule</li></a>
<a href="#"><li class="nav_li">Summer</li></a>
<a href="#"><li class="nav_li">Web Design</li></a>
<a href="#"><li class="nav_li">School</li></a>
<a href="#"><li class="nav_li">Whatever</li></a>
</ul><!--end of right_links-->
</div><!--end of nav_links-->
</nav><!--end of nav_container-->
</section><!--end of main_front-->

<section class="footer">
<div class="phonenumber">
<b>Contact:</b> XXX-XXX-XXXX
</div><!--end of phonenumber-->

<div class="address">
1234 Web Design Ave.
</div><!--end of address-->
</section><!--end of footer-->
</body>
</html>

CSS 代码

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

* {
margin:0;
margin:none;    
}

.logo {
font-family: stalemate, Verdana, Geneva, sans-serif;
font-size:36px;
float:left;
margin-top:5px; 
}

.main_front {
width:100%;
height:650px;
background-color:#A9D2F1;   
}

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



.nav_container {
width:100%;
height:79px;    
position:fixed;
background-color:#82B5E8;
}

.right_links {
width:600px;
float:right;
position:relative;
}

.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;
background-color:#82B5E8;   
line-height:40px;
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;
margin-left:-260px;
}

.nav_li {
margin-right:200px; 
}

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

最佳答案

1) 我试图让每个按钮彼此分开。A:我把你的 nav.nav_container 标签改成了 div#nav_container 标签，并删除了 div.nav_links。它似乎对你不利，然后我相应地更新了样式表。

2) 此外，如果您将鼠标放在导航栏的右侧，链接仍然可以点击，我该如何删除它？A:首先打开你的列表项，然后将你的 anchor 嵌套在其中，你把它们放反了，所以你可能会遇到一些错误，但你肯定会在你不想要的地方获得超链接。这会将链接放在导航项中的文本上。

注意:还更改了您的{styles}； body {风格}；通常你想远离“”作为一个通用类，在页面成熟的后期，您会发现它会影响性能。

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!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="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">
            <div id="nav_container">
                    <div class="logo"><img src="../images/logo.png" height="65px" alt="My logo" /></div><!--end of logo-->
                    <ul class="right_links">
                        <li class="nav_li"><a href="#">Schedule</a></li>
                        <li class="nav_li"><a href="#">Summer</a></li>
                        <li class="nav_li"><a href="#">Web Design</a></li>
                        <li class="nav_li"><a href="#">School</a></li>
                        <li class="nav_li"><a href="#">Whatever</a></li>
                    </ul><!--end of right_links-->
            </div><!--end of nav_container-->
        </section><!--end of main_front-->

        <section class="footer">
            <div class="phonenumber">
                <b>Contact:</b> XXX-XXX-XXXX
            </div><!--end of phonenumber-->

            <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:0px;
}

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

.main_front {
width:100%;
height:650px;
background-color:#A9D2F1;   
}

#nav_container {
width:100%;
height:79px;    
background-color:#82B5E8;
}

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

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

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

.right_links li {
width:130px;
height:40px;
background-color:#82B5E8;   
line-height:40px;
text-align:center; 
margin-right:10px;   
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:hover {
background-color:#166083;
}   

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

希望对您有所帮助!

关于html - 如何展开此导航栏以及使链接专用于按钮本身？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25458917/

28 4 0
文章推荐： linux - clock_gettime() 不起作用
文章推荐： java - 无法从文件夹导入图像的随机路径？ ( java )
文章推荐： java - Thymeleaf Map 迭代和映射键中的非英语字符
文章推荐： linux - Q :/usr/bin/ld: cannot find -lGL
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com