software:development:demo:cms:ucms:sample_php_page_sample
Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
| software:development:demo:cms:ucms:sample_php_page_sample [2026/02/08 18:04] – [4.3. Файл sample.html] VladPolskiy | software:development:demo:cms:ucms:sample_php_page_sample [2026/02/09 18:19] (текущий) – [4.3. Файл sample.html] VladPolskiy | ||
|---|---|---|---|
| Строка 5: | Строка 5: | ||
| ====== 4.3. Файл sample.html ====== | ====== 4.3. Файл sample.html ====== | ||
| * [[software: | * [[software: | ||
| - | * [[software: | + | * [[software: |
| - | * [[software: | + | * [[software: |
| * [[software: | * [[software: | ||
| * [[software: | * [[software: | ||
| - | * [[software: | + | * [[software: |
| * [[software: | * [[software: | ||
| * [[software: | * [[software: | ||
| * [[software: | * [[software: | ||
| * [[software: | * [[software: | ||
| - | * [[software: | + | * [[software: |
| - | * [[software: | + | * [[software: |
| - | * [[software: | + | * [[software: |
| + | * [[software: | ||
| + | * [[software: | ||
| ===== Введение ===== | ===== Введение ===== | ||
| Строка 27: | Строка 29: | ||
| ===== Файл sample.html ===== | ===== Файл sample.html ===== | ||
| Ниже приведен код страницы sample.html | Ниже приведен код страницы sample.html | ||
| - | < | + | < |
| < | < | ||
| <html lang=" | <html lang=" | ||
| Строка 41: | Строка 43: | ||
| rel=" | rel=" | ||
| type=" | type=" | ||
| - | <link rel=" | ||
| <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> | <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> | ||
| <!--[if lt IE 9]> | <!--[if lt IE 9]> | ||
| Строка 53: | Строка 54: | ||
| padding: 0; | padding: 0; | ||
| } | } | ||
| - | |||
| body { | body { | ||
| width: 90%; /* Задает ширину 90% от вьюпорта */ | width: 90%; /* Задает ширину 90% от вьюпорта */ | ||
| Строка 59: | Строка 59: | ||
| box-sizing: border-box; /* Учитывает padding внутри ширины */ | box-sizing: border-box; /* Учитывает padding внутри ширины */ | ||
| } | } | ||
| - | |||
| h, p { | h, p { | ||
| margin: 10px; | margin: 10px; | ||
| padding: 0px 10px; /* Убирает внутренние отступы */ | padding: 0px 10px; /* Убирает внутренние отступы */ | ||
| } | } | ||
| - | |||
| .navbar { | .navbar { | ||
| display: flex; | display: flex; | ||
| Строка 74: | Строка 72: | ||
| border-radius: | border-radius: | ||
| } | } | ||
| - | |||
| ul { | ul { | ||
| list-style-type: | list-style-type: | ||
| Строка 83: | Строка 80: | ||
| display: flex; | display: flex; | ||
| } | } | ||
| - | |||
| ul li { | ul li { | ||
| float: left; | float: left; | ||
| border-right: | border-right: | ||
| } | } | ||
| - | |||
| ul li: | ul li: | ||
| border-right: | border-right: | ||
| } | } | ||
| - | |||
| ul li a { | ul li a { | ||
| display: block; | display: block; | ||
| Строка 101: | Строка 95: | ||
| text-decoration: | text-decoration: | ||
| } | } | ||
| - | |||
| ul li a: | ul li a: | ||
| background-color: | background-color: | ||
| } | } | ||
| - | |||
| ul li a.active { | ul li a.active { | ||
| background-color: | background-color: | ||
| } | } | ||
| - | |||
| .search-form { | .search-form { | ||
| display: flex; | display: flex; | ||
| } | } | ||
| - | |||
| .search-form input { | .search-form input { | ||
| background-color: | background-color: | ||
| Строка 123: | Строка 113: | ||
| border: none; | border: none; | ||
| } | } | ||
| - | |||
| .search-form-button { | .search-form-button { | ||
| /* top, right, bottom, left */ | /* top, right, bottom, left */ | ||
| Строка 134: | Строка 123: | ||
| cursor: pointer; | cursor: pointer; | ||
| } | } | ||
| - | |||
| ul li .search-form-button: | ul li .search-form-button: | ||
| background-color: | background-color: | ||
| } | } | ||
| - | |||
| ul li .search-form-button.active { | ul li .search-form-button.active { | ||
| background-color: | background-color: | ||
| Строка 214: | Строка 201: | ||
| </ | </ | ||
| </ | </ | ||
| + | Не стоит пугаться, | ||
| + | <note shadow> | ||
| + | Хотя, нет, стоит...\\ | ||
| Большенство просто пролистает этот код, так как его очень не удобно читать. В примере все заключенно в тело одной страницы и для создания дополнительных страниц, | Большенство просто пролистает этот код, так как его очень не удобно читать. В примере все заключенно в тело одной страницы и для создания дополнительных страниц, | ||
| \\ | \\ | ||
| Строка 225: | Строка 214: | ||
| Но, все по порядку... | Но, все по порядку... | ||
| \\ | \\ | ||
| - | Для начала вынисем стили и скрипты в отденьные директории, | + | Для начала вынисем стили и скрипты в отденьные директории |
| \\ | \\ | ||
| - | И начнем мы с файла | + | И начнем мы с файла |
software/development/demo/cms/ucms/sample_php_page_sample.1770563045.txt.gz · Последнее изменение: — VladPolskiy