gpt4 book ai didi

html - 在不破坏布局的情况下,无法让我的页眉与页面顶部齐平

转载 作者:行者123 更新时间:2023-11-28 04:20:22 25 4
gpt4 key购买 nike

/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/

header {
background-image: url("images/song.png");
background-color: #00020e;
height: 210px;
width: 1050px;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />

<title>Lilydale Football Club</title>
</head>

<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> <a href="index.html">Home</a>
</li>
<li> <a href="history.html">History</a>
</li>
<li> <a href="players.html">Players</a>
</li>
<li> <a href="sponsors.html">Sponsors</a>
</li>
<li> <a href="news.html">News</a>
</li>
<li> <a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>

<div id="content">
<section></section>
<aside></aside>
</div>


</body>

</html>
所以基本上,我似乎无法让标题与页面顶部齐平。我可以在标题后面的顶部看到背景图片,我不想要那个。我显然对所有这些都不熟悉,这是我第一次尝试编写网站代码。

Here is a screenshot

最佳答案

这里有一个小差距的原因是因为许多浏览器中的标准元素样式包括 paddingmargin 之类的自动值。在开始新元素时为所有元素初始化这些 CSS 值是个好主意。

了解有关 CSS 重置的更多信息 here .

padding:0margin:0 添加到您的 body 可以解决问题。我更改了标题的样式,以更好地说明它现在确实与页面顶部齐平。由于 Logo 上的填充,您的 Logo 和页面顶部之间仍然存在小间隙。

/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/

header {
background-image: url("images/song.png");
background-color: white;
border:1px solid red;
height: 210px;
width: 1050px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
padding:0;
margin:0;
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />

<title>Lilydale Football Club</title>
</head>

<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> <a href="index.html">Home</a>
</li>
<li> <a href="history.html">History</a>
</li>
<li> <a href="players.html">Players</a>
</li>
<li> <a href="sponsors.html">Sponsors</a>
</li>
<li> <a href="news.html">News</a>
</li>
<li> <a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>

<div id="content">
<section></section>
<aside></aside>
</div>


</body>

</html>

关于html - 在不破坏布局的情况下,无法让我的页眉与页面顶部齐平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42238420/

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