html - 为什么是白线,为什么我的按钮没有响应?
问题描述
所以基本上我刚开始在这里学习 HTML 和 CSSenter 图像描述,我认为我有足够的信心做一个小项目来尝试我所学到的东西,我在 xd 中创建了一个快速设计,我认为我将能够轻松编码. 然而,它并没有按计划进行......:D
所以基本上我有 2 个我无法处理的问题......而且我对自己认为 StackOverflow 是找到解决方案以及了解有关该主题的更多信息的最佳场所。
所以当我调整我的窗口大小时,按钮不会在中间。 这里
而且头球和英雄之间还有一条白线,我不知道如何摆脱。 这里
body{
overflow-x: hidden !important;
margin: 0%;
}
header{
height: 150px;
width: 100%;
background-color:#4B4D4D;
background-repeat: no-repeat;
background-size: cover;
}
.hero{
background-image: url(\Hero.png);
background-repeat: no-repeat;
background-size: cover;
height: auto;
position: relative;
margin: 0%;
padding-bottom: 40px;
border: 0px;
}
.hero h1{
padding-top: 450px;
color:#FFEB8A ;
font-size: 70px;
font-weight: 700;
text-align: center;
width: auto;
}
.hero p{
color: white;
font-size: 35px;
font-weight: 600;
text-align: center;
}
.hero button{
background-color:#4B4D4D ;
color:#FFEB8A ;
display: block;
padding: 21px 50px;
text-align: center;
margin: auto;
max-width: 300px;
min-width: 50px;
width: 100%;
font-size: 30px;
margin-top: 20px;
margin-bottom: 20%;
}
.bounties{
text-align: center;
margin: auto;
width:700px;
}
@media only screen and (max-width: 920px){
h1{
margin-top: 150px;
}
}
@media only screen and (max-width: 920px){
h1{
font-size: 5em;
}
p{
font-size: 1.4em;
}
.hero button{
font-size: 1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WoW Party</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
</header>
<div class="hero">
<h1>CSS QUEST</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
<div class="bounties">
<button type="button">BOUNTIES</button>
</div>
</div>
<div class="heist">
<!--Flex-->
<h2>CSS GANG HEIST</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
<button type="button">TO QUEST</button>
</div>
<div class="last-section">
<!--Circles-->
<!--Add the images to the src and alt-->
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<!--Exclamation marks-->
<!--Add the images to the src and alt-->
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</body>
</html>
解决方案
好的,我对您的代码进行了一些更改,它起作用了。(该按钮始终位于 Chrome 和 Safari 的中心 [已附加屏幕截图])
还有一个教程您应该阅读有关 flex-box 设计的内容: https ://css-tricks.com/snippets/css/a-guide-to-flexbox/
我为了摆脱空白所做的更改:
样式.css
body {
overflow-x: hidden !important;
margin: 0%;
/* Added these two lines */
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 920px) {
h1 {
/* Commented Out this line */
/* margin-top: 150px; */
}
}
最终代码:
body {
overflow-x: hidden !important;
margin: 0%;
/* Added these two lines */
display: flex;
flex-direction: column;
}
.header {
height: 150px;
width: 100%;
background-color: #4B4D4D;
background-repeat: no-repeat;
background-size: cover;
}
.hero {
background-image: url(\Hero.png);
background-color: coral;
background-repeat: no-repeat;
background-size: cover;
height: auto;
position: relative;
margin: 0%;
padding-bottom: 40px;
border: 0px;
}
.hero h1 {
padding-top: 450px;
color: #FFEB8A;
font-size: 70px;
font-weight: 700;
text-align: center;
width: auto;
}
.hero p {
color: white;
font-size: 35px;
font-weight: 600;
text-align: center;
}
.hero button {
background-color: #4B4D4D;
color: #FFEB8A;
display: block;
padding: 21px 50px;
text-align: center;
margin: auto;
max-width: 300px;
min-width: 50px;
width: 100%;
font-size: 30px;
margin-top: 20px;
margin-bottom: 20%;
}
.bounties {
text-align: center;
margin: auto;
width: 700px;
}
@media only screen and (max-width: 920px) {
h1 {
/* Commented Out this line */
/* margin-top: 150px; */
}
}
@media only screen and (max-width: 920px) {
h1 {
font-size: 5em;
}
p {
font-size: 1.4em;
}
.hero button {
font-size: 1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WoW Party</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
</div>
<div class="hero">
<h1>CSS QUEST</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
<div class="bounties">
<button type="button">BOUNTIES</button>
</div>
</div>
<div class="heist">
<!--Flex-->
<h2>CSS GANG HEIST</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna</p>
<button type="button">TO QUEST</button>
</div>
<div class="last-section">
<!--Circles-->
<!--Add the images to the src and alt-->
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<!--Exclamation marks-->
<!--Add the images to the src and alt-->
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</body>
</html>
按钮截图
推荐阅读
- sql - 从 SQL 列返回 XML 中的特定嵌套节点
- reactjs - react native什么时候调用构造函数方法?
- ace-editor - 如何从语言工具之外的反应王牌编辑器中添加自定义完成器
- c# - 反应式服务。分组和缓存流
- c - 当我将图中的节点数从 4 个增加到大于 5 个时,malloc 会导致内存损坏
- django - 带有开发服务器的 Django https
- google-cloud-platform - 如何在 BigQuery 中创建嵌套字段和数组的数组
- java - 正则表达式从预定义的字符串格式中提取值
- html - 嵌入式引导 div 在非引导站点中没有响应
- matplotlib - 如何将 matplotlib 绘图和轴参数传递给包装函数