Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Дом рационально-умный и душевный
Блок футер будет по стилистики близок к макету. Подвал сайта будет состоять из двух частей: список ссылок и блок копирайта.
Ссылки оформим в том же стиле, что и главное навигационное меню.
<footer> <div class="footer"> <nav> <ul> <li></li> </ul> <ul> <div></div> </ul> </nav> </div> </footer>
Простая конструкция.
Начнем её заполнять по смыслу.
Пропишем всем классы и добавим ссылки, а также блок копирайт. Вот что в итоге.
<ul class="footer-nav-ul-left"> <li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="RSS-лента">RSS-лента</a></li> <li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Контакты">Контакты</a></li> <li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Вопросы и ответы">Вопросы и ответы</a></li> <li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Обратная связь">Обратная связь</a></li> <li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Справка">Справка</a></li> </ul> <ul class="footer-nav-ul-right"> <div class="footer-nav-ul-right-div">© 2013-2017, ДРУиД - Дом Рационально-Умный и Душевный</div> </ul>
Стили не сложные.
/* --------------- Футер сайта ---------*/ footer { background-image: url(../images/fon_header.jpg); } .footer { height: 40px; width: 100%; max-width: 1200px; margin: 0 auto; } .footer-nav-ul-left { float: left; padding-top: 8px; } .footer-nav-ul-left-li { float: right; padding-left: 25px; } .footer-nav-ul-left-li-a:hover { border-bottom: 2px solid #fff; text-decoration: none; color: #fff; } .footer-nav-ul-left-li-a { color: #fff; text-decoration: none; display: block; text-align: center; /* Выравнивание по центру */ height: 100%; } .footer-nav-ul-right { float: right; padding-top: 11px; font-size: 89%; } .footer-nav-ul-right-div{ float: left; padding-right: 15px; color: #000; } /* --------------- /Футер сайта ---------*/
Итог можно увидеть по следующей ссылке.
Шаблон сайта сверстан. От макета взято не много, но за основу общего дизайна сайта он пригодился. Можно найти макет сайта по своему вкусу и сверстать на его основе шаблон сайта один в один.
Видео данного урока.
Итог можно увидеть по следующей ссылке.
Цикл по верстке шаблона сайта на основе макета фотошопа подошел к концу. Теперь приступим к написанию CMS сайта. В процессе написания прицепим наш шаблон к собственно разработанному движку сайта. Забегая вперед, скажу, что шаблон нам понадобиться с первых минут написания собственного движка сайта.
Просмотров: 4754
На прошлом уроке мы сверстали правое боковое меню. В него вошла навигация по рубрикам сайта, блок рекламы, анонс последней статьи, форма подписки на новостную рассылку, а также список самых читаемых статей на ресурсе. В сегодняшнем уроке сверстаем основной блок – контент.
РУБРИКИ САЙТА:
Здравствуйте друзья!
Приветствую Вас на моем канале, посвященному разработке прикладного программного обеспечению для программируемых логических контроллеров и панелей оператора.
В прошлом обзоре мы создали проект в ТИА портал версии 15.1, а также рассмотрели документацию на основе которой будет вестись разработка прикладного программного обеспечения для контроллера.