Question

第一次创建一个网站，我发现当我缩小时，我的布局大小搞砸了。任何人都可以帮我解释一下为什么？以及如何解决它谢谢！

这就是100％缩放时的情况：http://puu.sh/peI6R/c7f45747a0.png

当我缩小时：http://puu.sh/peI80/f5fb16d6d0.png

另外，如何让我的页脚在左侧有一个垂直列表？我尝试使用float：left但是它只是扰乱了这些词。

在尝试创建这个网站之后，我意识到我的css属性知识是可怕的。我只在Codecademy上完成了HTML / CSS / JS，也许这还不够，所以任何提示都会受到赞赏！

<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>

CSS

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;
}

Answer 1

发生了什么？

关注我

这是你的布局，基本上。

body
    banner
    nav
    content
    footer

由于您尚未使用CSS来设置我们的部分样式，因此所有部分都有width: auto。简单来说，只能理解这个问题，在这种情况下，我们可以说我们的部分具有浏览器窗口的宽度。

您使用body设置了margin: 5px 225px 225px元素的样式，换句话说，margin shorthand property：

上边距为5px
左右边距为225px
底部边距为225px

所以现在我们的元素＆＃39;宽度是100% 的结果（在这种情况下，浏览器窗口的宽度） - 225px * 2 （因为左右身体＆＃39; s边距）

然后，将内容和页脚的宽度设置为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的宽度取决于浏览器窗口的宽度。

如何解决

使用banner和nav定义content和footer的宽度。你可以做一个div，例如调用container来设置所有元素的宽度，所以如果你想在将来改变它，你只需要修改一行。

.container {
    width: 600px;
    margin: 0 auto;
}

Answer 2

.banner和nav的高度必须定义为.Content和footer（900px）。添加margin:0 auto以使其始终居中;

.banner, nav { width: 900px; margin:0 auto; }

初学者网站，当我缩小布局变化，以及一般的CSS提示

2 个答案:

发生了什么？

如何解决