Question

我无法通过代码中的注释修改我标记的列表，也无法更改应该用于操作列表的id topicmenu的背景颜色。任何人都可以告诉我的代码有什么问题吗？

<!doctype html>
<html>
<head>
    <title>BBC News - HIEP</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;
        }

        .fixwidth{
            width: 1020px;
            margin: 0 auto;
            padding:0;
        }

        .break{
            clear: both;
        }

        #container{

        }

        #topbar{
            background-color:#7A0000;
            width:100%;
            height:40px;
            color: white;
            margin:0;
            padding:0;
        }

        #logodiv{
            margin:0;
            float:left;
            border-right: 1px solid #990000;
            padding: 0 160px 0 0;
        }

        #logodiv img{
            position: relative;
            top:3px;
            margin:0;
            padding:0 10px 1px 0;
            border-right: 1px solid #990000;
        }

        #topmenudiv ul{
            margin:0;
            padding:0;
        }

        #topmenudiv li{
            float: left;
            padding:10px 11px 13px 11px;
            margin:0;
            list-style: none;
            border-right: 1px solid #990000;
            font-weight:bold;
            font-size:0.8em;
        }

        #searchdiv{
            float: left;
            padding:7px 11px 5px 11px;
        }

        #searchdiv input{
            height: 18px;
            width: 185px;
            padding-left: 5px;
            font-weight:bold;
            color:#525252;
            font-size:0.8em;
            background-image:url("image/magnify.jpg");
            background-repeat: no-repeat;
            background-position: right center;
        }

        #headerbar{
            margin:0;
            padding:0;
            background-color:#990000;
            width:100%;
            height:130px;
            color: white;
        }

        #headerbar p{
            margin:0;
        }

        #newsheader{
            float:left;
            font-size: 3em;
            padding: 10px 0 0 0;
        }

        #us{
            font-size:0.5em;
        }

        #rss{
            margin: 35px 10px 0 0;
            float:right;
            font-size:0.9em;
            font-weight:bold;
        }

        #rss img{
            height:16px;
        {

        #topicmenu{ /* the class that is used to manipulate the list*/
        }

        #topicmenu ul{
            background-color:#3E0C0D;
        }

        #topicmenu li{
            list-style: none;
        }
    </style>

</head>

<body>
    <div id ="container">
        <div id = "topbar">
            <div class ="fixwidth">
                <div id="logodiv">
                    <a href="http://www.bbc.com/news/" target = _blank><img src="image/bbclogo.jpg" /></a>
                </div>
                <div id= "topmenudiv">
                    <ul>
                        <li>News</li>
                        <li>Sport</li>
                        <li>Weather</li>
                        <li>Earth</li>
                        <li>Future</li>
                        <li>Shop</li>
                        <li>TV</li>
                        <li>Radio</li>
                        <li>More...</li>
                    </ul>
                </div>

                <div id="searchdiv">
                    <input type = "text" placeholder ="Search"/>
                </div>
            </div>
        </div>

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

        <div id="headerbar">
            <div class ="fixwidth">
                <p id ="newsheader" >NEWS <span id="us">US</span></p>
                <div id = "rss">
                    RSS <img src = "image/rss.jpg" />
                </div>
                <div class ="break"></div>
                <div id ="topicmenu"> <!-- the list I get trouble from-->
                    <ul>
                        <li>Home</li>
                        <li>World</li>
                    </ul>
                </div>

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

Answer 1

嗯，也许是因为：

#rss img{
    height:16px;
{

^应为}

Answer 2

您的问题有点令人困惑，您无法更改“topicmenu”类的背景颜色，因为您的html中没有类“topicmenu”。但是有一个id主题菜单......

也是你不能正确设置风格的主要原因，因为你的#rss中没有任何结束标记img {...，你应该有#rss img {....}

这是一个解决问题的工作小提琴

<http://jsfiddle.net/owjwm8uw/>

另一件事，尽量让你的代码尽可能干净......避免在你的id / class和等号之间留出空格，比如：

yourid =“blabla”，应该是yourid =“blabla”

啦啦队友，推进圣诞快乐！

为什么我不能修改列表？

2 个答案: