Создание новой темы. Часть пятая: CSS-only?

Прислано: steel.ne

пн, 09/04/2007 - 19:40

Другие статьи по теме:

Добьем все что видно на заглавной странице: причешем блоки и основное содержимое.

Опять начнем с неких настоек по умолчанию:

h1 {
	font-size: 1.3em;
}
h2 {
	font-size: 1.2em;
}
h3 {
	font-size: 1.1em;
}

Тут понятно должно быть - скопом назначил размер шрифта для основных заголовков.

Дальше рассмотрим блоки на левой и правой панелях:

.block .title {
	text-align: center;
	font-size: 1em;
	background: #ddd;
}
.block .content {
	padding: 5px;
}

В принципе красивго заголовка и отступов хватило для пристойного вида. Кому не нравится шрифт - велкам. Меняйте как хотите. Типа на дом задание ;)

Дальше основной контент - центровое содержимое:

.node {
	border: 1px solid black;
	margin-bottom: 5px;
}
.node .title {
	background: #ddd;
	padding-left: 20px;
}
.node .submitted {
	font-size: 0.8em;
	color: #999;
	padding-left: 5px;
}
.node .content {
	padding: 5px;
}
.node .links {
	border-top: 1px solid black;
	padding-left: 5px;
}

Опять точечными ударами и малой кровью привели центральный блок в состояние причесанности. Да, если заметите - я отключил рамку у #main.

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

Прикрепленный файлРазмер
tutor_5_style.css_.txt1.47 кб

Новое на сайте

Ссылки партнёров