Часть I. Статья №5. Верстка основного блока - контент.

Часть I. Верстка шаблона сайта на основе макета фотошопа.

Статья №5. Верстка основного блока - контент.

 

Блок основного контента будет содержать название статей в виде ссылки, дата написания и автор статьи, краткое содержание статьи, а также ссылку на дальнейшее чтение статьи и количество просмотров и комментариев.

 

Начнем реализовывать.

 

		<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.

 

Комментарии: (0)

Оставить комментарий