gpt4 book ai didi

html - 如何修复这些重叠的 HTML 元素?

转载 作者:行者123 更新时间:2023-11-28 08:10:40 24 4
gpt4 key购买 nike

有人可以看看我的代码并告诉我:

  1. 我怎样才能让图像通过 <header><nav>这样其他一切都可以正确居中。我试过使用 z-index,但似乎没有任何效果。

  2. 我如何获得 <section><nav>下开始而不是在页面顶部的其他元素后面而不使用负载 <br>是吗?

@CHARSET "ISO-8859-1";

body {
font-family: "Comic Sans MS", cursive, sans-serif
}

header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}

.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}

header h2 {
min-width: 800px;
}

nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}

nav li {
display: inline;
}

nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}

nav a:hover {
color: white;
}

section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}

section h3 {
text-align: center;
}

.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>

<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>

</body>
</html>

最佳答案

更改这些 css 属性,您应该能够摆脱所有中断:

section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}

.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}

如果您在做绝对定位,则无需在 Logo 上向左浮动。此外,您还想为您的部分添加顶部填充(padding 属性中的第一个值)以将其向下移动到导航下方。

http://jsbin.com/woyilesoka/2/edit?html,css,output

关于html - 如何修复这些重叠的 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29287756/

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