Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
software:development:demo:responsive_site_layout_book [2024/03/08 21:14] – [14. Архив файлов примера] 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:book.rar|rar arhiv book 409kb}} | {{:software:development:demo:book.rar|rar arhiv book 409kb}} |