AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Наложение DIV-блоков

Заголовок 1 Заголовок 2 Заголовок 3
Исходный код этого примера:

<style type="text/css">
.s	{position:relative;width:350px;height:240px;top:20px;left:90px;overflow:hidden;}
.s small {float:left;overflow:hidden;width:200px;height:70px;background:#ffe;}
.s b	{float:left;padding:3px 0 3px 20px;overflow:hidden;width:200px;margin:-1px;}
.sa	{border:red 1px solid;}
.sb	{border:green 1px solid;margin:-12px 0 0 50px;}
.sc	{border:blue 1px solid;color:blue;margin:-12px 0 0 100px;}
.sd	{margin:23px 10px 0;}
.sa b	{border:red 1px solid;background:#fde;}
.sb b	{border:green 1px solid;background:#dfe;}
.sc b	{border:blue 1px solid;background:#def;}
.sa,.sa a,b {color:red;}
.sb,.sb a,b {color:green;}
.sc,.sc a,b {color:blue;}
small	{color:gray;}
</style>

<h1>Наложение DIV-блоков</h1>
<div class="s">
   <small class="sa">
      <b><a >Заголовок 1</a></b>
      <div class="sd"><a >Текст 1</a></div>
   </small>

   <small class="sb">
      <b><a >Заголовок 2</a></b>
      <div class="sd"><a >Текст 2</a></div>
   </small>

   <small class="sc">
      <b><a >Заголовок 3</a></b>
      <div class="sd"><a >Текст 3</a></div>
   </small>
</div>


.

© Copyright 2008-2016 by KDG