Рейтинг@Mail.ru
Часть I. Статья №5. Верстка основного блока - контент - ДРУиД
Войти
или
Зарегистрироваться
Главная Файлы Видеоматериалы Форум
Карта сайта
Главная -> РУБРИКИ: -> Создание сайта | блога | своими руками -> Часть I. Статья №5. Верстка основного блока - контент.

Статья опубликована: 2017-03-20/21:23:23-admin

Часть 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.

 


Просмотров: 1043



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

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

Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


Рекомендованные статьи:



На прошлом уроке мы сверстали основной блок контент. Оформили  статьи, которые отображаются на главной странице. Оформили их стилями, не входящими в макет сайта, но вписывающимися в общий дизайн сайта. На сегодняшнем уроке мы оформим подвал сайта. В данный блок войдут ссылки на стандартные страницы любого сайта, а также копирайт.


На прошлом уроке была сверстана шапка сайта. Блок «хлебных крошек». Оформление шаблона соответствует макету, а содержание тематике блога (сайта). Сегодня приступим к верстке правого бокового меню. В нем будет содержаться навигация по рубрикам сайта, размещен рекламный блок, анонс последней вышедшей статьи, а также блок с самыми читаемыми статьями на ресурсе.


РУБРИКИ:








Последняя статья:

Часть I. Статья №6. Верстка подвала – блока футтер

На прошлом уроке мы сверстали основной блок контент. Оформили  статьи, которые отображаются на главной странице. Оформили их стилями, не входящими в макет сайта, но вписывающимися в общий дизайн сайта. На сегодняшнем уроке мы оформим подвал сайта. В данный блок войдут ссылки на стандартные страницы любого сайта, а также копирайт.

Читать далее »


Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный
Рейтинг@Mail.ru Яндекс.Метрика