Пятница, 26 Октября 2012 08:29

Список определений HTML

Written by 
Оцени эту запись
(2 Голоса)

В данной статье хочу рассказать о списке определений в HTML. Список определений задается тройным тегом - <dl>, <dd>, <dt>.

 

 

<dl> - содержит весь список

<dd> - название термина

<dt> - определений термина

 

Пример:

 

 

<dl>

<dd>HTML</dd>

<dt>гипертекстовый язык размерки, служит для создания web-страничек</dt>

<dd>CSS</dd>

<dt>каскадные таблицы стилей, служит для стилизации html  страниц</dt>

<dd>JavavScript</dd>

<dt>скриптовый язык программирования, который служит для создания динамики на html страницах</dt>
 
</dl>
 

 

Вот такой получим вид:

 

HTML
гипертекстовый язык размерки, служит для создания web-страничек
CSS
каскадные таблицы стилей, служит для стилизации html страниц
JavavScript
скриптовый язык программирования, который служит для создания динамики на html страницах
 
 
Используя данный тег, вы можете сождать красивый список определений на своем сайте, так как можете задать разную стилизацию для термина и его определения.
 
 
Но, кроме этого, список определений можно использовать и для вывода списков другого рода. С точки зрения семантики, логично верстать формы при помощи списка определений. Тогда можно описание поля вставить вместо термина, а поле для ввода данных вместо определения:
 
 

 

<dl class="styled">
<dd>
Ваше имя</dd>
<dt>
<input type="text" /></dt>
<dd>
Номер телефона</dd>
<dt>
<input type="text" /></dt>
<dd>
Ваш город</dd>
<dt>
<select><option>Киев</option><option>Львов</option><option>Ужгород</option></select></dt>
</dl>
<style type="text/css">
dl.styled {
width: 300px;
}
.styled dd, .styled dt {
width: 150px;
height: 30px;
}
.styled dd {
float:left;
clear: both;
text-align: left;
}
.styled dt {
float:right;
text-align: right;
}
.styled dt input, .styled dt select {
width: 100px;
border: 1px solid violet;
background: white;
height: 23px;
color: #666;
}
.styled dt select {
width: 110px;
padding: 1px 0;
}
</style>
 
 
 
 
 
Ваше имя
Номер телефона
Ваш город
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов