Question

我想让网站看起来像这样：http://web.archive.org/web/20140402131524/http://www.bbc.co.uk/news/uk/

但是你看到我的头颅看起来有些混乱。我怎样才能解决这个问题？我哪里出错了？

<!doctype html>
<html>
<head>
    <title>BSS:bulls*** news</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

    body {
        margin:0;
        font-family:arial,helvetica,sans-serif;
    }

        .fixedwidth {
        width:1050px;
        margin:0 auto;
    }

    #logodiv {
        padding-top:5px;
        float:left;
        border-right:1px solid #990000;
        padding-right:10px;
    }

    #signindiv {
        font-weight:bold;
        padding:6px 80px 0px 20px;
        font-size:0.9em;
        float:left;
        border-right:1px solid #990000;

    }

    #signindiv img {
        position:relative;
        top:3px;
    }
    #topmenudiv{
    float:left;
    }
    #topmenudiv ul {
        margin:0;
        padding:0;

    }

    #topmenudiv li {
        list-style:none;
        font-weight:bold;
        font-size:0.9em;
        border-right:1px solid #990000;
        height:100%;
        padding: 10px 10px 15px 10px;
        float:left;
    }

    #searchdiv {
        float:left;
        padding:5px 0 0 10px;
    }

    #searchdiv input {
        height:25px;
        border:none;
        font-size:.9em;
        padding-left:10px;
        background-image:url("images/magnify.png");
        background-repeat:no-repeat;
        background-position:right center;
    }

    .break{
        clear:both;
    }

    #newsbar {
    background-color:#990000;
    width:100%;
    height:40px;
    color:red;
    }
    </style>

</head>

<body>

    <div id="container">

        <div id="topbar">

            <div class="fixedwidth">

            <div id="logodiv">

                <img src="images/bbc.png" />

                </div>

                <div id="signindiv">

                    <img src="images/singin.png" />sign in

                    </div>

                    <div id="topmenudiv">

                    <ul>

                        <li>News</li>
                        <li>Sport</li>
                        <li>weather</li>
                        <li>iPlayer</li>
                        <li>TV</li>
                        <li>Radio</li>
                        <li>More...</li>

                        </ul>

                    </div>

                    <div id="searchdiv">

                        <input type="text" placeholder="Search" />

                    </div>

                </div>

                <div class="break"></div>

                <div id="newsbar">

                    <div class="fixedwidth">

                        <p id="newsheader">NEWS<span id="uk">UK</span></p>

                    </div>

                </div>

            </div>

</body>
</html>

Answer 1

好吧，首先你的CSS应该在另一个链接到主页面的文档中。（http://www.w3schools.com/tags/tag_link.asp）此外，顶部条形链接都不是按钮，它们是静态的。

对于您的代码，我试试这个

CSS：

body {
    margin:0;
    font-family:arial,helvetica,sans-serif;
}

    .fixedwidth {
    width:1050px;
    margin:0 auto;
}

#logodiv {
    padding-top:5px;
    float:left;
    border-right:1px solid #990000;
    padding-right:10px;
}

#signindiv {
    font-weight:bold;
    padding:6px 80px 0px 20px;
    font-size:0.9em;
    float:left;
    border-right:1px solid #990000;

}

#signindiv img {
    position:relative;
    top:3px;
}
#topmenudiv{
float: middle;
vertical-align: center;
}

#topbar {
    background-color: red;
}
#topmenudiv ul {
    margin:0;
    padding:0;

}

#topmenudiv li {
    list-style:none;
    font-weight:bold;
    font-size:0.9em;
    border-right:1px solid #990000;
    height:100%;
    padding: 10px 10px 15px 10px;
    float:left;
}

#searchdiv {
    float:left;
    padding:5px 0 0 10px;
}

#searchdiv input {
    height:25px;
    border:none;
    font-size:.9em;
    padding-left:10px;
    background-image:url("images/magnify.png");
    background-repeat:no-repeat;
    background-position:right center;
}

.break{
    clear:both;
}

#newsbar {
background-color:#990000;
width:100%;
height:40px;
color:red;
}
</style>

HTML：

<div id="container">

    <div id="topbar">

        <div class="fixedwidth">

        <div id="logodiv">

            <img src="images/bbc.png" />

            </div>

            <div id="signindiv">

                <img src="images/singin.png" />sign in

                </div>

                <div id="topmenudiv">

                <ul>

                    <li>News</li>
                    <li>Sport</li>
                    <li>weather</li>
                    <li>iPlayer</li>
                    <li>TV</li>
                    <li>Radio</li>
                    <li>More...</li>

                    </ul>

                </div>

                <div id="searchdiv">

                    <input type="text" placeholder="Search" />

                </div>

            </div>

            <div class="break"></div>

            <div id="newsbar">

                <div class="fixedwidth">

                    <p id="newsheader"><b>NEWS<span id="uk">  UK</b></span></p>

                </div>

            </div>

        </div>

那应该有用。您可以在css代码中编辑顶部栏的颜色，它位于定义主顶部栏的区域下面（#topbar）

为什么我的顶部标题看起来像这样？我正在关注Udemy英国广播公司克隆讲座

1 个答案: