我对一般的开发还很陌生(2 周)，在转向实际语言之前尝试学习 html/css 的一些基本技能。
我无法让我的网站看起来与 Apple 主页相似。主要是我希望我的导航栏填满整个屏幕并正确调整“捐赠”横幅。
同样，我还是新手，所以我对这些功能还不感兴趣。它也不需要是“精确”的复制品，只需在那个球场内的某个地方即可。
我使用粉红色作为背景颜色，这样我可以更容易地看到我的编辑，之前我使用的是黑色背景，这似乎掩盖了我的很多边距/ float 问题。当我需要添加内容时，它最终导致了问题。
看一下(再次免责声明，我在 10 天前才开始学习 Web 开发):
body{
background-color:rgb(253, 94, 214);
margin: 0px;
border: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border: 0px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
font-family: 'Roboto', sans-serif;
width: 100%;
background-color: rgb(87, 87, 87);
position: absolute;
z-index: 100;
}
li a:hover {
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
.banner{
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 40px;
margin-bottom: 62%;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
color: rgb(4, 133, 255);
}
.main{
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 150px;
margin-bottom: 48%;
color: white;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
}
h3{
color: rgb(4, 133, 255);
font-size: 16px;
}
#redcross{
height: 40px;
width: 40px;
float: left;
}
.promobanner{
color: rgb(4, 133, 255);
padding: 50px;
float: left;
vertical-align: center;
}
#mainimg{
width: 100%;
left: 0px;
right: 0px;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Apple</title>
<link rel="stylesheet" href="mystyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class=nav>
<ul>
<li> <a href="#">Mac </a></li>
<li> <a href="#">iPad </a></li>
<li> <a href="#">iPhone </a></li>
<li> <a href="#">Watch </a></li>
<li> <a href="#">TV </a></li>
<li> <a href="#">Music </a></li>
<li> <a href="#">Support </a></li>
</ul>
</div>
<div class="banner">
</div>
<div class="promobanner">
<img id="redcross" src="redcross.png" alt="redcross">
<span> Donate to Australian Bushfire Relief > </span>
</div>
<div class="main">
<h1>iPhone 11 Pro</h1>
<h2>Pro cameras.Pro display.Pro performance</h2>
<p>From $28.29/mo. or $689 with trade-in.</p>
<h3>Learn more > Buy > </h3>
<img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
</div>
</body>
</html>最佳答案
这是您要找的吗？
我删除了 width: 100%; position: absolute; 来自 li a 并添加了 width: 100%;显示: flex ；证明内容:居中；背景色:rgb(87, 87, 87)； max-height:35px; 到 ul。
至于横幅:我将其替换为:
.promobanner {
background-color: rgb(242, 242, 242);
padding: 25px 0;
width:100%;
justify-content: center;
display: flex;
}
body {
background-color: rgb(253, 94, 214);
margin: 0px;
border: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
display: flex;
justify-content: center;
background-color: rgb(87, 87, 87);
max-height: 35px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
font-family: 'Roboto', sans-serif;
background-color: rgb(87, 87, 87);
z-index: 100;
}
li a:hover {
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
.banner {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 40px;
margin-bottom: 62%;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
color: rgb(4, 133, 255);
}
.main {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 150px;
margin-bottom: 48%;
color: white;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
}
h3 {
color: rgb(4, 133, 255);
font-size: 16px;
}
#redcross {
height: 40px;
width: 40px;
}
.promobanner {
background-color: rgb(242, 242, 242);
padding: 25px 0;
width:100%;
justify-content: center;
display: flex;
}
#mainimg {
width: 100%;
left: 0px;
right: 0px;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Apple</title>
<link rel="stylesheet" href="mystyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class=nav>
<ul>
<li> <a href="#">Mac </a></li>
<li> <a href="#">iPad </a></li>
<li> <a href="#">iPhone </a></li>
<li> <a href="#">Watch </a></li>
<li> <a href="#">TV </a></li>
<li> <a href="#">Music </a></li>
<li> <a href="#">Support </a></li>
</ul>
</div>
<div class="banner"></div>
<div class="promobanner">
<img id="redcross" src="redcross.png" alt="redcross">
<span> Donate to Australian Bushfire Relief > </span>
</div>
<div class="main">
<h1>iPhone 11 Pro</h1>
<h2>Pro cameras.Pro display.Pro performance</h2>
<p>From $28.29/mo. or $689 with trade-in.</p>
<h3>Learn more > Buy > </h3>
<img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
</div>
</body>
</html>关于html - 无法格式化苹果网站的 "clone"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59786829/