Рейтинг@Mail.ru
Часть I. Статья №5. Верстка основного блока - контент - ДРУиД

~ДРУиД~

Дом рационально-умный и душевный

ДРУиД - Дом Рационально-Умный и Душевный
Строительство частного "Умного" дома своими руками
Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Часть I. Статья №5. Верстка основного блока - контент.

20 March 17 г. Автор - admin


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

 


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



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

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

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


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

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

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


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

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

Часть I. Статья №4. Верстка правого бокового меню.

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



РУБРИКИ САЙТА:



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

Выбор системы оплаты труда - изобретаем велосипед

С промежуточным итогом по современным системам оплаты труда ознакомились. Теперь вернемся к нашим попугаям. Для чего менять существующую систему? На что опираться при формировании новой системы? Как учесть все пожелания работодателя (читай цели, возлагаемые на работника)? Как не ущемить права работника, не потерять квалифицированного сотрудника, поднять мотивацию и увеличить производительность труда? Начнем разбираться.

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

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

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

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


Рейтинг@Mail.ru Яндекс.Метрика