0

http://gyazo.com/17f61b8da9a1dab18c69ef1810920817

body {
    font-family: 'Courier-New', Courier, monospace;
    background-image:url('images/bg.png');
}

p {
    color: #fff;
}

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

a:hover {
    color: #8e00d9;
}

/* Header */

header {
    background: url('images/swirl.png');
    box-shadow: 0px 1px 10px #000;

}

header h1 {
    margin: auto;
    background: url('images/logo.png') no-repeat;
    text-indent: -9999px;
    width: 380px;
    height: 120px;
}

/* Navigation Top */

我的标题没有一直延伸....

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Green Cup Of Tea</title>
    </head>
    <body>
        <header>
            <h1>
                Logo here
            </h1>
            <div id="navtop">
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </header>
        <div id="content">

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

2 回答 2

0

简单的修复建议：

  1. 考虑使用重置，无论是this还是this。

  2. 如果没有，只需在顶部包含此 CSS：

     * {margin: 0; padding: 0;}
于 2012-12-29T02:02:43.123 回答
0

添加padding: 0;andmargin: 0;它应该一直延伸。

我建议重置代码。最简单的方法是在您的 css 文件中添加此代码：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

资源。

于 2012-12-29T01:30:43.970 回答