CSS按钮的样式在我的页面底部造成了额外的空间。
这是导致它的部分：
.contact-links {
position: relative;
bottom: 150px;
font-size: 1.0em;
}
.linkedin-button {
display: inline-block;
background: url('{{ url_for('static', filename='linkedin-logo.png') }}') no-repeat;
background-size: contain; /* Ensure the logo fits inside the button */
width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
text-indent: -9999px; /* Hide text content */
overflow: hidden; /* Hide overflow */
position: relative;
right: 50px;
}
.github-button {
display: inline-block;
background: url('{{ url_for('static', filename='github-logo.png') }}') no-repeat;
background-size: contain; /* Ensure the logo fits inside the button */
width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
text-indent: -9999px; /* Hide text content */
overflow: hidden; /* Hide overflow */
position: relative;
left: 50px;
}
.email-button {
display: inline-block;
background: url('{{ url_for('static', filename='email.png') }}') no-repeat;
background-size: contain; /* Ensure the logo fits inside the button */
width: 60px; /* Adjust as needed (half of the original width) */
height: 150px; /* Adjust as needed (half of the original height) */
text-indent: -9999px; /* Hide text content */
overflow: hidden; /* Hide overflow */
}字符串
@font-face {
font-family: 'Playfair Display';
src: url('{{ url_for('static', filename='Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') }}') format('truetype');
}
@font-face {
font-family: 'League Spartan';
src: url('{{ url_for('static', filename='LeagueSpartan-VariableFont_wght.ttf') }}') format('truetype');
}
body {
color: #d3d3d3
}
a {
color: #d3d3d3;
}
h1 {
font: 2em 'Playfair Display', sans-serif;
color: #d3d3d3;
margin-bottom: 20px;
}
p {
font: 1.5em 'League Spartan', sans-serif;
margin-bottom: 30px;
}
.contact-links {
position: relative;
bottom: 150px;
font-size: 1.0em;
}
.linkedin-button {
display: inline-block;
background: url('{{ url_for('static', filename='linkedin-logo.png') }}') no-repeat;
background-size: contain; /* Ensure the logo fits inside the button */
width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
text-indent: -9999px; /* Hide text content */
overflow: hidden; /* Hide overflow */
position: relative;
right: 50px;
}
.github-button {
display: inline-block;
background: url('{{ url_for('static', filename='github-logo.png') }}') no-repeat;
background-size: contain; /* Ensure the logo fits inside the button */
width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
text-indent: -9999px; /* Hide text content */
overflow: hidden; /* Hide overflow */
position: relative;
left: 50px;
}
.email-button {
display: inline-block;
background: url('{{ url_for('static', filename='email.png') }}') no-repeat;
background-size: contain; /* Ensure the logo fits inside the button */
width: 60px; /* Adjust as needed (half of the original width) */
height: 150px; /* Adjust as needed (half of the original height) */
text-indent: -9999px; /* Hide text content */
overflow: hidden; /* Hide overflow */
}
.custom-hr {
border-top: 1px solid #d3d3d3;
height: 250px; /* Adjust the height as needed */
margin-top: 10px; /* Add margin to separate the line from content */
margin-bottom: 20px; /* Add margin to separate the line from content */
}
.contact-form {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: none; /* Removed box shadow */
width: 100%;
max-width: 400px;
margin: 0 auto;
position: relative;
bottom: 200px;
}
.contact-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: black;
text-shadow: none; /* Removed text shadow */
font-family: 'League Spartan', sans-serif;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px;
margin-bottom: 20px;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 16px;
font-family: 'League Spartan', sans-serif; /* Use the same font as other elements */
transition: border-color 0.3s;
}
.contact-form textarea {
resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #007bff;
}
.contact-form button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-family: 'League Spartan', sans-serif; /* Use the same font as other elements */
transition: background-color 0.3s;
}
.contact-form button:hover {
background-color: #0056b3;
}<h1 style="display: flex">Contact </h1>
<div class="custom-hr"></div>
<form class="contact-form" action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required placeholder="Enter your message"></textarea>
<button type="submit">Submit</button>
</form>
<div class="contact-links">
<a href="https://www.linkedin.com/in/malikmassaquoi/" target="_blank" class="linkedin-button">LinkedIn</a>
<a href=mailto:[email protected]" target="_blank" class="email-button">Email</a>
<a href="https://github.com/SirLeekster" target="_blank" class="github-button">GitHub</a>
</div>的数据
即时通讯新的Css和html，所以我没有线索，为什么它这样做
1条答案
按热度按时间fykwrbwg1#
首先，一个小问题：你在这里缺少了一个开头的引用：
字符串
应
型
你的主要问题是，你试图用
position:absolute或position:relative手动定位所有内容，我在下面注解了所有这些内容。只要让元素自然流动，页面就会随着你添加元素而增长。注意事项：我不得不删除链接到字体，因为你包括服务器端代码生成的链接，我们不能得到，我只是使用纯色的图像，因为我们没有访问的图像路径，你做的。
的字符串
此外，您的CSS关于这些链接可以简化。
你有这个，重复了很多东西，为每个环节
型
因为每个链接都是
.contact-links元素中的a标签，所以你可以把公共/共享的东西放在那里，然后只指定每个链接唯一的东西。看这个，它的工作原理和上面的代码完全一样。型