-3

こんにちは、スタック オーバーフロー コミュニティです。私はプログラミングの完全な初心者で、現在 HTML と CSS の使い方を学ぼうとしています。私が取り組んでいるプロジェクトの 1 つは、ソース コードを見ずに Google ホームページを再作成することです。現在、さまざまな要素 (ロゴ、検索ボックス、フッター) の配置に苦労しています。

誰かが私のコードを見て、私のポジショニングが私が言及した 3 つの要素で機能しない理由を具体的に教えてもらえますか?

また、「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;

}
4

2 に答える 2

2

あなたはいくつかの基本を忘れました: Uzziel's answer for precisionsを参照してください。彼はそれらを正確に指摘しました (コメントも)。

ただし、 Stack Overflow はすべてのコードを修正する場所ではないことを知っておく必要がありますが、どこが間違っていたかを確認するのに役立つと思います。

HTML 構造をあまり変更しないようにしました。主に CSS でいくつかの変更を行いました。

HTML と CSS (および JS) をオンラインで編集し、その結果を瞬時に確認できる JSFiddle.net という Web サイトがあります。

ここにコードを置いたので、後で必要に応じて微調整できます。

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 タグを閉じていません。BODY タグはありません。HTML タグを閉じません。

いいえ、提示したコードは、ID と CLASS に関しては意味的に正しくありません。これは、すべての DIV を閉じているわけではないためです。特に「コンテナ」の DIV は閉じられていません。ID と CLASS を使用するときは、ID はドキュメント内で 1 回しか表示されないことに注意してください。CLASS は何度でも再利用できます。

于 2013-07-08T22:35:24.290 に答える