|
Таблицы:
Эти
классы используются для генерации таблиц и форм, что позволяет
придать им неплохой вид. Они являются аналогами в CMS XOOPS
При создании тем, желательно хоть какойто стандарт
.outer -
граница таблицы
th - заголовки
таблицы
.head - верхние ячейки
таблиц
.even/.odd - ячейки таблиц
(контраст)
.foot - нижние ячейки
таблиц
Пример:
CSS
/* Определение стандартных настроек
*/
table {width: 100%; margin: 0; padding: 0; font-size:
small}
table td {padding: 0; border-width: 0;
vertical-align: top; font-family: Verdana, Arial, Helvetica,
sans-serif;}
th {background-color: #2F5376; color:
#FFFFFF; padding : 2px; vertical-align : middle; font-family:
Verdana, Arial, Helvetica, sans-serif;}
.outer {border: 1px
solid silver;}
.head {background-color: #c2cdd6; padding:
5px; font-weight: bold;}
.even {background-color: #dee3e7;
padding: 5px;}
.odd {background-color: #E9E9E9; padding:
5px;}
.foot {background-color: #c2cdd6; padding: 5px;
font-weight: bold;}
.blockTitle {padding:4px; color:#FFFFFF; background:#003366; font-weight:bold;}
.blockContent {background-color: #FFFFFF;}
/* Некоторые броузеры понимают,
только если назначить класс непосредственно тэгам
*/
tr.head td {background-color: #c2cdd6; padding: 5px;
font-weight: bold;}
tr.even td {background-color: #dee3e7;
padding: 5px;}
tr.odd td {background-color: #E9E9E9;
padding: 5px;}
tr.foot td {background-color: #c2cdd6;
padding: 5px; font-weight: bold;}
HTML
1
<table
class="outer"><br>
<tr><th>th</th></tr><br>
<tr><td
class="head">.head</td></tr><br>
<tr><td
class="even">.even</td></tr><br>
<tr><td
class="odd">.odd</td></tr><br>
<tr><td
class="even">.even</td></tr><br>
<tr><td
class="odd">.odd</td></tr><br>
<tr><td
class="foot">.foot</td></tr><br>
</table>
Pезультат
HTML
2
<table class="outer"><br>
<tr><th
colspan="2">th</th></tr><br>
<tr><td
class="head">.head</td><td
class="even">.even</td></tr><br>
<tr><td
class="head">.head</td><td
class="odd">.odd</td></tr><br>
<tr><td
class="head">.head</td><td
class="even">.even</td></tr><br>
<tr><td
class="head">.head</td><td
class="odd">.odd</td></tr><br>
</table>
Pезультат
HTML
3
<div class="blockTitle">blockTitle</div>
<div
class="blockContent">blockContent</div>
Pезультат
blockTitle
blockContent
***************
Элементы:
| .item |
Рамка вокруг новости |
.item {border: 1px solid #cccccc;} |
| .itemHead |
Цвет фона заголовка |
.itemHead {padding: 3px; background-color:
#2F5376; color: #FFFFFF;} |
| .itemInfo |
Цвет фона информации о новости (когда
опубликова, кем и т.д.) |
.itemInfo {text-align: right; padding: 3px;
background-color: #efefef;} |
| .itemTitle |
Цвет ссылки на раздел и заголовок
новости |
.itemTitle a {font-size: 130%; font-weight:
bold; font-variant: small-caps; color: #ffffff; background-color:
transparent;} |
| .itemPoster |
Текст "опубликовано" |
.itemPoster {font-size: 90%;
font-style:italic;} |
| .itemPostDate |
Текст даты и времени |
.itemPostDate {font-size: 90%;
font-style:italic;} |
| .itemStats |
Цвет текста "прочтено Х раз" |
.itemStats {font-size: 90%; font-style:italic;} |
| .itemBody |
Поле текста новости и картинки |
.itemBody {padding-left: 5px;} |
| .itemText |
Текст новости |
.itemText {margin-top: 5px; margin-bottom: 5px; line-height:
1.5em;} |
| .itemText:first-letter |
Первая буква новости |
.itemText:first-letter {font-size: 133%; font-weight:
bold;} |
| .itemFoot |
Нижний колонтитул новости (читать далее и т.д.) |
.itemFoot {text-align: right; padding: 3px; background-color:
#efefef;} |
| .itemAdminLink |
Нижний колонтитул новости (ссылки на администрирование
новости) |
.itemAdminLink {font-size: 90%;} |
| .itemPermaLink |
Нижний колонтитул новости (Х байт) |
.itemPermaLink {font-size:
90%;} |
Комментарии:
.comTitle
.comText
.comUserStat
.comUserStatCaption
.comUserStatus
.comUserRank
.comUserRankText
.comUserRankImg
.comUserName
.comUserImg
.comDate
.comDateCaption
***************
Сообщения:
div.errorMsg
div.confirmMsg
div.resultMsg
Да и ещё информация, может кто не знает:
<th>...</th>
это тоже самое что и <td><center><b>...</b></center></td>
|
Версия для печати
Скачать статью
