ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 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;

}




Структура файлов:


Смотрите также файлы