CSS3 шапка сайта

CSS3 шапка

CSS код красивой и простой шапки сайта с навигацией.

Код HTML

<header>
		<div id="contact_us">
			<div class="width_limiter">
				Звоните нам: <span id="tel_number">+7 (953) 343-42-24</span>
			</div>
		</div>
        
		<div id="high_banner">
			<div class="width_limiter">
				<img src="img/logo_1_stroke_2.png">
			</div>
		</div>
        
		<nav class="menu">
			<ul>
				<li><a href="index.php">Главная</a></li>
				<li><a href="calculator.php">Калькулятор</a></li>
				<li><a href="modeling.php">3Д-моделирование</a></li>
				<li><a href="faq.php">Частые вопросы</a></li>
				<li><a href="payment_and_delivery.php">Оплата и доставка</a></li>
				<li id="last_item"><a href="contacts.php">Контакты</a></li>
			</ul>
		</nav>
</header>

Код CSS

#contact_us
{
	padding: 10px;
	background-color:#262525;
	color:#CCCCCC;
	font-size: 1.1em;
}

#contact_us #tel_number
{
	color: #EEEEEE;
	font-weight:700;
}

div#high_banner
{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	background-image:url(../img/background_header.png);
	background-size: 100%;
}

div#high_banner img
{
	max-width: 25%;
	max-height: 100px;
}



nav.menu
{
	margin-bottom: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color:#454545;
	display: table;
	width: 100%;
	-webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
     box-shadow: 0 10px 6px -6px #777;
}

nav.menu ul
{
	width: 100%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

nav.menu ul #last_item
{
	border-right: 0px;
}


nav.menu ul li
{
	width: 20%;
	border-right: 1px solid #707070;
	display: inline;
	vertical-align: baseline;
}


nav.menu ul li a
{
	color: #FFFFFF;
	font-style: normal;
	text-decoration: none;
	vertical-align:baseline;
	text-align:center;
	margin-left: 2%;
	margin-right: 2%;
	font-size:1.1em;
	font-weight:600;
}

nav.menu ul li a:hover
{
	color:#110505;
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *