Question

html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}

div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}

header{
background-color: #000000;
float: left;
width: 100%;
}

header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}

.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}

.nav li {
display: inline-block;
}

.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}

.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}

.nav li.active a{
border: 1px solid white;
}

.banner-image {
width: 100%;

}

<DOCTYPE html>
<head>
    <title> GWS News</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
</head>

<body>
    <header>
        <div class="container">
            <h1> Grass World Sport News</h1>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html#">World Cup</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <div class="banner">
            <img class="banner-image" src=img/banner1.jpeg>
        </div>
    </header>
</body>

我想修复导航栏，但不知道该怎么做。

我想做的改进是：

如何将字体颜色更改为白色（我尝试使用字体：#ffffff，如代码所示）？
如何使链接间隔开？
如何将链接移到最右边（如代码所示，浮动似乎不起作用）？
如何使导航栏的字体变大（字体：20px似乎无法正常工作）？
如何使“草世界体育新闻”的标题更大？

Answer 1

如何将字体颜色更改为白色（我尝试使用字体：#ffffff，如编码所示）？

问题出在您的选择器上，应该是ul.nav li a而不是.nav ul li a

如何使链接间隔开？

只需在链接元素的左边添加边距（因为您希望它向右浮动）：

ul.nav li {
   margin-left: 1rem // for example
}

如何将链接移到最右边（浮动代码似乎无法正常工作）？

浮点数正常运行，但是您在父容器上具有最大宽度，因此它只能到达容器的最右边。如果要在窗口右侧删除最大宽度。

div.container{
margin: 0;
padding: 0 30px;
}

如何使导航栏的字体变大（字体：如编码中所示，20px似乎不起作用）？

与数字1相同的问题。只需将选择器设置为ul.nav li a

如何使“草世界体育新闻”的标题变大？

如果您是指较大的字体，则设置较大的字体大小。

header h1 {
   // for example
   font-size: 30px;
}

Answer 2

这是非常广泛的内容，查看代码似乎是从另一个站点复制/粘贴了代码，它们期望得到相同的结果，而不是编码的工作原理。

这是一支笔：https://codepen.io/codespent/pen/BVXyWO

要回答您的问题：

要更改字体颜色，请在父规则中使用color: #fff。
可以通过多种方式实现间距，但是在开始玩任何东西之前，只需学习盒子模型即可，以了解为什么要使用填充或边距。
将链接移至右侧也是上下文的，您可以通过多种方式进行操作，但是您需要了解为什么要这样做。 text-align:right;可能有效，但建议使用 Flexbox 。
font is an outdated property。您可以使用font-size:20px;来更改字体大小。
这也是一个广泛的问题，因为有很多方法可以使您感觉最佳。

要了解这些基础知识，我强烈建议您参加freeCodeCamp's Basic CSS courses，并且，您也应该看到StackOverflow's "How to Ask" knowledge object，以了解在到这里寻求帮助时应该如何提出问题。

如何改进导航栏？

2 个答案: