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

Статья опубликована: 2017-03-18/11:01:55-admin

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



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

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

Если рассмотреть макет сайта, то правого бокового меню в нем нет. Но имеется слева основные элементы, входящие в его состав. Так что оформление из макета.

Приступим. Для начала разобьем нашу рабочую область на две составляющие: контент и меню.

 

Основной контент
Боковое меню

 

Стили пропишем следующие:

 

.center {
	width: 90%;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
}
	.center-content{
		width: 70%;
		float: left;
	}
	.right-side {
		width: 25%;
		float: right;	
	}

 

 

Теперь приступим непосредственно к верстке бокового меню.

 

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

 

Первую часть обрамим рамкой согласно макету. Создадим список ссылок, рекламный блок в виде картинки, анонс последней статьи виде названия-ссылки и кратким описанием статьи, а также форму подписки на новостную рассылку.

 

Код индекснего файла имеет следующее содержание:

 

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

Последняя статья:
Последняя статья на сайте длинное название

Краткое описание статьи и т.д. и тому подобное. Краткое описание статьи и т.д. и тому подобное

Я хочу получать новости по E-Mail

 

 

Файл стилей приобрел описание классов следующего вида:

 

		.right-side-center {
			border: 1px solid #d8dbde;
		}
			.right-side-center-p {
				color: #282d33;
				font-size: 110%;
				font-weight: bold;
				font-style: italic;
				padding-left: 20px;
				font-family: sans-serif;
			}
			.right-side-center-li {
				background-image: url(../images/arrow.gif);
				background-repeat: no-repeat;
				background-position: left;
				padding: 0 0 0 15px;
				border-bottom: 2px solid #E7EBED;			
			}
				.right-side-center-li-a {
					font-size: 90%;
					color: blue;
					text-decoration: none;			
				}
			.right-side-center-rekl {
				max-width: 300px;
				padding: 1px;
				max-height: 300px;				
			}
				.right-side-center-rekl img {
					width: 298px;
					max-height: 298px;				
				}
			.right-side-center-last-article {
				width: 100%;
			}
				.right-side-center-last-article-name {
					text-align: center;
					color: #000;
					font-size: 110%;
					font-weight: bold;
				}
				.right-side-center-last-article-link {
					text-align: center;
				}
					.right-side-center-last-article-link-a {
						color: #971E27;
						font-weight: bold;
						text-decoration: none;
						font-size: 90%;						
					}
				.right-side-center-last-article-p {
					text-indent: 10px;
					color: #282d33;
				}
			.right-side-center-subshribe {
				margin: 2px;
				border: 1px solid #989da1;
				text-align: center;
				background-color: #6E6E6E;				
			}
				.right-side-center-subshribe-name {
					font-style: italic;
					font-weight: bold;
					font-size: 110%;
					color: #FFF;				
				}
				.right-side-center-subshribe-input-text {
					width: 90%;
					background-color: #e3e4e5;
					border: 2px solid #fff;
					font-size: 110%;
					color: #707275;			
				}
				.right-side-center-subshribe-input-text[type="text"] {
					padding-left: 5px;
				}
				.right-side-center-subshribe-input-text:focus {
					border: 2px solid #772211;
				}

 

 

Блок со списком самых читаемых статей на ресурсе будет простым. Заготовок блока и ссылки на название статей.

 


 

 

 

Стили тоже не замысловатые:

 

		.right-side-top-articles {
			width: 80%;
			margin: 0 auto;
		}
			.right-side-top-articles-head{
				color: #000;
				font-weight: bold;
				text-align: center;
				font-family: 'Fira Sans',sans-serif;				
			}
			.right-side-top-articles-a:hover {
				text-decoration:none;
			}
			.right-side-top-articles-a {
				text-decoration: none;
				font-size: 89%;
				color: #1010ff;
			}

 

Видео данного урока представлено ниже.

 

 

 

 

Внешний вид сайта на данном этапе можно посмотреть здесь.

 

Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"

 

P.S.

Автор данного цикла статей далеко не дизайнер и даже не имеет хоть какого-то представления о художественной стилистике. Так что прошу покорно извинить, если дизайн сайта выглядит не модно или красочно. Главная тема показать, что верстать сайты на HTML и CSS не так уж и сложно. До новых встреч!

 


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



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

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

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

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

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


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



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


На прошлом уроке была произведена основная разметка сайта, рассмотрены аспекты дефолтных и базовых настроек стилей сайта. Приступим непосредственно к написанию кода шаблона сайта. HTML и CSS. Верстать будем сверху вниз, то есть начнем с блока ХИДЕР.


РУБРИКИ:








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

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

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

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


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