如何修复导航栏？ [英] How do I fix up my navigation bar?
问题描述
我想修改我的导航栏但不知道该怎么做。
我想做的改进是：
1.如何将字体颜色更改为白色（我已尝试过字体：#ffffff，如编码中所示）？
2.我如何让链接间隔开来？
3.如何将链接移动到最右边（浮动似乎不能正常工作，如编码中所示）？
4.如何使导航栏的字体更大（字体：20px似乎没有像您在编码中看到的那样工作）？
5.如何制作标题草地世界体育新闻更大？
我尝试过：
这是html：
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
1. How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
2. How do I make the link spaced out?
3. How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
4. How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
5. How do I make the title "Grass World Sport News" bigger?
What I have tried:
Here is the html:
<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>
这是css：
Here is the css:
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%;
}
推荐答案
1。如何将字体颜色更改为白色（我已经尝试过字体：#ffffff，你可以在编码中看到）？
1. How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
你有正确的想法，但是.nav ul li a表示ul里面的.nav，而.nav是ul。所以删除ul。
You have the right idea, but ".nav ul li a" means the ul inside .nav, while .nav is the ul. So remove the ul.
2。如何使链接间隔开？
2. How do I make the link spaced out?
您可以在.nav li a周围添加边距，例如保证金：0px 10px。
You could add margins around ".nav li a", e.g. "margin:0px 10px".
3。如何将链接移动到最右边（浮动似乎没有像你在编码中看到的那样工作）？
3. How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
它浮动到右边，但是你已经设置了填充10p 100px。 100px可能是拼写错误？请注意，您已将最大页面宽度设置为1200，这会对此产生影响，但我会假设您打算这样做。
It is floating to the right, but you have set a padding of "10p 100px". The 100px might be a typo? Note that you have set a max page width of 1200, which affects this, but I will assume that you intended that.
4。如何使导航栏的字体更大（字体：20px似乎在编码中看不到）？
4. How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
这与根本原因相同第一个问题。解决后，这也会自动修复。
This has the same root cause as the first question. With that solved, this is automatically fixed too.
5。如何使标题草地世界体育新闻更大？
5. How do I make the title "Grass World Sport News" bigger?
在标题h1上设置字体大小，例如font-size：50px。
把所有东西放在一起就是这样的： jsfiddle [ ^ ]。
这篇关于如何修复导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
