Главная/ Собираем HTML и CSS приемы/ Online сервисы для HTML верстальщика/ Оформление контента

Оформление контента

Дата публикации: 20.09.2009

Для кроссбраузерного отображения контента используйте сброс стилей вначале CSS файла (или первым подключайте в head).

HTML код (вставлять нужно в контейнер <div class=»content»>):

Заголовки:
<h1>Заголовок первого уровня (h1)</h1>
<h2>Заголовок второго уровня (h2)</h2>
<h3>Заголовок третьего уровня (h3)</h3>
<h4>Заголовок четвертого уровня (h4)</h4>
<h5>Заголовок пятого уровня (h5)</h5>
<h6>Заголовок шестого уровня (h6)</h6>

Абзац с рисунком слева(p):
<p><img align="left" src="http://www.mpbox.ru/images/test.jpg" alt="" width="129" height="90" />Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей.

</p>
<hr />
Абзац с рисунком справа(p):
<p><img align="right" src="http://www.mpbox.ru/images/test.jpg" alt="" width="129" height="90" />Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей.

</p>
Ненумерованный список: (ul)
<ul>
<li>первый элемент</li>
<li>второй элемент
<ul>
<li>первый элемент вложенного списка</li>

<li>второй элемент вложенного списка</li>
</ul>
</li>
<li>элемент в <br/>две строки</li>
<li>элемент N</li>

</ul>
Нумерованный список: (ol)
<ol>
<li>первый элемент</li>
<li>второй элемент
<ol>
<li>первый элемент вложенного списка</li>

<li>второй элемент вложенного списка</li>
</ol>
</li>
<li>элемент в <br/>две строки</li>
<li>элемент N</li>

</ol>
Список определений: (dl)
<dl>
<dt>первое определение</dt>
<dd>описание первого определения</dd>
<dt>второе определение</dt>

<dd>описание второго определения</dd>
</dl>
Таблица: (table)
<table>
<thead>
<tr>
<th>Заголовок столбца 1</th><th>Заголовок столбца 2</th><th>Заголовок столбца 3</th>

</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td>

</tr>
<tr>
<td>Ячейка 4</td><td>Ячейка 5</td><td>Ячейка 6</td>
</tr>
</tbody>

</table>
Теги форматирования:
<p>Тег <strong>strong — выделение жирным</strong>, повышает вес слова для поисковых систем.</p>
<p>Тег <b>b — выделение жирным</b>, не повышает вес слова для поисковых систем.</p>

<p>Тег <em>em — выделение курсивом</em>, повышает вес слова для поисковых систем.</p>
<p>Тег <i>i — выделение курсивом</i>, не повышает вес слова для поисковых систем.</p>

CSS код:

/* content -----------------------*/
.content {
	padding: 10px;
}
.content h1 {
	font-size: 150%;
	margin-bottom: 20px;
}
.content h2 {
	font-size: 140%;
	margin-bottom: 15px;
}
.content h3 {
	font-size: 130%;
	margin-bottom: 12px;
}
.content h4 {
	font-size: 120%;
	margin-bottom: 10px;
}
.content h5 {
	font-size: 110%;
	margin-bottom: 10px;
}
.content h6 {
	font-size: 100%;
	margin-bottom: 10px;
}
.content p {
	margin-bottom: 15px;
}
.content ul {
	list-style: disc;
	margin: 0 15px 10px 15px;
}
.content ul ul {
	margin: 10px 0 10px 25px;
}
.content ol {
	list-style: decimal;
	margin: 0 15px 10px 20px;
}
.content ol ol {
	margin: 10px 0 10px 25px;
}
.content li {
	margin-bottom: 5px;
}
.content table {
	margin-bottom: 15px;
	font-size: 100%;
	width: auto;
	border: 1px solid #000;
}
.content th,
.content td {
	border: 1px solid #000;
	padding: 4px;
	text-align: left;
}
.content th {
	font-weight: bold;
	text-align: center;
}
.content a,
.content a font {
	color: #0000ff;
	text-decoration: underline;
}
.content a:visited,
.content a:visited font {
	color: #0000aa;
}
.content a:hover,
.content a:hover font {
	color: #0000ff;
	text-decoration: none;
}
.content a:active,
.content a:active font {
	color: #ff0000;
}
.content img[align=left] {
	margin: 0 10px 10px 0;
	float: left;
}
.content img[align=right] {
	margin: 0 0 10px 10px;
	float: right;
}
.content dl {
	margin: 0 0 15px 0;
}
.content dt {
	font-weight: bold;
	margin-bottom: 2px;
}
.content dd {
	margin-bottom: 5px;
}
.content hr {
	height: 1px;
	border: none;
	color: #aaa;
	background: #aaa;
	margin: 10px 0;
	clear: both;
}

CSS код для ie6.css

.content hr {
	float: left;
	width: 100%;
}
.content img {
z-index: expression(runtimeStyle.zIndex = 1, align && "left" == align.toLowerCase() ? (className += " imgLeft") : (align && "right" == align.toLowerCase() ? (className += " imgRight") : 0 ) )
}
.content .imgLeft {
	margin: 0 10px 10px 0;
	float: left;
}
.content .imgRight {
	margin: 0 0 10px 10px;
	float: right;
}
Теги: ,
Показать комментарии