-1
Я воссоздаю главную страницу Google для задания на TheOdinProject. Я почти закончен, но проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить гиперссылку быть видимой в контейнере нижнего колонтитула. Я попытался изменить цвет текста, и я проверил свойства в селекторе элементов списка, и я должен увидеть гиперссылку «О Google», но я не могу. Что я делаю не так?Невозможно увидеть текст гиперссылки в контейнере div
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="http://www.google.com">Home</a></li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Выполнить свой HTML через валидатор. Вы забыли закрыть свой первый неупорядоченный список, форму и кавычки в ссылке Google. – j08691