第一次制作网站时，我发现当我缩小时，我的布局会变得一团糟。有人能帮我解释一下原因吗？以及如何修复谢谢！这是100%变焦时的样子：http://puu.sh/peI6R/c7f45747a0.png缩小时：http://puu.sh/peI80/f5fb16d6d0.png此外，如何使我的页脚在左侧有一个垂直列表？我试着用float：left，但它只是打乱了单词。
在尝试制作这个网站后，我意识到我的CSS属性知识是可怕的。我只在Codecademy上做过HTML/CSS/JS，也许这还不够，所以任何提示都将不胜感激！
body {
margin: 5px 225px 225px;
background-color: #FFA500;
font-family: Comic Sans MS;
}
.banner {
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
height: 250px;
background-size: cover;
background-position: center center;
margin: 0;
}
.heading {
text-align: center;
background-color: #3232FF;
border-bottom: 5px solid black;
}
.Content {
width: 900px;
height: 700px;
margin: auto;
background-color: white;
}
.Profile {
margin-left: 100px;
}
.mypic {
margin-left: 50px;
}
.footer {
width: 900px;
height: 120px;
color: black;
margin: auto;
background-color: #aaa;
}
.footer ul {
list-style: none;
}
.footer li {
display: block;
}
nav {
display: block;
background: #aaa;
}
ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px 100px;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: white;
}<html>
<head>
<title>Simon's First Website!</title>
<meta charset="UTF-8">
<meta name="description" content="Simon's Portfolio">
<meta name="keywords" content="Simon Fu First Portfolio">
<meta name="author" content="Simon Fu">
<link rel="stylesheet" type="text/css" href="First.css">
</head>
<body>
<div class="banner"></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
</ul>
</nav>
<div class="Content">
<div class="heading">
<img src="http://vignette1.wikia.nocookie.net/yogscast/images/c/c0/Simon_Banner_png.png/revision/20140308175434">
</div>
<div class="base">
<h1 class="Profile">Profile</h1>
<figure class="mypic">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" height="250" width="250">
<figcaption>My beautiful face</figcaption>
</figure>
</div>
</div>
<div>
<div class="footer">
<div align="center"><strong>Contact Me</strong></div>
<ul class="left">
<li>Email: dontmessiiii@gmail.com</li>
<li>Melee: JK</li>
<li>League of Legends: jk</li>
</ul>
</div>
</body>
</html>发生了什么
关注我
这基本上就是你的布局。
body
banner
nav
content
footer
由于您还没有使用CSS来设计我们的部分，所以它们都有width: auto。简单地说，只是为了理解这个问题，在这种情况下，我们可以说我们的部分有你浏览器窗口的宽度。
您使用margin: 5px 225px 225px设置了body元素的样式，因此换句话说，由于margin简写属性：
- 上边距为5px
- 左右边距为225像素
- 底部边距为225像素
所以现在我们元素的宽度是100%(在本例中是浏览器窗口的宽度)-225px * 2的结果(因为左右体的边距)。
然后，将内容和页脚的宽度设置为900px
.content {
width: 900px;
}
footer {
width: 900px;
}
所以，如果你回到我们的布局，我们会看到
body
banner has width: auto => browser window's width - 225 * 2
nav has width: auto => browser window's width - 225 * 2
content has width: 900px
footer has width: 900px
content和footer的宽度是静态的，而banner和nav的宽度取决于浏览器窗口的宽度。
如何解决
如对content和footer所做的那样定义banner和nav的宽度。您可以执行一个div，例如container，以设置所有元素的宽度，因此如果您想在将来更改它，您只需要修改一行。
.container {
width: 600px;
margin: 0 auto;
}
.banner和nav的高度必须像.Content和footer一样定义(900px)。添加CCD_ 21使其始终居中；
.banner, nav { width: 900px; margin:0 auto; }