Question

Hello Stack Overflow社区！我是一个完整的编程初学者，现在正试图学习HTML和CSS。我正在研究的项目之一是重新创建Google主页而不查看源代码。我现在正在努力寻找各种元素（徽标，搜索框，页脚）。

有人可以查看我的代码并告诉我为什么我的定位不适用于我提到的三个元素吗？

另外，对于“id”和“class”，我的HTML在语义上是否正确？这是代码：

<!doctype html>

<html lang="en">
<head>
<link rel="stylesheet" href="main.css"/>

<title>Google</title>

<div class="container">

<nav id="nav">
    <ul> 
        <li><a href="#">+You</a></li>
        <li><a href="#">Search</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">Maps</a></li>
        <li><a href="#">Play</a></li>
        <li><a href="#">YouTube</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Drive</a></li>
        <li><a href="#">Calendar</a></li>
        <li><a href="#">More</a></li>
    </ul>

</nav>

<img src="https://www.google.com/images/srpr/logo4w.png" alt="Google" width=280     height=95/>


<div id="sign">SIGN IN</div>

<form>
<input type="text"> 
</form>

<div id="footer">
    <ul>
        <li><a href="#">Advertising Programs</a><li>
            <li><a href="#">Business Solutions</a><li>
                <li><a href="#">Privacy & Terms</a><li>
                    <li><a href="#">+Google</a><li>
                        <li><a href="#">About Google</a><li>
    </ul>
</div>



.container {
width: auto;
height: 600px;
position: relative;
}

#nav {
background-color: #333333;
height:30px;

}

li a {
text-decoration: none;
font-family: arial;
color: #ABABAB;
float: left;
padding: 5px;
font-size: 13px;
font-weight: 600;
margin-top: 2px;
margin-right: 13px;

}

img {
margin-left: 130px;
margin-top: 195px;
}

#sign {
border: 2px solid #D94A4A;
background-color: #D94A4A;
height: 16px;
width: 65px;
float: right;
margin-right: 40px;
margin-top: 20px;
border-radius: 3px;
font-size: 11px;
font-family: arial;
text-align: center;
color: white;
font-weight: 600;
padding-top: 7px;

}

input {
width: 550px;
height: 25px;
border: 1px solid #3492F7;
margin-top: 290px;
margin-left: 670px;
}

#footer {
position: relative;
bottom: 0;
font-family: verdana;
display: inline;

}

Answer 1

你忘记了一些基础知识：看到 Uzziel的精确答案，他准确地指出了这些（评论也是如此）。

但是，您应该知道 Stack Overflow不是让您的所有代码都得到纠正的地方，但是我认为它可能对您有所帮助有所帮助。

我试图不要过多地改变HTML结构，我主要在CSS中做了一些修改。

有一个网站，JSFiddle.net，您可以在线编辑HTML和CSS（和JS）并立即查看结果。

I put my code here, so you can tweak it as you wish afterwhile.

HTML

<div class="container">
    <nav id="nav">
        <ul>
          <li>
            <a href="#">
              +You
            </a>
          </li>
          <li>
            <a href="#">
              Search
            </a>
          </li>
          <li>
            <a href="#">
              Images
            </a>
          </li>
          <li>
            <a href="#">
              Maps
            </a>
          </li>
          <li>
            <a href="#">
              Play
            </a>
          </li>
          <li>
            <a href="#">
              YouTube
            </a>
          </li>
          <li>
            <a href="#">
              News
            </a>
          </li>
          <li>
            <a href="#">
              Gmail
            </a>
          </li>
          <li>
            <a href="#">
              Drive
            </a>
          </li>
          <li>
            <a href="#">
              Calendar
            </a>
          </li>
          <li>
            <a href="#">
              More
            </a>
          </li>
        </ul>
      </nav>
      <div id="sign">
        SIGN IN
      </div>
      <img src="https://www.google.com/images/srpr/logo4w.png" alt="Google" />
      <form>
        <input type="text" />
      </form>
      <div id="footer">
        <ul>
          <li>
            <a href="#">
              Advertising Programs
            </a>
          </li>
          <li>
            <a href="#">
              Business Solutions
            </a>
          </li>
          <li>
            <a href="#">
              Privacy & Terms
            </a>
          </li>
          <li>
            <a href="#">
              +Google
            </a>
          </li>
          <li>
            <a href="#">
              About Google
            </a>
          </li>
        </ul>
      </div>
    </div>

CSS：

.container {
    width: 100%;
    height: 1000px;
    position: relative;
}

nav {
    background - color: #333333;
    height: 30px;
}

li {
    list-style: none;
    display: inline-block;
}

li a {
    text-decoration: none;
    font-family: arial;
    color: # ABABAB;
    float: left;
    padding: 5px;
    font - size: 13px;
    font - weight: 600;
    margin - top: 2px;
    margin - right: 13px;
}

img {
    width: 280px;
    margin: 195px auto 0 auto;
    display: block;
}

#
sign {
    border: 2px solid# D94A4A;
    background - color: #D94A4A;
    height: 16px;
    width: 65px;
    float: right;
    margin - right: 40px;
    margin - top: 20px;
    border - radius: 3px;
    font - size: 11px;
    font - family: arial;
    text - align: center;
    color: white;
    font - weight: 600;
    padding - top: 7px;
}

input {
    width: 550px;
    height: 25px;
    border: 1px solid #3492F7;
    margin: 20px auto;
    display: block;
}

# footer {
    position: absolute;
    bottom: 0;
    font - family: verdana;
}

Answer 2

您缺少一些基本的HTML结构 - 您不会关闭HEAD标记;没有BODY标签;你不要关闭HTML标签。

不，您提供的代码在ID和CLASS方面没有语义正确，因为您没有关闭所有DIV。特别是“容器”DIV没有关闭。请记住，在使用ID和CLASS时，ID只应在文档中显示一次; CLASS可以根据需要重复使用。

重新创建Google主页

2 个答案:

HTML

CSS：