Вход на сайт
Веб дизайн
810 просмотров
Перейти к просмотру всей ветки
в ответ uscheswoi_82 11.09.23 07:36, Последний раз изменено 12.09.23 05:03 (uscheswoi_82)
Теперь давайте забудим на время что писали выше, и сделаем меню. Вот HTML-код меню:
<nav>
<ul class="menu">
<li><a class="active" href="#">Главная страница</a></li>
<li><a href="#">Продукты</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
Получиться что-то типа такого:
Теперь нужно отформатировать CSS.
Вот полный код index.html:
<!DOCTYPE html>
<html>
<head>
<style>
* { padding:0; margin:0; }
.clearfix:after { content: ""; clear:both; display:table; }
.left { float:left; padding:3px 3px; }
.right { float:right; padding:3px 3px; }
#header { min-height:150px; }
#footer { min-height:150px; }
#content {}
#container { margin-left:auto;
margin-right:auto;
margin-top:80px;
margin-bottom:150px;
height:700px;
width:80%;
border:1px solid #000;
}
.menu { background-color:#000;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.menu li { float:left; }
li a { display:block;
color:#fff;
text-align: center;
padding:12px 12px;
text-decoration:none;
}
li a:hover { color:#fff;
background-color:#999;
}
li .active { color:#fff;
background-color:#777;
}
</style>
<title>Заголовок сайта</title>
</head>
<body>
<div id="container">
<header id="header"></header>
<nav>
<ul class="menu">
<li><a class="active" href="#">Главная страница</a></li>
<li><a href="#">Продукты</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<div id="content">
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
Вот результат:
Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение