- Спойлер
- По сути меню это список, состоящий из ссылок, ведущих на другие странички. Все остальное - кнопочки, подсветки и прочее это просто фоновое оформление, рисунок.
Для того, чтобы рассказать, что именно эти слова являются списком, заключим его в теги, обозначающие список: в начале поставим <ul> а в конце </ul>.
Помним, что браузеру отступы и переносы на другую строчку безразличны, так что для удобства поставим их на отдельные строчки.
- Спойлер
-
<ul>
Меню:
Главная
О нас
Контакты
История
</ul>
Заключаем каждую в теги li в начале строчки <li> и в конце </li>. Слово «меню» не трогаем, это наименование и не будет вести ни на какую страничку. Список не обязательно должен иметь наименование.
<ul>
Меню:
<li>Главная</li>
<li>О нас</li>
<li>Контакты</li>
<li>История</li>
</ul>
Проверив в браузере мы увидели что меню стало списком. По умолчанию списки маркируются, мы это уберем. Сейчас мы расскажем, что все эти слова - это ссылки. Для этого используются тег <a> и </a> в конце. В них мы обернем само название пункта меню. А сама ссылка, которая куда-то должна вести, пишется внутри скобок после «а» и выглядит так href=«». Тут между кавычек указывается сам адрес странички, куда ведет ссылка, но мы пока не будем указывать, потому что браузеру все равно ведет ссылка куда-то или пуста, а унас пока других страничек нет.
<ul>
Меню:
<li><a href="">Главная</a></li>
<li><a href="">О нас</a></li>
<li><a href="">Контакты</a></li>
<li><a href="">История</a></li>
</ul>
Сохраняем и смотрим. Наши пункты меню теперь обрели подчеркивание и стали синими - это опять же оформление ссылок по умолчанию, мы это будем убирать. И на них теперь можно нажать, но опять же они никуда не ведут, ибо мы не давали еще адреса.
Итак, убираем маркеры и подчеркивания.
На маркеры есть list-style-type. Переводится как стиль маркировки списка. Там их на самом деле много, можно добавить маркеры кружочками, квадратиками, римскими цифрами, арабскими….
Тут можно глянуть http://htmlbook.ru/css/list-style-type
Так как мы хотим убрать, то напишем что list-style-type:none в стилях к списку, вот так
<ul style="list-style-type:none»>
Подчеркивания это text-decoration, также может иметь несколько значений, но мы опять напишем ему none.
Подробнее http://htmlbook.ru/css/text-decoration
Текст декорейшн с подчеркиванием по умолчанию это фишка тега <a>, то вписываем его внутрь в стилях.
<ul style="list-style-type:none">
Меню:
<li><a href="" style="text-decoration:none">Главная</a></li>
<li><a href="" style="text-decoration:none">О нас</a></li>
<li><a href="" style="text-decoration:none">Контакты</a></li>
<li><a href="" style="text-decoration:none">История</a></li>
</ul>
Теперь, чтобы нам оформить меню как кнопки, нам надо каждому пункту добавить рамочку и залить цветом. И задать еще высоту и ширину, потому что без указания высоты и ширины блок занимает места столько, сколько занимает текст.
Ширина это width, мы зададим 100 пикселей (px), высота это height, будет 30 пикселей.
Рамочка это border, тоже может оформляться и сплошной линией и пунктиром и точками, подробнее тут http://htmlbook.ru/css/border.
Поскольку рамочке можно разом задать несколько параметров, таких как толщина, стиль (точками, сплошной и тп) и цвет, то они пишутся подряд, разделяясь пробелами, вот так border:solid 1px green. Итак,
<li style="width: 100px; height:30px; border:solid 1px green"><a href="" style="text-decoration:none">Главная</a></li>
Так как стиль нам надо в каждой строчке вписать, то мы уже наглядно видим, что если продолжим в таком духе, то вообще не увидим скоро что там написано, все сплошь стили, стили, стили…….
Начинаем процесс организовывать и перенесем все стили в файл с разрешением css.
Открываем его блокнотом и начинаем. Вот у нас есть тег <li>, который по идее должен иметь один стиль для всех четырех пунктов.
так и записываем
li{ }
И между фигурными скобками через точку с запятой перечисляем стили. Можно в линию, но в столбик удобнее. В конце после последнего стиля элемента перед закрывающей скобкой добавляем точку с запятой, в хтмл это не обязательно, а тут да.
Итак в файле css имеем такую запись:
li{
width: 100px;
height:30px;
border:solid 1px green;
}
А также одинаковые стили для <a> вынесем в css
a{
test-decoration:none;
}
Заодно и с ul перенесем
ul{
list-style-type:none;
}
Записываем их в столбик друг под другом
А из файла с хтмл убираем стиль для li, а, ul и получаем такой опять вполне читаемый вид
<ul>
Меню:
<li><a href="">Главная</a></li>
<li><a href="">О нас</a></li>
<li><a href="">Контакты</a></li>
<li><a href="">История</a></li>
</ul>
css файлКод: Выделить всё
li{
width: 100px;
height:30px;
border:solid 1px green;
}
a{
text-decoration:none;
}
ul{
list-style-type:none;
}
Все сохраняем и смотрим в браузере результат. Теперь в том же браузере (вот я буду на примере хрома рассказывать, он вроде почти у всех) - итак в хроме на нашей страничке нажимаем посмотреть-разработчикам-инструмент разработчика. Внизу выскочит такое поле- Спойлер
Более того, если в этом окошке клацнуть слева вверху на окошечко со стрелкой- Спойлер
Теперь прежде чем продолжить придавать меню кнопочный вид наведем еще немного порядка.
У нас вверху два блока div с разными стилями. То есть мы не можем просто в файле со стилями записать div{} и перенести туда оформление, их надо классифицировать дополнительно. Чтобы классифицировать, мы вместо стиля к div впишем класс (class) и назовем его…..да как угодно, лишь бы латиницей. например class=«site_name» и class=«telefon». В файл со стилями название стиля переписывается также и перед ним ставится точка, обозначающая, что это класс а не что-то еще. Так-то мы можем класс и body назвать, и раздавать разные стили самому блоку body и любому блоку со стилем с таким названием. Просто в первом случае пишем без точки а во втором с точкой. Но так легко запутаться =) В стилях перед закрывающей скобкой не забываем ставить точку с запятой, это было не обязательно в хтмл но обязательно тут
В итоге имеем хтмл:
Код: Выделить всё
<body>
<div class="site_name"> Мой сайт </div>
<div class="telefon"> телефон 555-55-55 </div>
<ul>
Меню:
<li><a href="">Главная</a></li>
<li><a href="">О нас</a></li>
<li><a href="">Контакты</a></li>
<li><a href="">История</a></li>
</ul>
</body>
и со стилямиКод: Выделить всё
li{
width: 100px;
height:30px;
border:solid 1px green;
}
a{
text-decoration:none;
}
ul{
list-style-type:none;
}
.site_name{
font-size:20px;
background:blue;
color:yellow;
float:left;
width:50%;}
.telefon{
font-size:20px;
background:yellow;
color:blue;
text-align:right;
}
Теперь поговорим о цвете. Тут конечно большинство цветов обозначено словами, но все оттенки не передаст. Зато браузер поймет цвета в цифровом формате, точно так, как они используются в фотошопе и других графических редакторах. Пойдем на сайт адоба, там есть круг с цветовой палитрой https://color.adobe.com/ru/
Выбрав в круге цвет, мы видим внизу его значение в RGB и в HEX.
В RGB описывается так: rgb(255,255,255), или rgba(255,255,255) HEX описывается так #ffffff - в обоих случаях это белый.
Подробнее http://htmlbook.ru/css/value/color
Итак, раз у нас зеленая рамка, то я рылась в зеленых цветах. Нанесем градиент от светло-зеленого до зеленого потемнее. Резкий контраст делать не будем, а такой легкий переход даст визуально объем, хотя вот прям разница в цвете в глаза не бросится.
background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);
Что я тут понаписала? Я указала что это линейный градиент и в скобках указала что градиент идет к низу блока(to bottom) и на нулевой позиции имеем первый цвет, а на финише (100%) второй. Промежуточных значений можно много поставить, например, в середину (50 прцентов блока) влепить еще один цвет, да хоть тот же белый и тогда оно будет от светло-зеленому к белому а потом от белого к зеленому_потемнее или опять к светло-зеленому - если в конце поставить номер светло-зеленого. Если вместо bottom подставить top(к верху блока) или left( к левой границе блока) right (к правой) -то нулевой отметкой для градиенту будет соответственно низ или лево-право, а конец на противоположной стороне блока.
Там вообще много можно натворить с тем градиентом
http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient
А сам стиль с бекгроундом добавляем к li
Смотрим что получилось
Теперь добавим внутреннюю тень, на это есть box-shadow. Цвета для тени берем черный и белый, но опишем их в rgbа - в таком формате можно добавить прозрачность.Код: Выделить всё
box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset,
1px 1px 3px rgba(0,0,0,0.2);
Итак, что у нас тут. Тут описаны сразу две тени - белая внутренняя, то есть падает внутрь блока (inset - внутренняя) и внешняя черная(она никак не указывается, по умолчанию тень всегда внешняя). После трех цифр обозначающих цвет идет цифра, обозначающая прозрачность. 0.8 - это 80%, то есть плотный такой туманчик, а 0.2 - 20% чего-то там оттеняет немного. Можно зайти в отладчик и сменить значение на побольше чтобы разглядеть получше =)
Вообще то что мы добавили белую внутреннюю тень-в фотошопе это бы было названно "внутренним свечением", или "внутренней тенью" если использовать темный цвет. Но в общем-то логика там одинаковая- поверх другого объекта накладывается пятно потемнее или посветлее. Внутренняя-на себя же, внешняя-на другие объекты.
Со светлой тенью внутрь мы получаем небольшой блик, дающий еще чуть-чуть выпуклости; если сделать темную внутреннюю тень, то получим эффект, как будто кнопка вдавлена. Можно попробовать и заменить (255,255,255,0.8) на (0,0,0,0.8), только тогда внешнюю надо убрать, так как вдавленные объекты внешней тени в привычном мире не отбрасывают. И это все будет shadow.
Добавляем в стиль к li
Значения в пикселях - это смещение тени вбок и вниз (на то она и тень чтобы куда-то падать) и третье - размер самой тени. Чем больше размер тем более она размыта.
Ну и зададим небольшой радиус на уголках, чтобы были не острыми, а закругленными.
border-radius: 2px;
Также добавляем в стиль к li
Теперь еще сменим цвет рамочки, чтобы сильно не выбивалась на #80ab5d, подставим вместо green
Теперь сделаем чтобы они немного отступали друг от друга, отступы делаются двумя командами margin и padding, в чем там разница расскажу следующий раз, а сейчас просто впишем к li
margin:2px;
Разместим текст по центру командой, которую уже использовали раньше text-align только теперь значение выберем center
Тоже добавим к li
text-align:center;
Увеличим шрифт
font-size:18px;
Теперь поменяем цвет текста в меню и добавим тоже тени. Идем в блок а и даем белый цвет шрифту и зеленоватую тень.
color:white;
text-shadow: 0px -1px 1px #80ab5d;
Почитать про текст-шадоу можно тут http://htmlbook.ru/css/text-shadow
Итак, css у нас сейчас должно быть такимКод: Выделить всё
li{
width: 100px;
height:30px;
border:solid 1px #80ab5d;
background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);
box-shadow:
0px 1px 1px rgba(255,255,255,0.8) inset,
1px 1px 3px rgba(0,0,0,0.2);
border-radius: 4px;
margin:2px;
text-align:center;
font-size:18px;
}
a{
text-decoration:none;
color:white;
text-shadow: 0px -1px 1px #80ab5d;
}
ul{
list-style-type:none;
}
.site_name{
font-size:20px;
background:blue;
color:yellow;
float:left;
width:50%;
}
.telefon{
font-size:20px;
background:yellow;
color:blue;
text-align:right;
}
Смотрим результат- Спойлер
- Спойлер
- cybd писал(а):Простое домашнее задание:
Сделать горизонтальное меню, другими словами, кнопки меню расположить горизонтально.
Дополнительное задание 1:
* Напиши три любых слова: обычным, жирным, наклонным стилем. Используй HTML и CSS.
Дополнительное задание 2:
* Напиши эти слова подчеркнутым и зачеркнутым стилем
