Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Дом рационально-умный и душевный
Блок основного контента будет содержать название статей в виде ссылки, дата написания и автор статьи, краткое содержание статьи, а также ссылку на дальнейшее чтение статьи и количество просмотров и комментариев.
Начнем реализовывать.
<div class="center-content"> <div class="center-content-head"> <div class="center-content-head-articles"><a href="#" class="center-content-head-a">СТАТЬИ</a></div> <div class="center-content-head-news"><a href="#" class="center-content-head-a">НОВОСТИ</a></div> </div> </div>
Стили будут просты и понятны.
Стили будут просты и понятны. .center-content{ width: 70%; float: left; font-family: Georgia; } .center-content-head { height: 40px; background-color: #9c4757; margin: 0 20px 10px 20px; } .center-content-head-news { width: 49%; text-align: right; color: #fff; padding-top: 10px; } .center-content-head-articles { width: 49%; float: right; color: #fff; padding-top: 10px; } .center-content-head-a:hover { color: #fff; } .center-content-head-a { color: #fff; text-decoration: none; font-size: 110%; font-weight: bold; }
Сама статья обрамлена следующим HTML кодом:
<div class="center-content-articles"> <div class="center-content-articles-name"> <a href="#" class="center-content-articles-name-a">Создаем общий вид сайта. Оформляем блоки контент и меню.</a> </div> <div class="center-content-articles-data"> <span class="center-content-articles-data-date">17 сентября 2013 г.</span> <span class="center-content-articles-data-autor">Автор - <strong>ADMIN</strong></span> </div> <div class="center-content-articles-text"> <p>В прошлой статье мы оформили основной блок - контент и боковое меню. В этой статье оформим подвал сайта - блок футтер и закончим оформление общего дизайна сайта.</p> </div> <div class="center-content-articles-more"> <span class="center-content-articles-more-cut"><a href="#" class="center-content-articles-more-cut-a">Подробнее...</a></span> <span class="center-content-articles-more-stat"> <div class="center-content-articles-more-stat-count" title="Количество просмотров">100</div> <a href="#"> <div class="center-content-articles-more-stat-comments" title="Комментарии">0</div> </a> </span> </div> </div>
Здесь указано название статьи в виде ссылки, дата и автор статьи, краткое описание статьи, а также количество просмотров и комментариев.
Стили следующие:
.center-content-articles { margin-top: 25px; } .center-content-articles-name { text-align: center; margin-bottom: 10px; font-family: 'Fira Sans',sans-serif; } .center-content-articles-name-a { font-size: 22px; color: #971E27; text-decoration: none; } .center-content-articles-data { font-size: 89%; margin-bottom: 35px; } .center-content-articles-data-date { float: left; } .center-content-articles-data-autor { float:right; } .center-content-articles-text { text-indent: 35px; color: #222; font-size: 16px; font-family: Verdana,sans-serif; line-height: 22px; } .center-content-articles-more { margin-top: 15px; } .center-content-articles-more-cut-a:hover { text-decoration: none; } .center-content-articles-more-cut-a { color: #971E27; } .center-content-articles-more-stat { float: right; text-align: left; } .center-content-articles-more-stat-count { background-image: URL(../images/Views.png); background-repeat: no-repeat; text-align: left; padding: 0px 0px 0px 20px; float: right; width: 50px; } .center-content-articles-more-stat-comments { background-image: URL(../images/Comment.png); background-repeat: no-repeat; text-align: left; padding: 0px 0px 0px 20px; float: right; width: 50px; }
Количество просмотров и комментариев обрамлены соответствующими картинками.
Видео данного урока представлено ниже.
Внешний вид сайта на данном этапе можно посмотреть здесь.
Подходит к концу наша верстка сайта. Осталось сверстать блок футер, подвал сайта. Но это в следующем уроке. Забегая вперед, расскажу, что в следующем уроке после верстки последних элементов, мы подготовим наш шаблон к написанию собственной CMS на PHP.
Просмотров: 4078
На прошлом уроке мы сверстали основной блок контент. Оформили статьи, которые отображаются на главной странице. Оформили их стилями, не входящими в макет сайта, но вписывающимися в общий дизайн сайта. На сегодняшнем уроке мы оформим подвал сайта. В данный блок войдут ссылки на стандартные страницы любого сайта, а также копирайт.
На прошлом уроке была сверстана шапка сайта. Блок «хлебных крошек». Оформление шаблона соответствует макету, а содержание тематике блога (сайта). Сегодня приступим к верстке правого бокового меню. В нем будет содержаться навигация по рубрикам сайта, размещен рекламный блок, анонс последней вышедшей статьи, а также блок с самыми читаемыми статьями на ресурсе.
РУБРИКИ САЙТА:
Здравствуйте друзья!
Приветствую Вас на моем канале, посвященному разработке прикладного программного обеспечению для программируемых логических контроллеров и панелей оператора.
В прошлом обзоре мы создали проект в ТИА портал версии 15.1, а также рассмотрели документацию на основе которой будет вестись разработка прикладного программного обеспечения для контроллера.