Deutsch
Germany.ru → Группы → Архив Досок→ Болталка (Политика, программирование, дизайн)

Веб дизайн

810 просмотров Перейти к просмотру всей ветки
12.09.23 05:41
Re: Веб дизайн
 
uscheswoi_82 коренной житель

Теперь давайте сделаем тень и заполним сайт контентом.


Тень буду делать так: 

box-shadow:0px 0px 12px #999;


Вот полный код index.html:

<!DOCTYPE html>
<html>
  <head>
    <style>
      * { padding:0; margin:0; }
      .clearfix:after { content:""; clear:both; display:table; }
      .left { float:left; padding:3px 3px; }
      .right { float:right; padding:3px 3px; }
       #header { min-height:150px; }
       #footer { min-height:150px; }
       #content { padding:3px 3px; }
       #container { margin-left:auto; 
                    margin-right:auto;
                    margin-top:80px;
                    margin-bottom:150px;
                    height:700px;
                    width:80%; 
                    border:1px solid #000;
                    box-shadow:0px 0px 12px #999;
       }
       .menu { background-color:#000;
               list-style-type:none;
               margin:0;
               padding:0;
               overflow:hidden;
       }
      .menu li { float:left; }
      li a { display:block;
             color:#fff;
             text-align:center;
             padding:12px 12px; 
             text-decoration:none;
      }
      li a:hover { color:#fff;
                   background-color:#999;
      }
      li .active { color:#fff;
                   background-color:#777;
      }
    </style>
    <title>Заголовок сайта</title>
  </head>
  <body>
    <div id="container">
      <header id="header"></header>
      <nav>
        <ul class="menu">
          <li><a class="active" href="#">Главная страница</a></li>
          <li><a href="#">Продукты</a></li>
          <li><a href="#">О нас</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
      <div id="content">
     <h1>О FirmaX</h1>
     <div class="clearfix">
          <div class="left" style="width:200px;">
            <p>
              На рынке в Германии уже более 10 лет. Немецкие фирмы предпочитают именно нашу продукцию.
            </p>
          </div>
          <div class="left" style="width:200px;">
            <p>
              Надёжная фирма, в 2013 году получила сертификат.
            </p>
          </div>
          <div class="left" style="width:200px;">
            <p>
              Играет ключевую роль в IT.
            </p>
          </div>
        </div>
      </div>
      <footer id="footer"></footer>
    </div>
  </body>
</html>


Результат:


Результат, если уменьшить размер браузера:

Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение
 

Перейти на