Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Дом рационально-умный и душевный
Рассмотрим макет сайта. Шапка представляет собой три функциональных блока.
Создадим файл стилей для сайта. Приаатачим его к индексному файлу.
<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; } /* --------------- Хлебные крошки сайта ---------*/
Посмотреть на все это можно по следующей ссылке.
Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"
В следующем уроке приступим к оформлению правого основного меню. В нем будет реализована навигация по рубрикам сайта, находиться рекламный блок. Анонс последней опубликованной статьи, а также блок, выводящий самые читаемые статьи на ресурсе.
Просмотров: 3450
На прошлом уроке была сверстана шапка сайта. Блок «хлебных крошек». Оформление шаблона соответствует макету, а содержание тематике блога (сайта). Сегодня приступим к верстке правого бокового меню. В нем будет содержаться навигация по рубрикам сайта, размещен рекламный блок, анонс последней вышедшей статьи, а также блок с самыми читаемыми статьями на ресурсе.
На прошлом уроке был выбран макет будущего сайта, установлены необходимые инструменты. Сегодня приступим к конкретной реализации. Начнем верстать шаблон нашего сайта (блога).
РУБРИКИ САЙТА:
Здравствуйте друзья!
Приветствую Вас на моем канале, посвященному разработке прикладного программного обеспечению для программируемых логических контроллеров и панелей оператора.
В прошлом обзоре мы создали проект в ТИА портал версии 15.1, а также рассмотрели документацию на основе которой будет вестись разработка прикладного программного обеспечения для контроллера.