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

Веб дизайн

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

Теперь давайте перекрасим. Для этого в гугле наберите слово colorpicker:

Это для фона сайта:


Это для фона выбранного меню:


Фон всего сайта синий:

body { background-color:#3271a8; }


Фон контейнера белый: 

#container { background-color:#fff; }


Фон меню синий: 

.menu { background-color:#3271a8;
        border:1px solid #3271a8;
      }


При выделение мышью меню, фон становится светлосиний: 

li a:hover { color:#fff;
             background-color:#4094de; 
           }


Выделеное меню фон тёмносиний: 

li .active { color:#fff;
             background-color:#12528a;
           }


Полный код index.html:

<!DOCTYPE html>
<html>
  <head>
    <style>
      * { padding:0; margin:0; }
      body { background-color:#3271a8; } 
      .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 #eee;
                   box-shadow:0px 0px 12px #999;
                   background-color:#fff; 
      }
      .menu { background-color:#3271a8;
              border:1px solid #3271a8;
              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:#4094de;
      }
      li .active { color:#fff;
                   background-color:#12528a;
      }
    </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>


Результат нашего сайта:


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

Перейти на