Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Дом рационально-умный и душевный
Продолжим оформлять внешний вид сайта. Шапка сайта с прошлого урока уже выглядит в соответствии с тем дизайном сайта, который был выбран. Перейдем к основным блокам сайта: контент и боковое меню.
Начнем с него. В боковом меню будет несколько блоков: ссылки на рубрики сайта, реклама на сайте, самое читаемое в данный момент.
Для этого создадим три контейнера div с id=”menu”, а также объединим эти три контейнера в один общий с id=”main_menu”. И каждым блокам укажем свои стили. HTML код полученного безобразия подхода.
<div id="main_menu"> <div id="menu"> РУБРИКИ: </br> Ссылки </div> <div id="menu"> Реклама на сайте </div> <div id="menu"> Самое читаемое: </div> </div>
А это таблица стилей для данной реализации:
#main_menu{ width: 28.5%; margin-left: 1.5%; float: right; padding: 5px; } #menu{ background: #FFF; padding: 5px; border-radius: 8px; margin-bottom: 5px; }
Вот что из этого вышло.
Теперь заполним блок РУБРИКИ. Здесь будут отображаться ссылки на рубрики сайта.
Для шаблона создадим 3 пустые ссылки и оформим их в соответствии с выбранным дизайном.
<div id="menu"> <div style="text-align: center; font-size: 120%;"><b>РУБРИКИ:</b></div> </br> <div id = "menu_a"><a href="#">Ссылка 1</a></div> <div id = "menu_a"><a href="#">Ссылка 2</a></div> <div id = "menu_a"><a href="#">Ссылка 3</a></div> </div>
Таблица стилей:
#menu_a{ background-image: url(../images/arrow.gif); background-repeat: no-repeat; background-position: left; padding: 0 0 0 20px; margin-bottom: 5px; border-bottom: 2px solid #E7EBED; } #menu_a a{ text-decoration: none; }
Получилось вот так:
Как видно наш подвал немного не на своем месте. Для этого в блоке, который отделяет подвал от контента, высотой в 20 px, пропишем дополнительное свойство clear.
<div style="height: 20px; clear: right;"></div>
Вот что получилось.
Теперь подвал сайта там, где и нужен. Продолжим работы со ссылками. Изменим цвет ссылки при наведении курсора мышки.
#menu_a a:hover{ color:#8B864E; }
Перейдем к блоку реклама на сайте. Расположим здесь картинку, призывающую поместить рекламу на нашем сайте.
<h3 style="color: #008B00; text-align: center; margin: 0;">Реклама на сайте</h3> <img src="images/banner_1.jpg" style="width: 210px; height: 120px; margin-left: 60px;" alt="Реклама на сайте" title="Реклама на сайте"/>
Вот что вышло:
Оформим блок самое читаемое. Название блока отцентруем и не много изменим стиль заголовка.
И добавим ссылки на читаемые статьи.
<div id="menu"> <div style="font-size: 120%; text-align: center;"><b><i>Самое читаемое:</i></b></div></br> <div id="popular_a"><a href="#">Статья 1</a></div> <div id="popular_a"><a href="#">Статья 2</a></div> <div id="popular_a"><a href="#">Статья 3</a></div> </div>
Оформим для данного блока стили.
#popular_a{ padding: 0 0 0 10px; margin-bottom: 5px; text-align: center; } #popular_a a{ text-decoration: none; color: #00008B; } #popular_a a:hover{ color:#8B864E; }
Итог:
Внешний вид становится более дружелюбным.
Основной контент.
Приступим к оформлению основного контента. В основном контенте будут отображаться статьи с краткими описаниями. Так же будет присутствовать информация о дате публикации статьи и об авторе публикации.
<div> <div id ="name_article"><a href="#">Название статьи</a></div> <div id ="autor">Автор и дата публикации</div> <div id="key_desc_article"> <p>Краткое описание статьи</p> </div> <div id="link"><a href="#">подробнее...</a></div> </div>
При таком разбиении блоков внешний вид получился следующим:
Поработаем со стилями, придадим более интересный вид.
Начнем с названия статьи.
Увеличим немного шрифт, отцентруем и т.д. Код HTML:
<div id ="name_article"> <h2 class="title"> <a href="#">Название статьи</a> </h2> </div>
Код CSS:
h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; font-family: 'Abel', sans-serif; font-size: 36px; color: #3DA29B; text-align: center; } .title { height: 41px; padding: 7px 0px 0px 0px; letter-spacing: -1px; } .title a { text-decoration: none; border: none; color: #3A4648; } .title a:hover { text-decoration: underline; border: none; color: #00008B; }
Вот что из этого вышло.
Для даты публикации и автора статьи используем следующие стили:
#autor { margin-left:30px; font-size:90%; color: 787878; } .date { float: left; } .autor_name { margin-right: 30px; float:right; }
Далее для текста статьи сделаем красную строку, немного увеличим шрифт и т.д.
Код CSS примет вид:
#key_desc_article{ font-size: 110%; } #key_desc_article p{ text-indent: 25px; }
Для ссылки «подробнее…» тоже напишем свои стили.
#link { font-weight:bold; color: blue; } #link a{ text-decoration:none; } #link a:hover{ text-decoration:underline; }
Для большей наглядности добавим больше текста в статью и разместим три статьи.
Итог представлен ниже.
Посмотреть, как это все выглядит в браузере можно по следующей ссылке.
Архив с данным получившимся шаблоном находится здесь.
Заключение.
На сегодняшнем уроке мы отредактировали центральную часть сайта и бокового меню. Дизайн сайта принимает законченный вид. Подвал сайта и некоторые другие мелочи оставим для следующего раза.
Просмотров: 3472
В прошлой статье мы оформили основной блок - контент и боковое меню. В этой статье оформим подвал сайта - блок футтер и закончим оформление общего дизайна сайта.
В прошлой статье мы сделали необходимую основную разметку сайта блоками. Разметка сделана стандартно: header, content, menu, footer. В этой статье раскрасим станицу сайта. И Оформим шапку (header) нашего сайта.
РУБРИКИ САЙТА:
Видео обзор по установке программной среды для разработки ПО для ПЛК TIA Portal v15.1.
На Дзене и Ютубе началась публикация нового материала по разработке ППО для ПЛК на основе систем автоматизации от фирмы Сименс в программной среде разработке TIA Portal v15.1.