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

Веб дизайн

810  
uscheswoi_82 коренной житель17.07.23 16:58
uscheswoi_82
17.07.23 16:58 

Наш первый сайт index.html: 

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок сайта</title>
  </head>
  <body>
    <p>Мой первый сайт</p>
  </body>
</html>


Результат:

Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение Дневник тяжелобольного инвалида
#1 
uscheswoi_82 коренной житель11.09.23 07:36
uscheswoi_82
NEW 11.09.23 07:36 
в ответ uscheswoi_82 17.07.23 16:58, Последний раз изменено 11.09.23 08:22 (uscheswoi_82)

Теперь давайте улучшим наш сайт. Добавим три колонки, которые при уменьшение размера окна веб браузера будут переноситься на следующую строку:


Спомощью вот этой строки, мы заставим браузер при уменьшение размера окна веб браузера, перенести контент на следующую строку: 

.clearfix:after { content: ""; clear:both; display:table; }


Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его: 

.left { float:left; }


Вот полный код 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; }
    </style>
    <title>Заголовок сайта</title>
  </head>
  <body>
    <div id="content">
      <div class="clearfix">
         <div class="left" style="width:200px;">
           <p>Тут первая колонка! Это мой первый сайт!</p>
         </div>
         <div class="left" style="width:200px;">
           <p>Тут вторая колонка! Красиво неправдо ли?</p>
         </div>
         <div class="left" style="width:200px;">
           <p>Тут третья колонка! Какой хороший день!</p>
         </div>
      </div>
    </div>
  </body>
</html>

А вот результат:


Если сожмём окно веб браузера, третья колонка перенесётся автоматически вниз:

Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение Дневник тяжелобольного инвалида
#2 
uscheswoi_82 коренной житель11.09.23 09:58
uscheswoi_82
NEW 11.09.23 09:58 
в ответ uscheswoi_82 11.09.23 07:36, Последний раз изменено 12.09.23 05:03 (uscheswoi_82)

Теперь давайте забудим на время что писали выше, и сделаем меню. Вот HTML-код меню: 

<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>


Получиться что-то типа такого:

Теперь нужно отформатировать CSS.


Вот полный код 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 {}
       #container { margin-left:auto; 
                    margin-right:auto;
                    margin-top:80px;
                    margin-bottom:150px;
                    height:700px;
                    width:80%; 
                    border:1px solid #000;
       }
       .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">
      </div>
      <footer id="footer"></footer>
    </div>
  </body>
</html>


Вот результат:

Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение Дневник тяжелобольного инвалида
#3 
uscheswoi_82 коренной житель12.09.23 05:41
uscheswoi_82
NEW 12.09.23 05:41 
в ответ uscheswoi_82 11.09.23 09:58

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


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

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>


Результат:


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

Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение Дневник тяжелобольного инвалида
#4 
uscheswoi_82 коренной житель12.09.23 06:18
uscheswoi_82
NEW 12.09.23 06:18 
в ответ uscheswoi_82 12.09.23 05:41

Теперь давайте перекрасим. Для этого в гугле наберите слово 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>


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


Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение Дневник тяжелобольного инвалида
#5 
 
Предыдущая Ветвь назад Просмотреть ВСЕ Ветви список вперед Следующая Ветвь