| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout_book [2024/03/08 21:05] – [1. Блок <head>] vladpolskiy | software:development:demo:responsive_site_layout_book [2024/03/08 21:19] (текущий) – [13. Код скрипта для мобильного меню] vladpolskiy |
|---|
| |
| |
| ====2. Блок header==== | |
| В блок заголовка <header> запишем следующие элементы блоков (контейнеров): логотип, кнопки меню и поиска по сайту, и открыв "Пояснительную записку блока <header>" разберем данный код: | |
| |
| <code html HTML> | |
| <header> | |
| <!--начало блока логотип/меню веб страницы--> | |
| <nav class="container"> | |
| <a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a> | |
| <div class="nav-toggle"><span></span></div> | |
| <form action="" method="get" id="searchform"> | |
| <input type="text" placeholder="search..."> | |
| <button type="submit"><i class="fa fa-search"></i></button> | |
| </form> | |
| <ul id="menu"> | |
| <li><a href="">Features</a></li> | |
| <li><a href="">Download</a></li> | |
| <li><a href="">Support</a></li> | |
| </ul> | |
| </nav> | |
| <!--конец блока логотип/меню веб страницы--> | |
| </header> | |
| </code> | |
| #:Пояснительную записку блока <header> | |
| - **%%<header>%%** <color #22b14c>- открывающий тег блока.</color> | |
| - **%%<nav class="container">%%** <color #22b14c>- начало нашего блока колонтитула.</color> | |
| - **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** <color #22b14c>- блок логотипа с указанием месторасположения иконки.</color> | |
| - **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** <color #22b14c>- блок кнопки показа/скрытия главного меню.</color> | |
| - **%%<form action="" method="get" id="searchform">%%** <color #22b14c>- начало блока формы поиска</color>. | |
| - **%%<input type="text" placeholder="search...">%%** <color #22b14c>- форма ввода текста поиска.</color> | |
| - **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** <color #22b14c>- кнопка-иконка поиска по сайту.</color> | |
| - **%%</form>%%** <color #22b14c>- закрывающий тег формы поиска.</color> | |
| - **%%<ul id="menu">%%** <color #22b14c>- блок главного меню.</color> | |
| - **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Features".</color> | |
| - **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Download".</color> | |
| - **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Support".</color> | |
| - **%%</ul>%%** <color #22b14c>- конец блок главного меню.</color> | |
| - **%%</nav>%%** <color #22b14c>- конец нашего блока колонтитула.</color> | |
| - **%%</header>%%** <color #22b14c>- закрывающий тег блока.</color> | |
| :# | |
| ====3. Блок main ==== | ====3. Блок main ==== |
| В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: | В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: |
| - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> | - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> |
| :# | :# |
| ====5. Блок <footer>==== | |
| В подвале страницы разместим информацию о копирайте и открыв "Пояснительную записку блока <footer>" разберем данный код: | |
| |
| <code html HTML> | |
| <!--начало контейнера подвал веб страницы--> | |
| <footer> | |
| <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div> | |
| </footer> | |
| <!--конец контейнера подвал веб страницы--> | |
| </body> | |
| </html> | |
| <!--конец веб страницы--> | |
| </code> | |
| #:Пояснительная записка блока <footer>: | |
| - **%%<footer>%%** <color #22b14c>- начало блока "подвал".</color> | |
| - **%%<div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>%%** <color #22b14c>- блок текста копирайта.</color> | |
| - **%%</footer>%%** <color #22b14c>- конец блока "подвал".</color> | |
| - **%%</body>%%** <color #22b14c>- конец блока хранения содержания веб-страницы (контента).</color> | |
| - **%%</html>%%** <color #22b14c>- закрывающий тег, является концам блока (контейнера), который заключает в себе все содержимое веб-страницы.</color> | |
| :# | |
| ====6. Общие CSS-стили==== | ====6. Общие CSS-стили==== |
| Все нижеприведенные стили вынесены в один внешний файл CSS. | Все нижеприведенные стили вынесены в один внешний файл CSS. |
| </code> | </code> |
| |
| ====9. Стили блока aside==== | |
| |
| <code css CSS> | |
| /* правый контейнер */ | |
| aside { | |
| width: 33%;/*ширина блока*/ | |
| float: right;/*элемент выравнивается по правой стороне*/ | |
| } | |
| /* блок для виджетов */ | |
| .widget { | |
| padding: 20px 15px;/* значение полей вокруг содержимого*/ | |
| background: #dcdcdc;/* цвет блока для виджетов */ | |
| font-size: 13px;/* размер шрифта элемента */ | |
| margin-bottom: 30px;/*отступ от нижнего края элемента*/ | |
| box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */ | |
| } | |
| .widget-title { | |
| font-size: 15px;/* размер шрифта элемента */ | |
| padding: 10px;/* значение полей вокруг содержимого*/ | |
| margin-bottom: 10px;/* отступ от рамки блоков */ | |
| text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ | |
| border: 2px solid #2f4f4f;/* цвет рамки категорий */ | |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */ | |
| } | |
| .widget-category-list li { | |
| border-bottom: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока категорий */ | |
| padding: 8px 0;/* значение полей вокруг содержимого*/ | |
| color: #2f4f4f;/* цвет текста количества постов в категории*/ | |
| font-style: arial; /* шрифт текста наименования постов в категории*/ | |
| } | |
| .widget-category-list li:last-child { | |
| border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/ | |
| } | |
| .widget-category-list li a { | |
| color: #2f4f4f;/* цвет текста наименований категорий постов*/ | |
| margin-right: 20px;/* отступ от текста наименований категорий постов */ | |
| font-style: normal;/*обычное начертание текста*/ | |
| } | |
| .widget-category-list li a:before { | |
| content: "\f105"; /* стрелки перед текстом наименований категорий постов*/ | |
| display: inline-block;/*элемент обтекает другими элементами страницы*/ | |
| font-family: 'FontAwesome';/*шрифты колекции иконок FontAwesome*/ | |
| margin-right: 10px;/*отступа от правого края элемента*/ | |
| color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/ | |
| } | |
| .widget-posts-list li { | |
| border-top: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока постов */ | |
| padding: 8px 0;/* значение полей вокруг содержимого*/ | |
| } | |
| .widget-posts-list li:nth-child(1) { | |
| border-top: none;/* цвет и размер полос разделителей блока постов отсутствует*/ | |
| } | |
| .post-image-small { | |
| width: 60%; /*размер - ширина картинки*/ | |
| float: left;/*положение картинки -элемент выравнивается по левой стороне*/ | |
| margin-right: 15px;/*отступ от правого края картинки*/ | |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */ | |
| } | |
| .widget-post-title { | |
| float: left;/*элемент выравнивается по левой стороне*/ | |
| } | |
| </code> | |
| |
| ====10. Стили блока footer==== | ====10. Стили блока footer==== |
| - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color> | - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color> |
| :# | :# |
| ====13. Код скрипта для мобильного меню==== | |
| Данный скрипт работает при ширине окна браузера менее 768px, откройте "Пояснительную записку" для понимания кода скрипта. | |
| |
| |
| <code javascript JS> | |
| $('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| }); | |
| </code> | |
| #: Пояснительная записка | |
| - **%%$('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> | |
| :# | |
| ====14. Архив файлов примера==== | ====14. Архив файлов примера==== |
| Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ | Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ |
| <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ | <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ |
| {{ :software:development:demo:code.rar |rar arhiv 71,8mb}} | {{:software:development:demo:book.rar|rar arhiv book 409kb}} |
