Багатосторінковий сайт
Створіть багатосторінковий сайт за зразком
Наповніть сайт контентом.
Зразки кодів файлів index.html та style.css
можна завантажити з цієї сторінки. Вони розміщені нижче.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Багатосторіновий сайт</title>
<link rel="stylesheet" type="text/css" href="style\style.css">
</head>
<body>
<header>
Заголовок сайту
</header>
<nav>
<ul>
<a href="index1.html">
<li>1</li>
</a>
<a href="index2.html">
<li>2</li>
</a>
<a href="index3.html">
<li>3</li>
</a>
<a href="index4.html">
<li>4</li>
</a>
</ul>
</nav>
<main>
</main>
<footer>©</footer>
</body>
</html>
style.css
header {background-color:grey;
width:96%;
height:100px;
text-align: center;
padding-top:30px;
margin: 5px auto;
font-size:16pt;
font-family: Arial;
color:white;
}
div {width:96%;
margin: 5px auto
}
nav {background-color:yellow;
text-align: center;
padding-top:10px;
height:80px;
width:96%;
margin: 5px auto;
//float:left; коментар
}
main {background-color:darkgrey;
text-align: center;
padding-top:30px;
height:300px;
width:96%;
margin: 5px auto;
}
footer {background-color:pink;
width:96%;
height:60px;
text-align: center;
padding-top:30px;
margin: 5px auto;
}
li{
border: 2px solid;
border-color:#cccccc;
font-size:20px;
text-align:center;
background-color:#afafaf;
height:28px;
width:20%;
padding-left:6px;
margin: 8px auto;
display:inline-block;
}
li:hover{ background-color:#efefef;}