-3

Hello Stack Overflow community! I am a complete beginner to programming and am attempting to learn my way around HTML and CSS at the moment. One of the projects I am working on is to re-create the Google homepage without looking at the source code. I am struggling right now with positioning of various elements (logo, search box, footer).

Can someone look at my code and tell me specifically why my positioning will not work on the three elements I mentioned?

Also, is my HTML semantically correct when it comes to "id" and "class"? Here is the code:

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

}
4

2 回答 2

2

您忘记了一些基础知识：请参阅Uzziel 对精度的回答，他准确地指出了这些（也有评论）。

但是，您应该知道Stack Overflow 不是为您更正所有代码的地方，但我认为它可能有助于您了解错误的位置。

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

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

我把我的代码放在这里，所以你可以在之后随意调整它。

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;
}
于 2013-07-08T22:47:52.837 回答
1

您缺少一些基本的 HTML 结构 - 您没有关闭 HEAD 标记；没有身体标签；您没有关闭 HTML 标记。

不，当涉及到 ID 和 CLASS 时，您提供的代码在语义上不正确，因为您没有关闭所有 DIV。特别是“容器” DIV 没有关闭。请记住，在使用 ID 和 CLASS 时，ID 应该只在文档中出现一次；CLASS 可以根据需要多次重复使用。

于 2013-07-08T22:35:24.290 回答