worldwide open-source software

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

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

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

Различия

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

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

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
software:development:demo:cms:ucms:application_template:social_network [2026/03/08 14:06] – VladPolskiysoftware:development:demo:cms:ucms:application_template:social_network [2026/03/09 21:09] (текущий) – VladPolskiy
Строка 1: Строка 1:
 ====== 11.4. Шаблон приложения sns (социальная сеть) ====== ====== 11.4. Шаблон приложения sns (социальная сеть) ======
-Шаблон социальной сити в синих тонах (pigeon - голубь) +Шаблон социальной сити в синих тонах (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.1772967984.txt.gz · Последнее изменение: — VladPolskiy
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki