gpt4 book ai didi

html - 为什么我的按钮在我向容器添加填充后不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 05:59:21 24 4
gpt4 key购买 nike

我在使我的按钮显示为事件状态时遇到问题。目前,他们实际上并没有做任何事情,但他们甚至没有出现悬停效果。我曾尝试为它们添加效果,但这样做似乎没有任何改变。

我已经尝试删除 css 的所有不同部分,当从容器中删除填充时,按钮再次激活,但这只是有时发生?

我不确定我做错了什么,我显然是一个完全的 n00b,因为这是我第一次真正尝试制作一个实际的网站,并且只是为了好玩而玩 html/css。

如果您有任何建议,请告诉我,非常感谢!

.container {
padding: 10%;
}

h1 {
color: #FFEA9F;
margin: 0 auto 0 auto;
font-size: 30px;
letter-spacing: 15px;
font-family: 'Fira Code', monospace;
text-align: center;
}

body {
border: 20px;
padding: 20px;
margin: 0 auto 0 auto;
background:linear-gradient(to right,#FFE899,#F48C30);
}

.bottom {
position:fixed;
bottom: 0;
width: 100%;
left: 0;
}


#mainNav {
font-weight: 100;
opacity: 0.9;
font-family: "Nunito", sans-serif;
}

#mainNav .navbar-brand {
color: #FFEA9F;
}

#mainNav .nav-link {
color: #FFEA9F;
}

#mainNav .nav-link:hover {
color: #F48C30;
}

.collapse {
color: #FFEA9F;
}

.button {
background-color: #8C1909;
border: none;
color: #FFEA9F;
/*padding: 10px 25px;*/
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
letter-spacing: 5px;
font-family: 'Fira Code', monospace;
opacity: 0.8;
border-radius: 8px;
box-shadow: 1px 1px #544D4D;
grid-row-start:1;
}

.button2 {
background-color: #8C1909;
border: none;
color: #FFEA9F;
text-align: center;
display: inline-block;
font-size: 36px;
letter-spacing: 5px;
font-family: 'Fira Code', monospace;
opacity: 0.8;
border-radius: 8px;
box-shadow: 1px 1px #544D4D;
}
<link rel="stylesheet" type="text/css" href="testing2.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Code|Red+Hat+Text&display=swap" rel="stylesheet">


<body>
<nav id="mainNav" class="navbar fixed-top navbar-dark navbar-expand-md" style="background-color: #8C1909">
<a href="#" class="navbar-brand">HOME</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="https://google.com/maps" class="nav-link">MAPS</a>
</li>
<li class="nav-item">
<a href="https://instagram.com/venture.mars" class="nav-link"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</nav>

<div class="container">
<h1 class="text-center">VENTURE.MARS</h1>
<div class="d-flex justify-content-around align-items-center flex-column flex-md-row" style="height: 200px">
<button class="button" type="submit">CREATE</button>
<button class="button2" type="submit">EXPLORE</button>
</div>

</div>


<div class="bottom">
<img src="background_bottom2.svg">
</div>
</body>

无论填充如何,我都希望按钮保持事件状态。

对于您可能看到的其他问题的反馈,我将不胜感激,任何帮助!几年前,一位了不起的讲师教我 Java,他总是强制让我们的代码尽可能实用,而不使用变通方法。虽然我觉得我已经创建了很多变通方法来尝试自己弄清楚 html/css。

最佳答案

使用 bootstrap 时,navbar-brand 应该只用于品牌(站点名称)。您不应该将它用于每个导航栏元素。您应该使用 .nav-item nav-link 链接导航栏元素。

想知道为什么您不将其格式化为带有 li 列表项的 ul 元素用于导航?编辑:应该提到它不是必需的,但它是非常标准的。

重新查看导航栏的文档,因为它肯定会有帮助。 https://getbootstrap.com/docs/4.0/components/navbar/#brand

此外,您可能希望使用 ID 来设置样式以实现特定性,并且还可以使用伪选择器 a:active a:visited 来确保您的颜色在链接被访问或处于事件状态后保持不变。

关于html - 为什么我的按钮在我向容器添加填充后不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57466467/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com