I.Различные типы блоков
В заголовке веб-документа находится фраза
<STYLE type="text/css">
div div {border:2px solid #333}
</STYLE>
В тексте html-документа набрано
<div>
<div style="display:inline">display = inline</div>
<div style="display:inline; width:300px">display = inline</div>
<div style="display:inline-block; width:300px">display = inline-block</div>
<div style="display:block">display = block</div>
<div style="display:none">этого блока не видно</div>
</div>
Результат:
display = inline
display = inline
display = inline-block
display = block
этого блока не видно
II.Выравнивание элементов формы
В заголовке веб-документа находится фраза
<STYLE type="text/css">
label {display:inline-block; width:100px}
</STYLE>
В тексте html-документа набрано
<div>
<label for="login">Логин:</label>
<input type="text" name="login" id="login">
</div>
<div>
<label for="pass">Пароль:</label>
<input type="password" name="pass" id="pass">
</div>
Результат:
(Фразы "Логин:" и "Пароль:" располагаются внутри контейнеров, размером 100 пикселов.)
III.Указание типа блока для ссылки
В заголовке веб-документа находится ранее упомянутая фраза
<STYLE type="text/css">
div div {border:2px solid #333}
</STYLE>
В тексте html-документа набрано
<div>
<div style="width:300px"><a href="link1.htm">Обычная ссылка</a></div>
<div style="width:300px"><a href="link1.htm" style="display:block">Ссылка занимает всю ширину блока</a></div>
</div>
Результат:
