【发布时间】：2020-05-04 07:27:16
【问题描述】：
总的来说，我对开发还是很陌生（2 周后），尝试学习一些 html/css 的基本技能，然后再学习一门实际的语言。
我无法让我的网站看起来与苹果主页相似。主要是我希望我的导航栏在屏幕上一直填写并正确调整“捐赠”横幅。
我还是很新，所以我对功能不感兴趣。它也不需要是一个“精确”的复制品，只要在那个球场的某个地方。
我使用粉红色作为背景颜色，这样我可以更轻松地查看我的编辑，之前我使用的黑色背景似乎掩盖了我的很多边距/浮动问题。当我需要添加内容时，它最终导致了问题。
这是一个外观（再次免责声明，我在 10 天前确实拿起了网络开发）：
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>【问题讨论】：
标签： html css list width margin