ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 15.06.2019
Просмотров: 155
Скачиваний: 1
IT-14-1 Красовский А.В.
Лабораторная работа №3
Вёрстка сайта
Цель работы: закрепить знания и навыки, необходимые для проектирования и разработки web-приложений.
HTML:
CSS:
@import url(reset.css); #archives { padding-right: 10px; } #banner { width: 468px; height: 60px; margin-right: 10px; margin-top: 34px; float: right; } #bottom-content {
} #categories h3 { margin-bottom: 15px; } #categories ul { width: 140px; } #categories ul li a { font-weight: bold; } #footer-top { height: 19px; background: url(../images/footer-top_backgorund.png) repeat-x; } #footer-middle { padding-top: 55px; background: url(../images/footer-middle_background.png); } #inner-menu, #wrapper, #header, #middle-content, #bottom-content { min-width: 960px; max-width: 1200px; margin: 0 auto; } #inner-menu a { color: #e2e2e2; font-size: 12px; padding: 15px; display: block; } #inner-menu a:hover { background: url(../images/menu-hover.png) repeat-x; text-decoration: none; } #inner-menu ul li{ float: left; text-transform: uppercase; } #logo { float: left; margin: 44px 0 42px 10px; width: 241px; height: 46px; } #magazine { background: url(../images/footer_logo.png) no-repeat 10px 0; padding: 40px 0 0 10px; } #magazine p { margin: 16px 0; } #middle-content { padding-bottom: 65px; } #pagination { margin: 33px 0; } .text-field input{ background: none; border: none; font-size: 12px; color: #b1b1b1; padding: 8px 10px; width: 120px; height: 15px; outline: none; } .thumbnail { float: left; margin-bottom: 15px; } .thumbnail img { border: 3px solid #e0e0e0; } a { text-decoration: none; color: #5e5e5e; } a:hover { text-decoration: underline; } body { font: 13px/1.5 Arial, Verdana, sans-serif; background: url(../images/main-background.jpg); color: #5e5e5e; } h2 { font-size: 18px; line-height: 1.1; margin-bottom: 7px; } p { margin-bottom: 13px; } |
#categories ul li { padding: 9px 0; border-top: 1px dashed #e3e3e3; } #categories ul li:first-child { border: none; } #content { margin-right: 310px; padding: 30px 38px 0 10px; } #footer { min-width: 960px; color: #e0e0e0; } #footer h3 { background: url(../images/h3_background.png) repeat-x 0 5px; font-weight: bold; text-transform: uppercase; font-size: 14px; #pagination a:hover { background: #e7e7e7; } #pagination .first, #pagination .first:hover { background: #333333; color: #ffffff; border: none; padding: 8.5px 14px; } #pagination .next { padding-top: 5px; padding-bottom: 9px; } #pagination ul { overflow: hidden; } #pagination ul li { float: left; margin-right: 2px; } #pagination ul li a { display: block; padding: 7px 14px; text-decoration: none; border-bottom: 3px solid #cccccc; } #recent-posts ul li, #archives ul li { padding: 11px 0; background: url(../images/dashed_background.png) repeat-x left bottom; } #recent-posts ul li a, #archives ul li a { color: #e0e0e0; } #second-row { margin-top: 14px; } #top-menu { min-width: 960px; height: 48px; background: url(../images/top-menu.png) repeat-x; width: 100%; } .clear { clear: both; } .footer-box { float: left; width: 30%; margin-right: 5%; } .left { float: left; display: block; } |
width: 220px; margin-bottom: 8px; } #footer h3 span { background: url(../images/footer-middle_background.png); padding-right: 13px; } #footer-bottom { background: url(../images/footer-bottom_background.png); color: #8f8f8f; } #footer-bottom p { margin: 0; padding: 30px 10px; } #footer-box { margin-right: 0; } .post { border-bottom: 1px dashed #e5e5e5; overflow: hidden; margin-top: 15px; } .post:first-child { margin-top: 0; } .post-content { margin-left: 180px; } .post-categories, .post-published { font-family: Georgia, "Times New Roman", serif; color: #aaaaaa; margin-bottom: 5px; } .right { float: right; display: block; } .row { width: 270px; margin: 0 auto; } .sidebar { width: 300px; float: right; margin-right: 10px; } .sidebar h3 { text-transform: uppercase; color: #999999; font-size: 15px; padding-left: 20px; font-weight: bold; background: url(../images/sidebar_h3_background.png) repeat-x 0 5px; margin: 25px 0; } sidebar h3 span { background: url(../images/main-background.jpg); padding: 0 7px; } .sidebar form { width: 220px; margin: 0 auto; } .text-field { width: 140px; height: 31px; background: url(../images/text-field_background.png); float: left; } |
Структура файлов: