1

したがって、基本的にページの上部を削除することはできません。それは単なる空白であり、css をいくら変更しても、何も変更できないようです。パディングやボーダーなどを使用せずに、ナビゲーションバーをページの上部に配置したいと考えています。これが私のコードです。おそらく最も簡単なことだと思いますが、現時点では見つけられません。

HTML

<!DOCTYPE html>

<html>

<head>
    <meta name="Description" content="This is a test website!"/>
    <meta name="author" content="Me!"/>
    <title>test | Home</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>

    <div id="wrapper">
        <nav id="navmenu">
            <ul>
                <li>Home</a>
                <li>About</li>
                <li>Tutorials</li>
                <li>Services</li>
                <li>Contact Us</li>
            </ul>

        <aside id="sidenews">

        </aside>

        <div id="center">

            <section id="mainsection">
                <article>
                    <header>
                        <hgroup>
                            <h1>This is a test</h1>
                            <h2>I like tests!</h2>
                        </hgroup>
                    </header>
                    <section>
                        <p>This is the main section of my section (sectception)</p>
                    </section>
                    <footer>
                        <p>Time and date</p>
                    </footer>
                </article>
            </section>

        </div>

        <footer id="cright">
            <p>This is the copyright section. All rights reserved.</p>
        </footer>
</body>

</html>

CSS

*{
margin: 0;
padding: 0;
}

header, section, footer, aside, nav, article, hgroup{
    display: block;
}

a{
    text-decoration: none;
    color: #FFF;
}

a:hover{
    color: #333399;
}


#wrapper{
    width: 1000px;
    margin: 20px auto;
    text-align: left;
    background-color: #FFF;
}

#navmenu{
    background: #3366CC;
    color: #eee;
    text-align: center;
    height: 100px;
    padding: 0;
    margin:0;
    float: top;
    width: 100%;
}

#navmenu li{
    display: inline-block;
    list-style: none;
    padding: 20px;

}

#navmenu li:hover{
    color: #FFF;
    background: #3399FF;
    border-radius: 15px;
    -moz-border-radius: 5px;
}




#mainsection{
    float:left;
    width: 630px;
    margin:30px;
    margin-top: 2
    background-color:#FFF;
    color: #222;
    text-align: left;

}

#cright{
    text-align: center;
    background-color: #AAA;

    clear: both;
}

#center{
    width: 1000px;
    height: 1000px;
    background-color:#FFF;
}

#sidenews{
    float:right;
    width: 250px;
    height: 940px;
    margin: 0px 0px;
    padding: 30px;
    background-color:#FFF;
}
4

3 に答える 3

9

ラッパーのマージンを0に変更しますか？

#wrapper{
    margin: 0 auto;
}
于 2013-02-09T10:04:50.637 に答える
1

#wrapper要素の上部マージンは20pxです-それですか？

#wrapper{
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  background-color: #FFF;
}
于 2013-02-09T10:07:03.727 に答える
1

ラッパーのマージンを0に設定します

#wrapper {
    background-color: #FFFFFF;
    margin: auto;
    text-align: left;
    width: 1000px;
}
于 2013-02-09T10:07:04.300 に答える