worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили: • install_synology_dokuwiki • sample_html5_and_dinamic_page
software:development:demo:cms:ucms:application_template:social_network

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
software:development:demo:cms:ucms:application_template:social_network [2026/03/08 08:08] – создано VladPolskiysoftware:development:demo:cms:ucms:application_template:social_network [2026/03/09 21:09] (текущий) – VladPolskiy
Строка 1: Строка 1:
 ====== 11.4. Шаблон приложения sns (социальная сеть) ====== ====== 11.4. Шаблон приложения sns (социальная сеть) ======
-Шаблон социальной сити в синих тонах+Шаблон социальной сити в синих тонах (pigeon - голубь) \\   
 +шаблоны главная\\   
 +{{:software:development:demo:cms:ucms:application_template:golube_1.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:golube_2.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:golube_3.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:golube_4.jpg?100|}} 
 +\\  либо \\   
 +Шаблон социальной сити в синих тонах (в кадре - in the frame) \\   
 +{{:software:development:demo:cms:ucms:application_template:photo_plenka_1.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:photo_plenka_2.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:photo_plenka_3.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:photo_plenka_4.jpg?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:in_iframe_5.png?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:in_iframe_1.png?100|}} 
 +{{:software:development:demo:cms:ucms:application_template:in_iframe_6.png?100|}} 
 +<note shadow> 
 +{{:software:development:demo:cms:ucms:application_template:social_screenshot_5.png?|}} 
 +</note> 
 + 
 +<code html 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> 
 +    <link 
 +      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" 
 +      rel="stylesheet" 
 +      type="text/css" /> 
 +    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--> 
 +    <!--[if lt IE 9]> 
 +      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
 +    <![endif]--> 
 + <!-- блок стилей css --> 
 +<style> 
 +html { 
 +    width: 100%; /* Ширина 100% */ 
 +    margin: 0; 
 +    padding: 0; 
 +} 
 +body { 
 + 
 + width: 960px; /* Задает ширину 960px от вьюпорта */ 
 + max-width: 90%; /* Но не шире 90% экрана */ 
 + margin: 0 auto; /* Центрирует контент */ 
 + box-sizing: border-box; /* Учитывает padding внутри ширины */ 
 + 
 +} 
 + 
 +.user_profile { 
 +  display: flex; 
 +  flex-direction: column; 
 + 
 +} 
 + 
 +.user_profile_preload { 
 +  background-position: center; /* Центрирование */ 
 +  width: 100%; 
 +  height: 250px; 
 + 
 + 
 + object-fit: cover; /* Ключевое свойство: обрезка с сохранением пропорций */ 
 + 
 + 
 +} 
 + 
 + 
 + 
 +.user_profile_images { 
 +  position: relative; /* Для позиционирования наложения */ 
 +  top: -75px; /* Отступ сверху */ 
 +  left: 75px; /* Отступ слева */ 
 +  z-index: 10; /* Поверх базовой картинки */ 
 +  width: 50px; /* Размер наложения */ 
 +  width: 150px; 
 +  height: 150px; 
 +  overflow: hidden; /* Обрезает все, что выходит за круг */ 
 +  border-radius: 50%; /* Делает контейнер круглым [1] */ 
 +  border: 3px solid #fff; 
 +} 
 + 
 +.user_profile_nav { 
 +  background-position: center; /* Центрирование */ 
 +  width: 100%; 
 +  height: 92px; 
 + 
 +} 
 + 
 +.user_profile_name {    
 +  background-position: center; /* Центрирование */ 
 + 
 +  height: 60px; 
 +  line-height: 60px; /* Высота строки равна высоте блока */ 
 +  font-family: "Times New Roman", Times, serif; 
 +  font-weight: bold;       /* Жирный шрифт */ 
 +  font-style: italic;   /* Делает шрифт наклонным (курсив) */ 
 +  color: #0866FF; /* основной синий цвет */ 
 +  font-size: 40px; /* Размер шрифта 40 пикселей */ 
 +  padding-left: 250px; /* Отступ 250px слева */ 
 +   
 + 
 +} 
 +.user_profile_navbar { 
 +  background-position: center; /* Центрирование */ 
 +  height: 30px; 
 +  line-height: 30px; /* Высота строки равна высоте блока */ 
 +  font-family: "Times New Roman", Times, serif; 
 +  font-weight: bold;       /* Жирный шрифт */ 
 +  font-style: italic;   /* Делает шрифт наклонным (курсив) */ 
 +  color: #0866FF; /* основной синий цвет */ 
 +  font-size: 15px; /* Размер шрифта 20 пикселей */ 
 +  padding-left: 250px; /* Отступ 250px слева */   
 +   
 + 
 +} 
 + 
 +.nav-list { 
 + 
 +  display: flex; /* Горизонтальное расположение */ 
 +  list-style-type: none; /* Убираем маркеры списка */ 
 +  padding: 0; 
 +  margin: 0; 
 +  gap: 20px; /* Расстояние между пунктами */ 
 +} 
 + 
 +.nav-list a { 
 +  text-decoration: none; /* Убираем стандартное подчеркивание */ 
 +  display: block; 
 +  transition: border-color 0.3s; /* Плавный эффект */ 
 +  border-bottom: 2px solid transparent; /* Линия прозрачна по умолчанию */ 
 +} 
 + 
 +.nav-list a:hover { 
 +  border-bottom: 2px solid #0866FF; /* Подчеркивание при наведении */ 
 +} 
 + 
 +.nav-list a.active { 
 +  border-bottom: 2px solid #0866FF; 
 +} 
 +/* Конец блока  */ 
 + 
 +.user_block_content { 
 +    display: grid; 
 +    grid-template-columns: 30% 70%; /* Две колонки 30% 70%; */ 
 +    gap: 10px; 
 + 
 + 
 +} 
 +.user_block_sadebar { 
 + 
 + 
 +} 
 + 
 +.user_block_sadebar_info { 
 + 
 +    /* Светло-серый бордюр 1px */ 
 +  border: 1px solid #dcdcdc;  
 +  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ 
 +  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 5px; 
 +  /* Отступы внутри блока */ 
 + 
 +  /* Цвет фона, чтобы блок не был прозрачным */ 
 +  background-color: #fff; 
 +  margin-top: 10px; — /* отступ сверху */ 
 +  margin-bottom: 10px; — /* отступ снизу */ 
 +} 
 + 
 +.user_block_sadebar_info_paragraph { 
 +  font-family: "Times New Roman", Times, serif; 
 +  font-weight: bold;       /* Жирный шрифт */ 
 +  font-style: italic;   /* Делает шрифт наклонным (курсив) */ 
 +  color: #0866FF; /* основной синий цвет */ 
 +  font-size: 15px; /* Размер шрифта 15 пикселей */ 
 +  padding-left: 10px; /* Отступ 10px слева */   
 + 
 +} 
 +.user_block_sadebar_info_field { 
 +  padding-left: 20px; 
 +} 
 + 
 + 
 + 
 +/* Блок фото */ 
 + 
 +.user_block_sadebar_photo { 
 +    /* Светло-серый бордюр 1px */ 
 +  border: 1px solid #dcdcdc;  
 +  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ 
 +  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 5px; 
 +  /* Отступы внутри блока */ 
 + 
 +  /* Цвет фона, чтобы блок не был прозрачным */ 
 +  background-color: #fff; 
 +  margin-top: 10px; — /* отступ сверху */ 
 +  margin-bottom: 10px; — /* отступ снизу */ 
 +} 
 + 
 +.user_block_sadebar_photo_paragraph { 
 +  font-family: "Times New Roman", Times, serif; 
 +  font-weight: bold;       /* Жирный шрифт */ 
 +  font-style: italic;   /* Делает шрифт наклонным (курсив) */ 
 +  color: #0866FF; /* основной синий цвет */ 
 +  font-size: 15px; /* Размер шрифта 15 пикселей */ 
 +  padding-left: 10px; /* Отступ 10px слева */   
 + 
 +} 
 + 
 +.user_block_sadebar_photo_field { 
 + 
 + display: grid; 
 +  grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */ 
 +  gap: 10px; /* Отступы между блоками */ 
 +  padding: 10px; 
 + 
 + 
 +} 
 + 
 + 
 + 
 +.photo-item { 
 +} 
 + 
 +.photo-item img{ 
 +width: 100%;  
 +aspect-ratio: 1 / 1; /* Высота равна ширине */  
 +object-fit: cover; 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 3px; 
 +} 
 + 
 + 
 +/* Блок видео */ 
 + 
 + 
 +.user_block_sadebar_video { 
 +    /* Светло-серый бордюр 1px */ 
 +  border: 1px solid #dcdcdc;  
 +  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ 
 +  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 5px; 
 +  /* Отступы внутри блока */ 
 + 
 +  /* Цвет фона, чтобы блок не был прозрачным */ 
 +  background-color: #fff; 
 +  margin-top: 10px; — /* отступ сверху */ 
 +  margin-bottom: 10px; — /* отступ снизу */ 
 +} 
 + 
 +.user_block_sadebar_video_paragraph { 
 +  font-family: "Times New Roman", Times, serif; 
 +  font-weight: bold;       /* Жирный шрифт */ 
 +  font-style: italic;   /* Делает шрифт наклонным (курсив) */ 
 +  color: #0866FF; /* основной синий цвет */ 
 +  font-size: 15px; /* Размер шрифта 15 пикселей */ 
 +  padding-left: 10px; /* Отступ 10px слева */   
 + 
 +} 
 + 
 +.user_block_sadebar_video_field { 
 + 
 + display: grid; 
 +  grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */ 
 +  gap: 10px; /* Отступы между блоками */ 
 +  padding: 10px; 
 + 
 + 
 +} 
 + 
 + 
 + 
 +.video-item { 
 +} 
 + 
 +.video-item video{ 
 +width: 100%;  
 +aspect-ratio: 1 / 1; /* Высота равна ширине */  
 +object-fit: cover; 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 3px; 
 +} 
 + 
 + 
 + 
 + 
 +/*Блок контента в правой части*/ 
 + 
 +.user_block_content_main { 
 +    /* Светло-серый бордюр 1px */ 
 +  border: 1px solid #dcdcdc;  
 +  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */ 
 +  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 5px; 
 +  /* Отступы внутри блока */ 
 + 
 +  /* Цвет фона, чтобы блок не был прозрачным */ 
 +  background-color: #fff; 
 +  margin-top: 10px; — /* отступ сверху */ 
 +  margin-bottom: 10px; — /* отступ снизу */ 
 +   
 +} 
 + 
 +.user_block_content_header { 
 +  height: 60px; 
 + 
 + 
 + 
 +  font-family: "Times New Roman", Times, serif; 
 +  font-weight: bold;       /* Жирный шрифт */ 
 +  font-style: italic;   /* Делает шрифт наклонным (курсив) */ 
 +  color: #0866FF; /* основной синий цвет */ 
 +  font-size: 20px; /* Размер шрифта 20 пикселей */ 
 +  padding-left: 80px; /* Отступ 80px слева */  
 + 
 + 
 + 
 +} 
 + 
 +.user_profile_images_small { 
 +  position: relative; /* Для позиционирования наложения */ 
 +  top: -42px; /* Отступ сверху */ 
 +  left: -70px; /* Отступ слева */ 
 +  z-index: 20; /* Поверх базовой картинки */ 
 +  width: 50px; /* Размер наложения */ 
 +  height: 50px; 
 +  overflow: hidden; /* Обрезает все, что выходит за круг */ 
 +  border-radius: 50%; /* Делает контейнер круглым */ 
 + 
 +} 
 + 
 + 
 +.user_block_content_field { 
 +  position: relative; /* Для позиционирования наложения */ 
 +  padding-left: 10px; /* Отступ 10px слева */  
 +} 
 + 
 +.user_block_content_field img{ 
 +width: 98%;  
 +  height: 250px; 
 +object-fit: cover; 
 +  /* Дополнительно: скругление углов */ 
 +  border-radius: 3px; 
 + 
 + 
 + 
 + 
 +} 
 + 
 + 
 + 
 + 
 + 
 +</style> 
 +  </head> 
 +  <body> 
 +    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --> 
 +    <header> 
 +     </header> 
 +    <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню 
 +         фото профиля, логотип приложени, имя пользователя -->  
 + <div class = "user_profile"> 
 +      <!-- Контейнер изображения (фона) профиля -->  
 + <div class = "user_profile_preload">  
 + <img src="./images/moscow_city.jpg" alt="preload" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 5px 5px;"> 
 + <!-- Контейнер изображения профиля -->  
 + <div class = "user_profile_images">  
 +        <img src="./images/photographer.jpg" alt="photo" class="circle-img"> 
 + 
 + </div>      
 + 
 + </div>  
 + 
 +      <!-- Контейнер имя профиля -->  
 + 
 +  
 + <div class = "user_profile_nav">  
 +  
 +      <!-- Контейнер имя профиля -->  
 + <div class = "user_profile_name">  
 + Alisa Sokolova 
 + </div>  
 +  
 +      <!-- Контейнер меню профиля -->  
 + <div class = "user_profile_navbar">  
 + <nav class="navbar"> 
 +  <ul class="nav-list"> 
 +    <li><a class="active" href="#">Публикации</a></li> 
 +    <li><a href="#">Информация</a></li> 
 +    <li><a href="#">Видео</a></li> 
 +    <li><a href="#">Фото</a></li> 
 +  </ul> 
 +</nav> 
 + </div>  
 + </div>  
 +  
 + </div> 
 +    <!-- Блок контента и сейдбара --> 
 + <div class = "user_block_content">  
 +  
 + <div class = "user_block_sadebar">  
 + <div class = "user_block_sadebar_info">  
 + <div class = "user_block_sadebar_info_paragraph">  
 + Краткая информация 
 + </div> 
 + <div class = "user_block_sadebar_info_field">  
 + сайт:</br> 
 + адрес:</br> 
 + почта: 
 + </div> 
 + </div> 
 +  
 +  
 + <div class = "user_block_sadebar_photo">  
 + <div class = "user_block_sadebar_photo_paragraph"> 
 + Фото  
 + </div> 
 + <div class = "user_block_sadebar_photo_field"> 
 +  <div class="photo-item"><img src="./images/photo_1.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_2.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_3.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_4.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_5.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_6.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_7.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_8.jpg" alt="preload"></div> 
 +  <div class="photo-item"><img src="./images/photo_9.jpg" alt="preload"></div> 
 + </div> 
 +  
 + </div> 
 +  
 +  
 +  
 + <div class = "user_block_sadebar_video">  
 + <div class = "user_block_sadebar_video_paragraph"> 
 + Видео  
 + </div> 
 +  
 +  
 + <div class = "user_block_sadebar_video_field"> 
 +  <div class="video-item"><video src="./images/video_1.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_2.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_3.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_4.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_5.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_6.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_7.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_8.mp4" alt="preload"></div> 
 +  <div class="video-item"><video src="./images/video_9.mp4" alt="preload"></div> 
 + </div>  
 +  
 +  
 +  
 +  
 + </div> 
 + </div>  
 +  
 + <div class = "user_block_content_main">  
 + 
 +                    <!-- Блок закрепленных новостей --> 
 + <div class = "user_block_content_main_fixed"> 
 + <div class = "user_block_content_header">  
 + Alisa Sokolova  </br> 
 + 26.02.2026 
 + <div class = "user_profile_images_small">  
 +        <img src="./images/photographer_small.jpg" alt="photo" class="circle-img"> 
 + </div> 
 + </div>  
 + 
 + <div class = "user_block_content_field">  
 + Приятно, граждане, наблюдать, как тщательные  
 + исследования конкурентов набирают популярность  
 + среди определенных слоев населения 
 + <img src="./images/avia.jpg" alt="photo"> 
 + </div> 
 + </div>  
 + <!-- Конец блока закрепленных новостей --> 
 +  
 +                    <!-- Блок последних новостей --> 
 + <div class = "user_block_content_main_last"> 
 + <div class = "user_block_content_header">  
 + Alisa Sokolova  </br> 
 + 26.02.2026 
 + <div class = "user_profile_images_small">  
 +        <img src="./images/photographer_small.jpg" alt="photo" class="circle-img"> 
 + </div> 
 + </div>  
 + 
 + <div class = "user_block_content_field">  
 + Приятно, граждане, наблюдать, как тщательные  
 + исследования конкурентов набирают популярность  
 + среди определенных слоев населения 
 + <img src="./images/avia.jpg" alt="photo"> 
 + </div> 
 + </div>  
 + <!-- Конец блока последних новостей --> 
 +  
 +  
 +  
 +  
 +  
 +  
 +  
 + </div>  
 +  
 +  
 + </div>  
 +  
 +  
 +  
 +    <!-- Конец блока контента и сейдбара --> 
 + 
 +    <!-- Здесь основное содержимое нашей страницы --> 
 +    <main> 
 +      <!-- Она содержит статью --> 
 +      <article> 
 +    </article> 
 +      <!-- Дополнительный контент также может быть вложен в основной контент --> 
 +      <aside> 
 + 
 +      </aside> 
 +    </main> 
 +    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --> 
 +    <footer> 
 +      <p>©2026 Sample HTML5 Page. All rights reserved.</p> 
 +    </footer> 
 +    <!-- Optional: Link to a JavaScript file --> 
 +    <script> 
 + 
 + </script> 
 +  </body> 
 +</html> 
 +</code> 
 + 
 +===== Дополнения и Файлы ===== 
 +{{ :software:development:demo:cms:ucms:application_template:social.rar | Файлы шаблона}}
  
software/development/demo/cms/ucms/application_template/social_network.1772946536.txt.gz · Последнее изменение: — VladPolskiy
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki