Question

enter image description here

#header {
    z-index: 1;
    width: 100%;
    padding: 8px 0px 8px 0px;
    background-image: url('img/head-img.png');
    background-repeat: repeat;
}

#nav {
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    font-size: 25px;
}

#nav a {
    color: white;
    text-decoration: none;
    padding-right: 10px;
    font-family: fantasy;
}

#nav a:hover {
    color: black;
    text-decoration: underline overline;
}

#dlogo {
    position: absolute;
    /* background-color: #feffe3; */
    z-index: -1;
    width: 100%;
    height: 100%;
}

#dtext {
    position: absolute;
    z-index: -1;
    margin: 0px auto;
    width: 100%;
    height: 100%;
}

#blogo {
    display: block;
    margin-top: 12%;
    margin-left: auto;
    margin-right: auto;
}

#btext {
    margin-top: 55px;
    margin-left: 40%;
}

#wrapper {

}

#content {
    margin: 0px auto;
    margin-top: 60px;
    min-width: 600px;
    max-width: 1000px;
    font-size: 22px;
    font-family: sans-serif;
}

#content h1, h2 {
    color: orange;
    font-family: serif;
}

#content a {
    color: black;
    text-decoration: none;
}

#content a:hover {
    color: red;
}

#footer {
    z-index: 1;
    width: 100%;
    height: 200px;
    background-color: #1d726d;
    margin-top: 40%;
}


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title></title>
    </head>
    <body>
        <div id="dlogo">
                <img id="blogo" src="img/back-img2.png" />
        </div>
        <div id="dtext">
                <img id="btext" src="img/f-it2.png" />
        </div>
        <div id="header">
            <div id="nav">
                <a href="">Home</a>
                <a href="">About Us</a>
                <a href="">Solutions</a>
                <a href="">Success Stories</a>
                <a href="">Contracts</a>
                <a href="">Careers</a>
                <a href="">Contact Us</a>
            </div>
        </div>
        <div id="wrapper">
            <div id="content">

            </div>
        </div>
        <div id="footer">

        </div>
    </body>
</html>

如果你仔细观察，你会发现黑色导航条/标题不会从一边到另一边拉伸。

整个网站似乎已经应用了10px的保证金。

如何摆脱我从未应用的“保证金”，但不会发生在任何其他网站上。

我正在使用netbeans，chrome和xampp。

Answer 1

您应该使用重置样式表来重置浏览器添加到网页的默认规则。 Eric Meyer's和YUI's重置样式表适用于大多数网页。就个人而言，我使用Eric Meyer作为我的网页。确保将重置样式表放在任何其他样式表之前。

Answer 2

你不能这样做吗？

html {
   padding:0px;
   margin:0px;
}

或者我错过了这里的观点？如果你能详细说明，没有给出太多细节？它有助于。：d

另外，有时我会给你的div一个负margin值。

网站div不会从左到右延伸，你如何修复css？

2 个答案: