Шапка для сайта html код – Как правильно вынести header и footer во внешний файл в HTML шаблоне? — Хабр Q&A

Из PSD в HTML. Вёрстка шапки

Наша шапка состоит из двух блоков: блок с логотипом в левой части, и блок с контактами в правой части. Запишем в файле index.html код для шапки:

<div>
    <div>
        <div>

        </div>
        <div>

        </div>
    </div>
</div>

В блоке с классом <div></div> пропишем путь к изображению при помощи тега <img src="" alt="">. Так как логотипы в шапке обычно являются ссылками, ведущими на главную страницу, то этот тег мы заключим между тегами <a href=""></a>:

<div>
    <a href=""><img src="img/logo.png" alt=""></a>
</div>

В блоке с классом <div></div> запишем контактную информацию, каждую строку поместим в тег <p></p>:

<div>
    <p>Телефон: 8 800 2000 01 01<br>звонок бесплатный</p>
    <p>E-mail: [email protected]</p>
    <p>
        <a href=""><img src="img/vk.png" alt=""></a>
        <a href=""><img src="img/fb.png" alt=""></a>
        <a href=""><img src="img/tw.png" alt=""></a>
        <a href=""><img src="img/gp.png" alt=""></a>
    </p>
</div>

Запись звонок бесплатный на макете находится на новой строке, поэтому перед ней мы поставили тег <br>. Иконки социальных сетей являются ссылками, поэтому их мы добавили между тегами <a href=""></a>.

Переходим к стилям. Первым делом нам нужно указать высоту и фоновое изображение для селектора #header:

#header {
    height: 148px;
    background: white url("img/bg-header.jpg") left top no-repeat;
}

Для блока с логотипом укажем следующие свойства:

.logo {
    margin-top: 51px;
    float: left;
}

Для блока с контактами:

.contacts {
    float: right;
    text-align: right;
    margin-top: 25px;
}

Эти свойства должны применяться только для тех блоков, которые лежат именно в шапке, т.е. в блоке <div></div>, поэтому здесь мы добавим перед стилями (.logo и .contacts) контекстные селекторы:

#header .logo {
    margin-top: 51px;
    float: left;
}

#header .contacts {
    margin-top: 25px;
    float: right;
    text-align: right;
}

Для абзацев в блоке с контактами запишем следующие свойства:

#header .contacts p {
    font: bold 18px/14px Arial;
    color: black;
}

Теперь нам нужно добавить дополнительные классы для выделенных слов: Телефон, E-mail, а также звонок бесплатный. В шаблоне index.html запишите:

<p><span>Телефон:</span> 8 800 2000 01 01<br><span>звонок бесплатный</span></p>
<p><span>E-mail:</span> [email protected]</p>

В стилях запишем отдельно для селекторов .green и .gray цвета:

.green {
    color: #1d8b15;
}

.gray {
    color: #666;
}

И для отдельно взятых элементов в шапке запишем размер и начертание шрифта:

#header .contacts p .green {
    font-size: 14px;
    font-weight: normal;
}

#header .contacts p .gray {
    font-size: 12px;
    font-weight: normal;
}

С шапкой разобрались. Переходим к горизонтальному меню.


Видео к уроку

Как изменить шапку сайта (часть 1)

Как изменить шапку сайта (часть 1)

На фриланс-биржах, заказчики часто просят, изменить дизайн какого-нибудь фрагмента сайта, например шапки. Самый простой способ изменить шапку сайта, так это создать её с нуля. Почему я так считаю? Пожалуйста, будут и аргументы.

Когда я открываю исходный код чужого сайта, то за редким исключением, вижу неструктурированный HTML код, непоследовательно написанный CSS и почти нет комментариев. Ориентироваться в таком хаосе, очень сложно и я понимаю, что мне быстрее сделать все заново.

Такой бардак происходит на сайтах, сделанных непрофессионально, поэтому и обращается заказчик с такими шедеврами к фрилансерам. Грамотно сделанные сайты, редко переделывают, потому вероятность наткнуться на плохо сделанный сайт, очень высока.

Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.

Так выглядела шапка до изменений:


Как изменить шапку сайта (часть 1).

У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.

Что бы я изменил в дизайне?

  1. Шрифт и цвет у логотипа
  2. Размер и цвет остального шрифта
  3. Убрать зеленую полосу
  4. Блок с контактами разместить на верхней панели

После изменений:


Как изменить шапку сайта (часть 1).

Между тегами head в HTML файле:

//прописываем мета тег для адаптивности
<meta name="viewport" content="width=device-width, initial-scale=1">
//подключаем другие шрифты
<link href="https://fonts.googleapis.com/css?family=Forum|Roboto+Slab:400,700" rel="stylesheet">
//подключаем библиотеку Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
//подключаем внешний файл стилей, сюда будем писать стили
<link rel="stylesheet" href="style.css">
//скачиваем и подключаем файл нормализации стилей
<link rel="stylesheet" href="normalize.css">

Делать верстку мы будем на flexbox.

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.

<div>
  <p>Массажный салон для вашего здоровья и красоты</p>
  <p><span>Tel.</span> (+372) 5514704, 58079045</p>
  <p><span>Инфо и запись:</span> ежедневно с 9:00 до 21:00</p>
</div>

CSS стили

/* Общие стили для шапки */
body {
  font-family: 'Forum', cursive;
  color: #777;
  background-color: #fff;
}

Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  font-size: 100%;
  border-bottom: 1px solid #efd0d0;
  position: relative;
}

Выделим некоторые слова зеленым цветом.

/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
  color: #b2db41;
  font-weight: bold;
}

Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.

Как изменить шапку сайта (часть 1).

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.

<header>
  <div>
    <a href="#">Massaaži<span>Maailm</span></a>
  </div> ...

CSS код

/* Флекс контейнер для шапки */
header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  border-bottom: 5px solid #b2db41;
}

/* Стили для всех ссылок внутри флекс контейнера */
header a {
  display: block;
  color: #212121;
  padding: 12px;
  text-decoration: none; /* убирает подчеркивание */
  font-size: 100%;
  text-shadow: 0 1px 0 #fff;
  border-radius: 4px;

}

Здесь мы указываем относительную ширину блока под логотип, значит остальные 70%, будет занимать навигация. Задавая проценты, можно точнее распределять детей-элементов в контейнере-родителе.

/* Ширина дочернего блока под логотип */
.wrap-logo {
  width: 30%;
}

Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.

/* Стилизация логотипа */
.wrap-logo #logo {
  font-family: 'Roboto Slab', serif;
  font-size: 200%;
  font-weight: bold;
}

Логотип смотрится свежее, если его сделать двухцветным.

/* Зеленый цвет у части логотипа */
.wrap-logo span {
  color: #b2db41;
}

Продолжение следует.

  • Как изменить шапку сайта (часть 1). Создано 08.04.2019 10:20:30
  • Как изменить шапку сайта (часть 1).
    Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Анимированная шапка для сайта

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем экспериментировать с анимацией.

Вот некоторые идеи, для создания шапки сайта.

Можно использовать так как есть, а можно взять только некоторые действия и применить в разработке своего варианта оформления шапки или рекламного баннера.

Выплывающие заголовок и описание сайта.

Описание сайта Описание сайта
Описание сайта Описание сайта
Описание сайта Описание сайта

Код 1: Чтобы посмотреть работу этой анимации ещё раз — обновите страницу.

 

Астра

Код 2:

 

Звездопад

Название сайта

Код 3:

Смена дня и ночи

Код 4:

код 1

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/* Шапка сайта */
.main-header {
/* Задаём относительное позиционирование */
position: relative;
/* Размер шапки сайта */
width: 100%;
height: 250px;
overflow: hidden;
/* Фон шапкм сайта */
background: steelblue;
/* Подключаем анимацию */
animation: main-hed 15s linear;
}
/* Название сайта */
.main-title{
/* Позиционируем абсолютно, относительно блока main-header */
position: absolute;
left: -2em;
right: -2em;
top: 30%;
/* Оформляем шрифт */
color: #fff;
font-family: Monotype Corsiva;
letter-spacing: 0.3em;
text-align: center;
text-transform: uppercase;
/* Подключаем анимацию */
animation: main-titl 15s linear;
}
/**/
.main-description{
/* Позиционируем абсолютно, относительно блока main-header */
position: absolute;
right: -2em;
left: -2em;
top: 50%;
/* Оформляем шрифт */
color: #fff;
font-family: Georgia;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
font-style: italic;
/* Подключаем анимацию */
animation: main-descript 15s linear;
}

/* Анимация фона шапки сайта */
@keyframes main-hed {
0% {
/* Начальный цвет */
background: #28014D;
}
/* Конечный цвет */
100% {
background: steelblue;
}
}

/* Анимация названия сайта */
@keyframes main-titl{
0% {
/* Полная прозрачность */
opacity: 0;
/* Масштабируется по вертикали и горизрнтали с нуля */
transform: scale(0);
}
100% {
/* Полная непрозрачность */
opacity: 1;
/* Конечный масштаб 1 х 1 */
transform: scale(1);
}
}

/* Анимация описания сайта */
@keyframes main-descript {
0% {
/* Начало анимации в точке внизу шапки сайта */
transform: translateY(6em);
/* Полная прозрачность */
opacity: 0;
}
/* Возрастание непрозрачности */
50% {
opacity: 0.1;
}
75% {
opacity: 0.3;
}
100% {
/* Завершение анимации в точке позиционирования */
transform: translateY(0);
/* Полная непрозрачность */
opacity: 1;
}
}
</style>
</head>
<body>
<div>
<h2>Название сайта</h2>
<p>Описание сайта Описание сайта
Описание сайта Описание сайта
Описание сайта Описание сайта</p>
</div>
</body>
</html>

В этом примере обратите внимание на то, что анимация описания сайта начинается за пределами блока main-header.

По такому же принципу можно сделать выплывающим любой блок — картинку, меню и т.д.

Код 2

Идею этой анимации я нашёл на сайте css.yoksel.ru. Вот уж кладезь экспериментов с CSS.

CSS

.man-header {
margin: 0;
overflow: hidden;
/* Цвет фона в формате hsl, радиальный градиент */
background: radial-gradient(white 80px, hsl(30, 100%, 60%) 50em);
position: relative;
height: 200px;
width: 600px;
}
/* Позиционируем эффект по центру*/
.astra {
position: absolute;
left: 50%;
top: 50%;
/* Убираем маркеры списка */
list-style: none;
/* Подключаем анимацию вращения */
animation: 30s rotate infinite linear;
}
/* Границы с тенью при помощи псевдоэлементов */
.luh,
.luh:before,
.luh:after {
position: absolute;
border: 0 solid transparent;
border-width: 2em 20em;
width: 0px;
height: 0px;
box-shadow: 0 0 2em .5em white;
}
/* Разбег лучей */
.luh {
left: -20em;
top: 50%;
margin-top: -2em;
transform: rotate(.3deg);
}
/* Длина лучей зависит от позиции*/
.luh:before,
.luh:after {
left: -20em;
top: -2em;
display: block;
content: "";
}

.luh:before {
transform: rotate(60deg);
}
.luh:after {
transform: rotate(-60deg);
}
/* Добавляем смещение для каждой группы лучей с помощью псевдокласса */
.luh:nth-child(2){
transform: rotate(15deg);
}
.luh:nth-child(3){
transform: rotate(30deg);
}
.luh:nth-child(4){
transform: rotate(45deg);
}

@keyframes rotate {
100% {
transform: rotate(90deg);
}
}

.name {
z-index: 1;
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: bold 40px 'Monotype Corsiva';
color: hsl(70, 100%, 70%);
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px #EE8A08,
-2px -2px #EE8A08,
-1px 1px #EE8A08,
-2px 2px #EE8A08,
1px 1px #EE8A08,
2px 2px #EE8A08,
1px -1px #EE8A08,
2px -2px #EE8A08,
}

HTML

<div>
<p>Название сайта</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Код 3

Код очень простой, поэтому я не стал перегружать его комментариями. Если что кому-то не понятно спросите к комментах.
CSS

.space {
width: 600px;
height: 200px;
/* Фон - размноженная картинка */
background-image: url(images/129a.jpg);
position: relative;
}
/* Мигающие и падающие звёзды */
.stars1,
.stars2,
.stars3,
.stars4,
.stars5,
.stars6,
.stars7,
.stars8,
.stars9,
.stars10 {
position: absolute;
border-radius: 50%/50%;
background-image: -webkit-radial-gradient(white, black);
width: 3px;
height: 3px;
}
/* Позиционируем звёзды по верху блока */
.stars1 {
top: 8%;
left: 3%;
/* Подключаем анимации с разным временем срабатывания */
animation: stars1 4s 3s linear infinite;
}
.stars2 {
top: 3%;
left: 10%;
animation: stars2 2s linear infinite;
}
.stars3 {
top: 15%;
left: 25%;
animation: stars3 5s 1s linear infinite;
}
.stars4 {
top: 12%;
left: 35%;
animation: stars4 6s 2s linear infinite;
}
.stars5 {
top: 23%;
left: 47%;
animation: stars5 2.5s 1s linear infinite;
}
.stars6 {
top: 11%;
left: 60%;
animation: stars6 7s linear infinite;
}
.stars7 {
top: 20%;
left: 70%;
animation: stars7 2s 1s linear infinite;
}
.stars8 {
top: 12%;
left: 80%;
animation: stars8 4s linear infinite;
}
.stars9 {
top: 30%;
left: 90%;
animation: stars9 3s 2s linear infinite;
}
.stars10 {
top: 7%;
left: 98%;
animation: stars10 6s linear infinite;
}

.name {
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: 30px Impact;
color: hsl(240, 20%, 15%);
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px hsl(50, 50%, 50%),
-2px -2px hsl(50, 50%, 50%),
-1px 1px hsl(50, 50%, 50%),
-2px 2px hsl(50, 50%, 50%),
1px 1px hsl(50, 50%, 50%),
2px 2px hsl(50, 50%, 50%),
1px -1px hsl(50, 50%, 50%),
2px -2px hsl(50, 50%, 50%);
}

/* Мигающие */

@keyframes stars2 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars5 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars7 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars9 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}

/* Падающие */

@keyframes stars1 {
0% {
width: 1px;
}
7% {
width: 6px;
opacity: 1;
transform: translate(150px, 150px);
}
8% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars3 {
0% {
width: 3px;
}
12% {
width: 10px;
opacity: 1;
transform: translate(-200px, 200px);
}
13% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars4 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(200px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars6 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-400px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars8 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-300px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars10 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-600px, 200px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}

HTML

<div>
<p>Название сайта</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Код 4

CSS

.panorama{
width: 900px;
height: 300px;
left: 0;
top: 0;
overflow: hidden;
background: #4FC3F7;
position: relative;
animation: main-layout 40s linear infinite;
}
.ground { /* Полоска земли */
display: block;
position: absolute;
width: 100vw;
height: 40px;
left: 0;
bottom: 0;
background: #F4511E;
z-index: 10;
}
.sun { /* Солнышко */
position: absolute;
width: 150px;
height: 150px;
top: 250px;
left: 750px;
background: #FFF;
border-radius: 50%;
z-index: 1;
animation: main-sun 40s linear infinite;
}
.selen{ /* Луна */
position: absolute;
top: 0;
left: 800px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
animation: main-selen 40s linear infinite;
}
.selen::before { /* Затемнение для плумесяца */
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #030104;
}
.safari,
.africa,
.egipet { /* Слова на пирамидах */
font-family: Impact;
position: absolute;
color: #fff;
transform: rotate(40deg);
z-index: 5;
text-shadow: 1px 1px #050505,
2px 2px #050505,
3px 3px #050505,
4px 4px #050505;
}
.safari{
top: 150px;
left: 310px;
font-size: 35px;
letter-spacing: 0.4em;
z-index: 5;
}
.africa {
top: 190px;
left: 630px;
font-size: 30px;
letter-spacing: 0.3em;
z-index: 5;
}
.egipet {
top: 205px;
left: 105px;
font-size: 22px;
letter-spacing: 0.3em;
z-index: 5;
}
.shadow { /* Тени пирамид */
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 8%;
left: -50%;
background: #333;
transform: rotate(30deg);
}
.pyramid { /* Блоки пирамид */
display: block;
position: absolute;
width: 950px;
height: 300px;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0px);
z-index: 2;
}
.pr1,
.pr2,
.pr3 { /* Грани пирамид */
display: block;
position: absolute;
background: #F4511E;
overflow: hidden;
transform: rotate(45deg) translate(50%, 50%);
}
.pr1 {
width: 500px;
height: 500px;
bottom: 30px;
left: 20%;
z-index: 2;
}
.pr2 {
width: 400px;
height: 400px;
bottom: 0px;
right: 20px;
z-index: 3;
}
.pr3 {
width: 300px;
height: 300px;
bottom: 0;
left: 30px;
z-index: 4;
}
/* Анимации */
@keyframes main-sun{
0% {
transform: translateY(-10px);
background: #FF5F00;
}
25%{
transform: translateY(-260px);
background: #fff;
width:80px;
height:80px;
}
35%{
transform: translateY(-260px);
}
40% {
background: #fff;
}
60%{
transform: translateY(10px);
width:150px;
height:150px;
background: #FF5F00;
}
}
@keyframes main-layout{
0% {
background: #333333;
}
10%{
background: #4FC3F7;
}
40%{
background: #4FC3F7;
}
50% {
background: #333333;
}
55% {
background-image: url(images/129a.jpg);
}
100% {
background-image: url(images/129a.jpg);
}
}
@keyframes main-selen {
0% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

HTML

<div>
<div>Safari</div>
<div>Africa</div>
<div>Egypt</div>
<div></div>
<div></div>
<div></div>
<div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>
<div></div>
</div>

О том как сделать смену фоновых изображений в шапке сайта, читайте в следующей статье: Слайдер CSS.

Желаю творческих успехов.

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Урок по html верстке - кликабельный логотип с помощью слоя (div)

Сегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости.

Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип сайта. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже в чью-либо верстку — тему для wordpress, например.

Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:

Далее требуется добавить в HTML код новый слой. Находим в шаблоне место, где выводится изображение в шапке и размещаем там еще один элемент DIV. Получим что-то вроде следующей конструкции:

<div>
 <div>
  <a href="ссылка_на_главную">
   <img src="images/logo1.jpg" />
  </a>
 </div>
</div>

<div> <div> <a href="ссылка_на_главную"> <img src="images/logo1.jpg" /> </a> </div> </div>

В файле стилей CSS пишем:

.logo1 {
 position: absolute;
 margin: 65px 0 0 282px;
 z-index: 100;
}

.logo1 { position: absolute; margin: 65px 0 0 282px; z-index: 100; }

Здесь свойство position: absolute означает, что позиционирование будет происходить от левого верхнего угла страницы, а в данном примере — элемента <div id=»header»>. В принципе, для слоя доступны свойства горизонтального и вертикального позиционирования — left и top, которые задают отступы от левого и верхнего краев соответственно. Тем не менее, я встречал также использование обычного отступа margin.

Свойство z-index задает порядок перекрытия слоями друг друга при наложении. Блок DIV с более высоким индексом будет располагаться выше чем тот, у кого значение ниже. Оно также используется для создания кликабельной подложка для фона.

Часто в шаблонах wordpress или любых других определяются отступы или рамки для всех изображений на сайте, поэтому может понадобиться обнуление этих значений:

.logo1 img {
	border: none;		
	margin: 0px;		
}
 
.logo1 a img {
	border: none;		
	margin: 0px;			
}

.logo1 img { border: none; margin: 0px; } .logo1 a img { border: none; margin: 0px; }

Если есть какие-то замечания или советы — с радостью выслушаю в комментариях.

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

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