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

~ДРУиД~

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

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

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


Часть 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 не так уж и сложно. До новых встреч!

 


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



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

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

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


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

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

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


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

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

Часть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР.

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



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



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

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

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

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

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

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

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


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