software:development:demo:cms:ucms:appendix:appendix_css
CSS
- sample.html
<!doctype html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!-- запрет автоперевода перевода google translate --> <meta name="google" content="notranslate"> <!-- отображение файктической ширины экрана для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample.html</title> <!-- блок стилей css --> <style> p { color: green; } #p01 { color: blue; } p.error { color: red; } .error { color: yellow; } </style> </head> <body> <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --> <header> </header> <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню фото профиля, логотип приложени, имя пользователя --> <p>Это параграф</p> <p>Это тоже параграф.</p> <p id="p01">Я отличаюсь.</p> <p class="error">Я также отличаюсь.</p> <a class="error">и я также отличаюсь.</a> <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p> <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --> <footer> <p>©2026 Sample HTML5 Page. All rights reserved.</p> </footer> <!-- Optional: Link to a JavaScript file --> <script> </script> </body> </html>
CSS: Установка ширины div как 100% минус n пикселей
- sample.html
<!doctype html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <!-- запрет автоперевода перевода google translate --> <meta name="google" content="notranslate"> <!-- отображение файктической ширины экрана для адаптивного дизайна --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample.html</title> <!-- блок стилей css --> <style> body { margin: 0; padding: 0; } .container { /* Ширина: 100% от экрана минус 1px */ width: calc(100vw - 2px); /* Высота: 100% от экрана минус 1px */ height: calc(100vh - 2px); border: 1px solid #3498db; /* Синяя рамка 1px */ border-radius: 5px; } </style> </head> <body> <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --> <header> </header> <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню фото профиля, логотип приложени, имя пользователя --> <div class = "container"> </div> <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта <footer> <p>©2026 Sample HTML5 Page. All rights reserved.</p> </footer> --> <!-- Optional: Link to a JavaScript file --> <script> </script> </body> </html>
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/appendix/appendix_css.txt · Последнее изменение: — VladPolskiy