|
Войти или
Зарегистрироваться
|
Главная Файлы Видеоматериалы Форум |
Статья опубликована: 2017-03-03/11:01:57-adminЧасть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР.Часть I. Верстка шаблона сайта на основе макета фотошопа.Статья №3. Верстка шапки сайта. Блок ХИДЕР.
Рассмотрим макет сайта. Шапка представляет собой три функциональных блока.
Создадим файл стилей для сайта. Приаатачим его к индексному файлу.
<link rel="stylesheet" type="text/css" href="style/style.css"/>
Подключение данного файла стилей происходит ниже по коду, чем дефолтный файл CSS. Блок ХИДЕР, содержащий название сайта, а также форму поиска по сайту будет иметь следующее содержание:
<header> <div class="header-block"> <div class="search"> <form action="#" method="post"> <input class="search-image" type="image" src="images/find.jpg" alt="Поиск по сайту" title="Поиск по сайту"> <input class="search-text" type="text" placeholder="Поиск..." title="Введите поисковую фразу"> </form> </div> <div class="slogan"> <p class="slogan-name"><a href="#" title="https://druid.su">~<span style="color: #ae4b5d;">Д</span>РУиД~</a></p> <p class="slogan-text">Дом рационально-умный и душевный</p> </div> </div> </header>
Классы для элементов имеют смысловые названия. Также названия классов вложенных элементов имеют в своем названии имя родительского компонента. Тем самым создается уникальность имен всех используемых классов в проекте. К тому же, пусть названия и получаются длинными, но в них можно проследить степень вложенности элемента. Пример:
<div class="slogan"> <p class="slogan-name"><a href="#" title="https://druid.su">~<span style="color: #ae4b5d;">Д</span>РУиД~</a></p> <p class="slogan-text">Дом рационально-умный и душевный</p>
Контейнер ДИВ с классом «slogan» является родителем обзацев ПЭ. У обзацев ПЭ имена классов содержат имя родителя: «slogan-name». То есть элемент класса «slogan-name» является дочерним класса «slogan» и отвечает за название слогана. А элемент класса «slogan-text» является также дочерним класса «slogan» и отвечает за речевку слогана. В файле стилей будет проще идентифицировать объект.
Файл стилей имеет следующее содержание:
/* --------------- Шапка сайта ---------*/
header {
background-color: #31333b;
}
.header-block{
height: 100%;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.search{
height: 100%;
float: right;
}
.search-text[type="text"] {
background-color:#24272d;
border: 1px solid #875f66;
color:#5b636e;
padding-left: 5px;
margin-top: 21px;
}
.search-text:focus{
border: 1px solid #fff;
}
.search-image {
float: right;
margin-top: 12px;
}
.slogan {
height: 100%;
float: none;
}
.slogan-name {
padding-top: 5px;
font-weight: bold;
font-size: 150%;
}
.slogan-name a {
text-decoration: none;
color: #a5adb8;
}
.slogan-text {
padding-top: 5px;
color: #656f7a;
padding-bottom: 5px;
}
/* --------------- /Шапка сайта ---------*/
Расписывать каждую строчку не стоит. В написании кода не используются какие-либо диковинные элементы или нестандартные методы стилистики.
Далее приведу весь код индексного файла касающегося блока ХИДЕР:
<header> <div class="header-block"> <div class="search"> <form action="#" method="post"> <input class="search-image" type="image" src="images/find.jpg" alt="Поиск по сайту" title="Поиск по сайту"> <input class="search-text" type="text" placeholder="Поиск..." title="Введите поисковую фразу"> </form> </div> <div class="slogan"> <p class="slogan-name"><a href="#" title="https://druid.su">~<span style="color: #ae4b5d;">Д</span>РУиД~</a></p> <p class="slogan-text">Дом рационально-умный и душевный</p> </div> </div> </header> <div class="main-slogan"> <div class="main-slogan-name"><span>ДРУиД - Дом Рационально-Умный и Душевный</span></div> <div class="main-slogan-text"> <span>Строительство частного "Умного" дома своими руками</span> <br/> <span>Изучение МК STM32</span><br/> <span>Материалы по сайтостроению</span><br/> <span>Изготовление девайсов для быта и не только</span></div> </div> <menu> <nav> <ul class="navigation-nav-ul-left"> <li class="navigation-nav-ul-li-left"><a href="#" title="Главная" class="navigation-nav-ul-li-left-a">Главная</a></li> <li class="navigation-nav-ul-li-left"><a href="#" title="Файлы" class="navigation-nav-ul-li-left-a">Файлы</a></li> <li class="navigation-nav-ul-li-left"><a href="#" title="Видеоматериалы" class="navigation-nav-ul-li-left-a">Видеоматериалы</a></li> <li class="navigation-nav-ul-li-left"><a href="#" title="Форум" class="navigation-nav-ul-li-left-a">Форум</a></li> <li class="navigation-nav-ul-li-left"><a href="#" title="Карта сайта" class="navigation-nav-ul-li-left-a">Карта сайта</a></li> </ul> <ul class="navigation-nav-ul-right"> <li class="navigation-nav-ul-li-right"><a href="#" class="navigation-nav-ul-li-right-a" title="Войти">Войти</a></li> <div class="navigation-nav-ul-right-div">или</div> <li class="navigation-nav-ul-li-right"><a href="#" class="navigation-nav-ul-li-right-a" title="Зарегистироваться">Зарегистироваться</a></li> </ul> </nav> </menu> <div class="bread"> <nav class="bread-nav"> <ul> <li class="bread-nav-ul-li"><a href="#" class="bread-nav-ul-li-a" title="Главная">Главная</a> /</li> <li class="bread-nav-ul-li"><a href="#" class="bread-nav-ul-li-a" title="Рубрика №1">Рубрика №1</a> /</li> <li class="bread-nav-ul-li" title="Статья №1">Статья №1</li> </ul> </nav> </div>
А также код файла стилей:
/* --------------- Шапка сайта ---------*/
header {
background-color: #31333b;
}
.header-block{
height: 100%;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.search{
float: right;
}
.search-text[type="text"] {
background-color:#24272d;
border: 1px solid #875f66;
color:#5b636e;
padding-left: 5px;
margin-top: 21px;
}
.search-text:focus{
border: 1px solid #fff;
}
.search-image {
float: right;
margin-top: 12px;
}
.slogan {
height: 100%;
float: none;
}
.slogan-name {
padding-top: 5px;
font-weight: bold;
font-size: 150%;
}
.slogan-name a {
text-decoration: none;
color: #a5adb8;
}
.slogan-text {
padding-top: 5px;
color: #656f7a;
padding-bottom: 5px;
}
/* --------------- /Шапка сайта ---------*/
/* --------------- Центральный кейс сайта ---------*/
.main-slogan {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-image: url(../images/main.jpg);
}
.main-slogan-name {
margin-left: 40px;
padding-left: 5px;
font-weight: bold;
font-size: 120%;
color: #fff;
padding-top: 110px;
}
.main-slogan-name span {
padding: 0 5px 0 5px;
background-color: rgba(0, 0, 255, 0.7);
}
.main-slogan-text {
margin-left: 40px;
margin-top: 15px;
color: #000;
padding-bottom: 15px;
}
.main-slogan-text span {
padding: 0 5px 0 5px;
background-color: rgba(255, 255, 255, 0.8);
}
/* --------------- /Центральный кейс сайта ---------*/
/* --------------- Горизонтальная навигация сайта ---------*/
menu {
background-color:#95161f;
height: 40px;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.navigation-nav-ul-left {
float: left;
padding-top: 8px;
}
.navigation-nav-ul-li-left {
float: left;
padding-left: 25px;
}
.navigation-nav-ul-li-left-a:hover {
border-bottom: 2px solid #fff;
text-decoration: none;
color: #fff;
}
.navigation-nav-ul-li-left-a {
color: #fff;
text-decoration: none;
font-size: 120%;
}
.navigation-nav-ul-right {
float: right;
padding-top: 11px;
font-size: 89%;
}
.navigation-nav-ul-li-right {
float: left;
padding-right: 15px;
}
.navigation-nav-ul-right-div{
float: left;
padding-right: 15px;
color: #000;
}
.navigation-nav-ul-li-right-a:hover {
color: #fff;
text-decoration: none;
}
.navigation-nav-ul-li-right-a {
color: #fff;
text-decoration: underline;
}
/* --------------- /Горизонтальная навигация сайта ---------*/
/* --------------- Хлебные крошки сайта ---------*/
.bread {
height: 25px;
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #e3e3e3;
}
.bread-nav {
padding-top: 3px;
padding-left: 30px;
}
.bread-nav-ul-li {
float:left;
padding-right: 2px;
font-size: 82%;
}
.bread-nav-ul-li-a:hover {
color: #95161f;
text-decoration: underline;
}
.bread-nav-ul-li-a {
color: #95161f;
text-decoration: none;
}
/* --------------- Хлебные крошки сайта ---------*/
Посмотреть на все это можно по следующей ссылке.
Видео данного урока представлено ниже.
Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"
Заключение.
В следующем уроке приступим к оформлению правого основного меню. В нем будет реализована навигация по рубрикам сайта, находиться рекламный блок. Анонс последней опубликованной статьи, а также блок, выводящий самые читаемые статьи на ресурсе.
Просмотров: 1020 Комментарии: (0) Оставить комментарий Рекомендованные статьи:На прошлом уроке была сверстана шапка сайта. Блок «хлебных крошек». Оформление шаблона соответствует макету, а содержание тематике блога (сайта). Сегодня приступим к верстке правого бокового меню. В нем будет содержаться навигация по рубрикам сайта, размещен рекламный блок, анонс последней вышедшей статьи, а также блок с самыми читаемыми статьями на ресурсе. На прошлом уроке был выбран макет будущего сайта, установлены необходимые инструменты. Сегодня приступим к конкретной реализации. Начнем верстать шаблон нашего сайта (блога). |
РУБРИКИ:
Часть I. Статья №6. Верстка подвала – блока футтерНа прошлом уроке мы сверстали основной блок контент. Оформили статьи, которые отображаются на главной странице. Оформили их стилями, не входящими в макет сайта, но вписывающимися в общий дизайн сайта. На сегодняшнем уроке мы оформим подвал сайта. В данный блок войдут ссылки на стандартные страницы любого сайта, а также копирайт. Читать далее »
Самое читаемое:
STM32. Уроки по программированию STM32F4. Урок № 0. Вводный. Описание. Установка IDE. STM32. Уроки по программированию STM32F4. Урок № 5. Работа с АЦП+DMA + фильтр скользящее среднее. STM32. Уроки по программированию STM32F4. Урок № 1. Система тактирования STM32F4. STM32. Уроки по программированию STM32F4. Урок № 6. Работа с таймерами TIM7 и TIM1. STM32. Уроки по программированию STM32F4. Урок № 4. Программный многозадачный таймер STM32F4. 
|
| Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный |
|
|
|
