Question

您好我正在尝试复制google的homeppage页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google</title>
    <link rel = "stylesheet" href = "style.css">
</head>

<body>
    <nav>
        <ul>
            <li>Gmail</li>
            <li>Images</li>
            <li>App</li>
            <li>Signin</li>
        </ul>
    </nav>

    <div id = 'container'>
        <h1 id = 'logo'>Google</h1>
        <form>

        <input type = "text">
        <input type = "submit" value = "Google Search">
        <input type = "submit" value = "I'm Feeling Lucky"> 

        </form>
    </div>

    <footer>
        <p>US</p>
        <ul class = "left">
            <li>Adverstising</li>
            <li>Business</li>
            <li>About</li>
        </ul>

         <ul class = "right">  
            <li>Privacy</li>
            <li>Terms</li>
            <li>Settings</li>
            <li>Use Google.com</li>
        </ul>
    </footer>


</body>
</html>

CSS是：

* {
    margin:0;
    padding:0;
    box-sizing :border-box;
}

body{
    font-family : arial ,san-serif;
    font-size:13px;
}
#logo {
    background: url('/img/googlelogo_color_272x92dp.png') top left no-repeat;
    width:269px;
    height:95px;
    text-indent:-9999px;
    margin : 0 auto;

}

#container {
    width: 590px;
    margin :0 auto;
    text-align:center;

}

input[type = "text"]{
    width: 590px; 
    padding : 7px;   
    margin:30px 0 ;
    border : solid 1px #eee;
}

input[type = "text"]:hover {   
    border : solid 1px #aaa;   
}

input[type="submit"] {
    background: #f2f2f2;
    padding:10px;
    font-size:13px;
    border: solid 1px #ccc;
    border-radius:2px;
    color:#757575;
    border-radius :2px;
    fvont-weight:bold;

}
input[type="submit"]:hover {

    border : solid 1px #aaa;
    cursor:pointer;
}

nav {

    text-align: right;
}

nav ul li {
    display: inline;
    padding:7px;   
}

对于容器div，我想给它顶部边距，我试过margin: 80 auto 0;但是这不再是容器的中心，它将它移动到身体的左边缘，即使它有左边/右边距：汽车。我检查了Chrome，当给出边距顶部时，应用于所有元素的重置规则似乎适用。有人可以告诉我为什么会这样吗？我是HTML和CSS的新手，我花了大约4个小时试图解决这个问题。

Answer 1

对于margin的值，请使用80px auto 0，它应该可以正常工作。 80 auto 0是做你想要达到的事情的错误方法。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: arial, san-serif;
  font-size: 13px;
}

#logo {
  background: url('/img/googlelogo_color_272x92dp.png') top left no-repeat;
  width: 269px;
  height: 95px;
  text-indent: -9999px;
  margin: 0 auto;
}

#container {
  width: 590px;
  margin: 80px auto 0;
  text-align: center;
}

input[type="text"] {
  width: 590px;
  padding: 7px;
  margin: 30px 0;
  border: solid 1px #eee;
}

input[type="text"]:hover {
  border: solid 1px #aaa;
}

input[type="submit"] {
  background: #f2f2f2;
  padding: 10px;
  font-size: 13px;
  border: solid 1px #ccc;
  border-radius: 2px;
  color: #757575;
  border-radius: 2px;
  font-weight: bold;
}

input[type="submit"]:hover {
  border: solid 1px #aaa;
  cursor: pointer;
}

nav {
  text-align: right;
}

nav ul li {
  display: inline;
  padding: 7px;
}

＆＃13;

<nav>
  <ul>
    <li>Gmail</li>
    <li>Images</li>
    <li>App</li>
    <li>Signin</li>
  </ul>
</nav>

<div id='container'>
  <h1 id='logo'>Google</h1>
  <form>

    <input type="text">
    <input type="submit" value="Google Search">
    <input type="submit" value="I'm Feeling Lucky">

  </form>
</div>

<footer>
  <p>US</p>
  <ul class="left">
    <li>Adverstising</li>
    <li>Business</li>
    <li>About</li>
  </ul>

  <ul class="right">
    <li>Privacy</li>
    <li>Terms</li>
    <li>Settings</li>
    <li>Use Google.com</li>
  </ul>
</footer>

＆＃13;

顶部保证金停止集中容器

1 个答案: