为什么我无法控制 'list'
Why can't I gain control of 'list'
所以,设法按照我喜欢的方式对我的导航栏进行排序......但是现在我已经转移到它下面我想要的东西了。除了我无法在 'list' 元素上显示 'gain control' 之外……我做错了什么?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact"><a href="contact.html">CONTACT</a></li>
<li class="about"><a href="about.html">ABOUT</a>
<strong><li class="leagues"><a href="leagues.html">LEAGUES</a></li></strong>
<li class="home"><a href="index.html">HOME</a></li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li><a href="essex.html">Essex</a></li>
<li><a href="london.html">London</a></li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
这就是您在 css 中控制这些内容所需的全部内容。请参阅此处的 jsfiddle 示例
如果您想更加确定自己使用的是正确的,您也可以这样更改:
strong li a{
color: #000000;
text-decoration: none;
}
因为你用的不一样class
使用这个:
.navbar li {
css code
}
所以,设法按照我喜欢的方式对我的导航栏进行排序......但是现在我已经转移到它下面我想要的东西了。除了我无法在 'list' 元素上显示 'gain control' 之外……我做错了什么?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact"><a href="contact.html">CONTACT</a></li>
<li class="about"><a href="about.html">ABOUT</a>
<strong><li class="leagues"><a href="leagues.html">LEAGUES</a></li></strong>
<li class="home"><a href="index.html">HOME</a></li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li><a href="essex.html">Essex</a></li>
<li><a href="london.html">London</a></li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
这就是您在 css 中控制这些内容所需的全部内容。请参阅此处的 jsfiddle 示例
如果您想更加确定自己使用的是正确的,您也可以这样更改:
strong li a{
color: #000000;
text-decoration: none;
}
因为你用的不一样class
使用这个:
.navbar li {
css code
}