software:development:demo:responsive_site_layout_notebook
Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
software:development:demo:responsive_site_layout_notebook [2024/03/10 18:51] – [2. Блок header] vladpolskiy | software:development:demo:responsive_site_layout_notebook [2024/03/10 23:19] (текущий) – [Ссылки и Дополнения] vladpolskiy | ||
---|---|---|---|
Строка 1: | Строка 1: | ||
======Адаптивная вёрстка сайта (notebook)====== | ======Адаптивная вёрстка сайта (notebook)====== | ||
Адаптивная верстка сайта (от английского, | Адаптивная верстка сайта (от английского, | ||
- | {{: | + | {{: |
Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software: | Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software: | ||
+ | |||
+ | =====Пример сайта===== | ||
+ | Пример сайта выполненного в [[https:// | ||
+ | |||
+ | < | ||
+ | <iframe height=" | ||
+ | </ | ||
+ | </ | ||
=====Шаблон страницы при верстки===== | =====Шаблон страницы при верстки===== | ||
Строка 76: | Строка 84: | ||
- **%%</ | - **%%</ | ||
:# | :# | ||
+ | ====2. Общие CSS-стили==== | ||
- | ====2. Блок header ==== | + | <code css CSS> |
+ | /* Общие стили | ||
+ | ----------------------------------------- */ | ||
+ | html, body, div, span, object, iframe, | ||
+ | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
+ | abbr, address, cite, code, | ||
+ | del, dfn, em, img, ins, kbd, q, samp, | ||
+ | small, strong, sub, sup, var, | ||
+ | b, i, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td, | ||
+ | article, aside, canvas, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section, summary, | ||
+ | time, mark, audio, video { | ||
+ | margin:0; | ||
+ | padding: | ||
+ | border:0; | ||
+ | outline: | ||
+ | font-size: | ||
+ | vertical-align: | ||
+ | background: | ||
+ | article, aside, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section { | ||
+ | display: | ||
+ | nav ul { list-style: | ||
+ | blockquote, q { quotes: | ||
+ | blockquote: | ||
+ | q:before, q:after { content:''; | ||
+ | a { margin:0; padding:0; font-size: | ||
+ | ins { background-color:# | ||
+ | mark { background-color:# | ||
+ | del { text-decoration: | ||
+ | abbr[title], | ||
+ | table { border-collapse: | ||
+ | hr { display: | ||
+ | input, select { vertical-align: | ||
+ | a { | ||
+ | border-bottom: | ||
+ | color: #333333; | ||
+ | text-decoration: | ||
+ | # | ||
+ | |||
+ | /* Конец и сброс стиля */ | ||
+ | body { | ||
+ | background: | ||
+ | font-family: | ||
+ | | ||
+ | | ||
+ | | ||
+ | p {padding: 0 0 1.3em;} | ||
+ | h1, h2 , h3, h4, h5, h6 { | ||
+ | display: | ||
+ | color:# | ||
+ | line-height: | ||
+ | font-family: | ||
+ | text-shadow: | ||
+ | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: | ||
+ | h1 {letter-spacing: | ||
+ | h2 { | ||
+ | font-size: | ||
+ | margin:10px 0 15px; | ||
+ | font-weight: | ||
+ | } | ||
+ | a { | ||
+ | color:# | ||
+ | border-bottom: | ||
+ | text-decoration: | ||
+ | } | ||
+ | a:hover { | ||
+ | color:# | ||
+ | border-bottom: | ||
+ | } | ||
+ | |||
+ | /* стиль внешней оболочки всей видимой страницы Outer-Wrapper | ||
+ | ----------------------------------------- */ | ||
+ | # | ||
+ | width: | ||
+ | margin:10px auto 0; | ||
+ | padding: | ||
+ | text-align: | ||
+ | font: normal normal 100% Georgia, Serif; | ||
+ | } | ||
+ | </ | ||
+ | ====3. Блок header ==== | ||
В данный блок поместим логотип, | В данный блок поместим логотип, | ||
Строка 145: | Строка 238: | ||
- **%%< | - **%%< | ||
:# | :# | ||
- | ====3. Стили блока header==== | + | ====4. Стили блока header==== |
<code css CSS> | <code css CSS> | ||
- | /* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ | + | /* стили |
- | /* Outer-Wrapper | + | |
----------------------------------------- */ | ----------------------------------------- */ | ||
- | #outer-wrapper { | + | #header-wrapper { |
- | width:922px; | + | background:url(../ |
- | margin:10px auto 0; | + | height: |
+ | padding: | ||
+ | position: | ||
+ | # | ||
+ | background-position: | ||
+ | margin-left: auto; | ||
+ | margin-right: | ||
+ | #header { | ||
+ | margin: 0px; | ||
+ | color:# | ||
+ | #header h1 { | ||
+ | margin: 0px; | ||
+ | font-family: | ||
+ | font-weight: | ||
+ | font-size: | ||
+ | color:# | ||
+ | text-shadow: | ||
+ | letter-spacing: | ||
+ | padding:0; | ||
+ | line-height: | ||
+ | #header a { | ||
+ | color:# | ||
+ | text-decoration: | ||
+ | #header a:hover { color:# | ||
+ | |||
+ | /* стили слогана | ||
+ | ----------------------------------------- */ | ||
+ | #header .description { | ||
+ | margin: 0px; | ||
padding: | padding: | ||
- | text-align:left; | + | font-size: |
- | font: normal normal 100% Georgia, Serif; } | + | color:# |
+ | text-transform:uppercase; | ||
+ | font-family:Arial, Helvetica, sans-serif; } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* стили кнопка навигации | ||
+ | ----------------------------------------- */ | ||
+ | |||
+ | .topnav #myLinks { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | cursor: pointer; | ||
+ | height: | ||
+ | border-radius: | ||
+ | right: 136px; | ||
+ | top: 31px; /* отступ сверху кнопки */ | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .topnav a { | ||
+ | float: right; | ||
+ | padding: 10px 12px; / | ||
+ | font-size: 20px; / | ||
+ | border-radius: | ||
+ | background-color:# | ||
+ | } | ||
+ | |||
+ | /* настройка кнопки меню */ | ||
+ | .openbtn { | ||
+ | position: absolute; | ||
+ | background:# | ||
+ | cursor: pointer; | ||
+ | width: 50px; /* ширина кнопки */ | ||
+ | height: | ||
+ | border-radius: | ||
+ | right: 90px; /* отступ справа кнопки */ | ||
+ | top: 31px; /* отступ сверху кнопки */ | ||
+ | } | ||
+ | |||
+ | /* настройка полос кнопки меню */ | ||
+ | .openbtn span{ | ||
+ | display: inline-block; | ||
+ | position: absolute; | ||
+ | height: | ||
+ | width: 30px; /* длина полосы */ | ||
+ | background: #fff; /* цвет полосы */ | ||
+ | left: 10px; /* отступ от края кнопки слева */ | ||
+ | } | ||
+ | |||
+ | /* span (1)расположение первой полосы относитель верхней границы кнопки */ | ||
+ | .openbtn span: | ||
+ | top: | ||
+ | } | ||
+ | |||
+ | /* span (2)расположение второй полосы относитель верхней границы кнопки */ | ||
+ | .openbtn span: | ||
+ | top:20px; | ||
+ | } | ||
+ | |||
+ | /* span (3)расположение третей полосы относитель верхней границы кнопки */ | ||
+ | .openbtn span: | ||
+ | top:30px; | ||
+ | } | ||
</ | </ | ||
+ | ====5. Код javascript кнопки меню==== | ||
+ | В данный блок поместим логотип, | ||
+ | |||
+ | <code javascript JavaScript> | ||
+ | function myFunction() { | ||
+ | var x = document.getElementById(" | ||
+ | if (x.style.display === " | ||
+ | x.style.display = " | ||
+ | } else { | ||
+ | x.style.display = " | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | #: | ||
+ | - **%%< | ||
+ | - **%%<div id=' | ||
+ | :# | ||
+ | |||
+ | ===Пример верхнего колонтитула=== | ||
+ | {{: | ||
=====Ссылки и Дополнения===== | =====Ссылки и Дополнения===== | ||
Строка 164: | Строка 369: | ||
* {{ : | * {{ : | ||
* {{ : | * {{ : | ||
+ | * {{ : |
software/development/demo/responsive_site_layout_notebook.1710085889.txt.gz · Последнее изменение: 2024/03/10 18:51 — vladpolskiy