Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Дом рационально-умный и душевный
Если рассмотреть макет сайта, то правого бокового меню в нем нет. Но имеется слева основные элементы, входящие в его состав. Так что оформление из макета.
Приступим. Для начала разобьем нашу рабочую область на две составляющие: контент и меню.
Основной контентБоковое меню
Стили пропишем следующие:
.center { width: 90%; max-width: 1200px; height: 100%; margin: 0 auto; } .center-content{ width: 70%; float: left; } .right-side { width: 25%; float: right; }
Теперь приступим непосредственно к верстке бокового меню.
Правое боковое меню будет состоять из двух частей. Первая с навигацией по рубриками сайта, рекламным блоком, анонсом последней статьи и формой для подписки. Вторая часть из списка статей особо читаемых на ресурсе.
Первую часть обрамим рамкой согласно макету. Создадим список ссылок, рекламный блок в виде картинки, анонс последней статьи виде названия-ссылки и кратким описанием статьи, а также форму подписки на новостную рассылку.
Код индекснего файла имеет следующее содержание:
РУБРИКИ САЙТА:
Последняя статья:Краткое описание статьи и т.д. и тому подобное. Краткое описание статьи и т.д. и тому подобное
Я хочу получать новости по E-Mail
Файл стилей приобрел описание классов следующего вида:
.right-side-center { border: 1px solid #d8dbde; } .right-side-center-p { color: #282d33; font-size: 110%; font-weight: bold; font-style: italic; padding-left: 20px; font-family: sans-serif; } .right-side-center-li { background-image: url(../images/arrow.gif); background-repeat: no-repeat; background-position: left; padding: 0 0 0 15px; border-bottom: 2px solid #E7EBED; } .right-side-center-li-a { font-size: 90%; color: blue; text-decoration: none; } .right-side-center-rekl { max-width: 300px; padding: 1px; max-height: 300px; } .right-side-center-rekl img { width: 298px; max-height: 298px; } .right-side-center-last-article { width: 100%; } .right-side-center-last-article-name { text-align: center; color: #000; font-size: 110%; font-weight: bold; } .right-side-center-last-article-link { text-align: center; } .right-side-center-last-article-link-a { color: #971E27; font-weight: bold; text-decoration: none; font-size: 90%; } .right-side-center-last-article-p { text-indent: 10px; color: #282d33; } .right-side-center-subshribe { margin: 2px; border: 1px solid #989da1; text-align: center; background-color: #6E6E6E; } .right-side-center-subshribe-name { font-style: italic; font-weight: bold; font-size: 110%; color: #FFF; } .right-side-center-subshribe-input-text { width: 90%; background-color: #e3e4e5; border: 2px solid #fff; font-size: 110%; color: #707275; } .right-side-center-subshribe-input-text[type="text"] { padding-left: 5px; } .right-side-center-subshribe-input-text:focus { border: 2px solid #772211; }
Блок со списком самых читаемых статей на ресурсе будет простым. Заготовок блока и ссылки на название статей.
САМОЕ ЧИТАМОЕ:
Стили тоже не замысловатые:
.right-side-top-articles { width: 80%; margin: 0 auto; } .right-side-top-articles-head{ color: #000; font-weight: bold; text-align: center; font-family: 'Fira Sans',sans-serif; } .right-side-top-articles-a:hover { text-decoration:none; } .right-side-top-articles-a { text-decoration: none; font-size: 89%; color: #1010ff; }
Внешний вид сайта на данном этапе можно посмотреть здесь.
Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"
Автор данного цикла статей далеко не дизайнер и даже не имеет хоть какого-то представления о художественной стилистике. Так что прошу покорно извинить, если дизайн сайта выглядит не модно или красочно. Главная тема показать, что верстать сайты на HTML и CSS не так уж и сложно. До новых встреч!
Просмотров: 3164
На прошлом уроке мы сверстали правое боковое меню. В него вошла навигация по рубрикам сайта, блок рекламы, анонс последней статьи, форма подписки на новостную рассылку, а также список самых читаемых статей на ресурсе. В сегодняшнем уроке сверстаем основной блок – контент.
На прошлом уроке была произведена основная разметка сайта, рассмотрены аспекты дефолтных и базовых настроек стилей сайта. Приступим непосредственно к написанию кода шаблона сайта. HTML и CSS. Верстать будем сверху вниз, то есть начнем с блока ХИДЕР.
РУБРИКИ САЙТА:
Здравствуйте друзья!
Приветствую Вас на моем канале, посвященному разработке прикладного программного обеспечению для программируемых логических контроллеров и панелей оператора.
В прошлом обзоре мы создали проект в ТИА портал версии 15.1, а также рассмотрели документацию на основе которой будет вестись разработка прикладного программного обеспечения для контроллера.