{"id":135538,"date":"2026-08-09T17:47:43","date_gmt":"2026-08-09T11:47:43","guid":{"rendered":"https:\/\/rcl-radio.ru\/?p=135538"},"modified":"2026-08-09T17:47:43","modified_gmt":"2026-08-09T11:47:43","slug":"%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%b5%d0%bc-%d0%b1%d0%b0%d0%b7%d0%be%d0%b2%d1%83%d1%8e-%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%82%d1%83%d1%80%d1%83-%d0%b8-%d1%81%d1%82%d0%b8%d0%bb%d0%b8","status":"publish","type":"post","link":"https:\/\/rcl-radio.ru\/?p=135538","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u0441\u0442\u0438\u043b\u0438"},"content":{"rendered":"<p><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\">\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043f\u0440\u043e\u0441\u0442\u043e\u0439,<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043d\u043e<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0440\u0430\u0431\u043e\u0447\u0438\u0439<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0448\u0430\u0431\u043b\u043e\u043d<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0434\u043b\u044f<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0431\u043b\u043e\u0433\u0430.<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u041e\u043d<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0443\u0436\u0435<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0432\u0451\u0440\u0441\u0442\u043a\u0443,<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0442\u0435\u0433\u0438<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0438<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\u00a0\u2014\u00a0\u0442\u043e,<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0447\u0442\u043e<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0440\u0435\u0430\u043b\u044c\u043d\u043e<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0432<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043f\u0435\u0440\u0432\u044b\u0445<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0411\u0435\u0437<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043b\u0438\u0448\u043d\u0435\u0439<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0442\u0435\u043e\u0440\u0438\u0438:<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0441\u043c\u043e\u0442\u0440\u0438\u043c<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043d\u0430<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043a\u043e\u0434<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0438<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0441\u0440\u0430\u0437\u0443<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c,<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0437\u0430<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0447\u0442\u043e<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u043a\u0430\u0436\u0434\u0430\u044f<\/span><span class=\"FuturisMarkdown-Word\" data-wrapped-word=\"true\"> \u0447\u0430\u0441\u0442\u044c.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-135539\" src=\"https:\/\/rcl-radio.ru\/wp-content\/uploads\/2026\/08\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2026-08-09-17-46-35.png\" alt=\"\" width=\"1175\" height=\"243\" srcset=\"https:\/\/rcl-radio.ru\/wp-content\/uploads\/2026\/08\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2026-08-09-17-46-35.png 1175w, https:\/\/rcl-radio.ru\/wp-content\/uploads\/2026\/08\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2026-08-09-17-46-35-500x103.png 500w, https:\/\/rcl-radio.ru\/wp-content\/uploads\/2026\/08\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2026-08-09-17-46-35-1024x212.png 1024w, https:\/\/rcl-radio.ru\/wp-content\/uploads\/2026\/08\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2026-08-09-17-46-35-200x41.png 200w, https:\/\/rcl-radio.ru\/wp-content\/uploads\/2026\/08\/\u0421\u043d\u0438\u043c\u043e\u043a-\u044d\u043a\u0440\u0430\u043d\u0430-\u043e\u0442-2026-08-09-17-46-35-768x159.png 768w\" sizes=\"auto, (max-width: 1175px) 100vw, 1175px\" \/><\/p>\n<hr \/>\n<h2>HTML: \u043a\u0430\u0440\u043a\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n<p>HTML-\u043a\u043e\u0434 \u0437\u0430\u0434\u0430\u0451\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443: \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0448\u0430\u043f\u043a\u0430, \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043f\u043e\u0434\u0432\u0430\u043b.<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">html<\/div>\n<pre class=\"python\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #66cc66;\">&lt;!<\/span>DOCTYPE html<span style=\"color: #66cc66;\">&gt;<\/span>\r\n<span style=\"color: #66cc66;\">&lt;<\/span>html lang<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"ru\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n  <span style=\"color: #66cc66;\">&lt;<\/span>head<span style=\"color: #66cc66;\">&gt;<\/span>\r\n    <span style=\"color: #66cc66;\">&lt;<\/span>meta charset<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"utf-8\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n    <span style=\"color: #66cc66;\">&lt;<\/span>meta name<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"viewport\"<\/span> content<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"width=device-width, initial-scale=1\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n    <span style=\"color: #66cc66;\">&lt;<\/span>title<span style=\"color: #66cc66;\">&gt;<\/span>\u0411\u043b\u043e\u0433: \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<span style=\"color: #66cc66;\">&lt;<\/span>\/title<span style=\"color: #66cc66;\">&gt;<\/span>\r\n    <span style=\"color: #66cc66;\">&lt;<\/span>link rel<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"stylesheet\"<\/span> href<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"site.css\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n  <span style=\"color: #66cc66;\">&lt;<\/span>\/head<span style=\"color: #66cc66;\">&gt;<\/span>\r\n  <span style=\"color: #66cc66;\">&lt;<\/span>body<span style=\"color: #66cc66;\">&gt;<\/span>\r\n    <span style=\"color: #66cc66;\">&lt;<\/span>div <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"site-wrapper\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n      <span style=\"color: #66cc66;\">&lt;<\/span>header<span style=\"color: #66cc66;\">&gt;<\/span>\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>div <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"container header-content\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n          <span style=\"color: #66cc66;\">&lt;<\/span>a href<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"\/\"<\/span> <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"logo\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>Website<span style=\"color: #66cc66;\">&lt;<\/span>\/a<span style=\"color: #66cc66;\">&gt;<\/span>\r\n          <span style=\"color: #66cc66;\">&lt;<\/span>nav<span style=\"color: #66cc66;\">&gt;<\/span>\r\n            <span style=\"color: #66cc66;\">&lt;<\/span>ul<span style=\"color: #66cc66;\">&gt;<\/span>\r\n              <span style=\"color: #66cc66;\">&lt;<\/span>li<span style=\"color: #66cc66;\">&gt;&lt;<\/span>a href<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"\/\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\u0413\u043b\u0430\u0432\u043d\u0430\u044f<span style=\"color: #66cc66;\">&lt;<\/span>\/a<span style=\"color: #66cc66;\">&gt;&lt;<\/span>\/li<span style=\"color: #66cc66;\">&gt;<\/span>\r\n              <span style=\"color: #66cc66;\">&lt;<\/span>li<span style=\"color: #66cc66;\">&gt;&lt;<\/span>a href<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"\/articles\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\u0421\u0442\u0430\u0442\u044c\u0438<span style=\"color: #66cc66;\">&lt;<\/span>\/a<span style=\"color: #66cc66;\">&gt;&lt;<\/span>\/li<span style=\"color: #66cc66;\">&gt;<\/span>\r\n              <span style=\"color: #66cc66;\">&lt;<\/span>li<span style=\"color: #66cc66;\">&gt;&lt;<\/span>a href<span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"\/about\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\u041e \u043f\u0440\u043e\u0435\u043a\u0442\u0435<span style=\"color: #66cc66;\">&lt;<\/span>\/a<span style=\"color: #66cc66;\">&gt;&lt;<\/span>\/li<span style=\"color: #66cc66;\">&gt;<\/span>\r\n            <span style=\"color: #66cc66;\">&lt;<\/span>\/ul<span style=\"color: #66cc66;\">&gt;<\/span>\r\n          <span style=\"color: #66cc66;\">&lt;<\/span>\/nav<span style=\"color: #66cc66;\">&gt;<\/span>\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>\/div<span style=\"color: #66cc66;\">&gt;<\/span>\r\n      <span style=\"color: #66cc66;\">&lt;<\/span>\/header<span style=\"color: #66cc66;\">&gt;<\/span>\r\n\u00a0\r\n      <span style=\"color: #66cc66;\">&lt;<\/span>div <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"main-wrapper\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>aside <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"sidebar-left\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n          \u041b\u0435\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>\/aside<span style=\"color: #66cc66;\">&gt;<\/span>\r\n\u00a0\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>main <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"container\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n          \u0421\u0442\u0430\u0442\u044c\u0438\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>\/main<span style=\"color: #66cc66;\">&gt;<\/span>\r\n\u00a0\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>aside <span style=\"color: #ff7700; font-weight: bold;\">class<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #483d8b;\">\"sidebar-right\"<\/span><span style=\"color: #66cc66;\">&gt;<\/span>\r\n          \u041f\u0440\u0430\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>\/aside<span style=\"color: #66cc66;\">&gt;<\/span>\r\n      <span style=\"color: #66cc66;\">&lt;<\/span>\/div<span style=\"color: #66cc66;\">&gt;<\/span>\r\n\u00a0\r\n      <span style=\"color: #66cc66;\">&lt;<\/span>footer<span style=\"color: #66cc66;\">&gt;<\/span>\r\n        <span style=\"color: #66cc66;\">&lt;<\/span>p<span style=\"color: #66cc66;\">&gt;<\/span>&amp;<span style=\"color: #dc143c;\">copy<\/span><span style=\"color: #66cc66;\">;<\/span> <span style=\"color: #ff4500;\">2026<\/span> Website. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b.<span style=\"color: #66cc66;\">&lt;<\/span>\/p<span style=\"color: #66cc66;\">&gt;<\/span>\r\n      <span style=\"color: #66cc66;\">&lt;<\/span>\/footer<span style=\"color: #66cc66;\">&gt;<\/span>\r\n    <span style=\"color: #66cc66;\">&lt;<\/span>\/div<span style=\"color: #66cc66;\">&gt;<\/span>\r\n  <span style=\"color: #66cc66;\">&lt;<\/span>\/body<span style=\"color: #66cc66;\">&gt;<\/span>\r\n<span style=\"color: #66cc66;\">&lt;<\/span>\/html<span style=\"color: #66cc66;\">&gt;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e<\/h3>\n<ul>\n<li data-value=\"\" data-shift=\"0\"><code class=\"CodeInlined\">&lt;!DOCTYPE html&gt;<\/code>\u00a0\u2014\u00a0\u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 HTML5. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u00ab\u0440\u0435\u0436\u0438\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438\u00bb, \u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u043f\u043e\u0435\u0434\u0435\u0442.<\/li>\n<li data-value=\"\" data-shift=\"0\"><code class=\"CodeInlined\">&lt;html lang=\"ru\"&gt;<\/code>\u00a0\u2014\u00a0\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u044f\u0437\u044b\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0438 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u043e\u0432, \u0438 \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432.<\/li>\n<li data-value=\"\" data-shift=\"0\"><code class=\"CodeInlined\">&lt;meta charset=\"utf-8\"&gt;<\/code>\u00a0\u2014\u00a0\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0430, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0443\u0441\u0441\u043a\u0438\u0445 \u0431\u0443\u043a\u0432 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u00ab\u043a\u0440\u0430\u043a\u043e\u0437\u044f\u0431\u0440\u044b\u00bb.<\/li>\n<li data-value=\"\" data-shift=\"0\"><code class=\"CodeInlined\">&lt;meta name=\"viewport\" ...&gt;<\/code>\u00a0\u2014\u00a0\u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0442\u0435\u0433 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438: \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445.<\/li>\n<li data-value=\"\" data-shift=\"0\">\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0433\u0438 (<code class=\"CodeInlined\">header<\/code>, <code class=\"CodeInlined\">main<\/code>, <code class=\"CodeInlined\">aside<\/code>, <code class=\"CodeInlined\">footer<\/code>) \u0434\u0435\u043b\u0430\u044e\u0442 \u043a\u043e\u0434 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443, \u043d\u043e \u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c \u0440\u043e\u0431\u043e\u0442\u0430\u043c.<\/li>\n<\/ul>\n<h3>\u041a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0441\u0435\u0442\u043a\u0430<\/h3>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u043e\u0431\u0451\u0440\u0442\u043a\u0430\u0445 \u0438 Flexbox:<\/p>\n<ul>\n<li data-value=\"\" data-shift=\"0\"><code class=\"CodeInlined\">.site-wrapper<\/code>\u00a0\u2014\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e.<\/li>\n<li data-value=\"\" data-shift=\"0\"><code class=\"CodeInlined\">.main-wrapper<\/code> \u0441 <code class=\"CodeInlined\">display: flex<\/code> \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u043b\u0435\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u043f\u0440\u0430\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0432 \u0440\u044f\u0434.<\/li>\n<li data-value=\"\" data-shift=\"0\">\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 (\u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b) \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0430 \u0431\u043b\u043e\u043a\u0438 \u0432\u0441\u0442\u0430\u044e\u0442 \u0434\u0440\u0443\u0433 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u043e\u043c.<\/li>\n<\/ul>\n<hr \/>\n<h2>CSS: \u0441\u0442\u0438\u043b\u0438 \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h2>\n<p>CSS \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0439. \u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b CSS\u2011\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">css<\/div>\n<pre class=\"php\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #339933;\">:<\/span>root <span style=\"color: #009900;\">{<\/span>\r\n    <span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>body<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#f5f7fa;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#ffffff;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>main<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#2c3e50;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>muted<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#7f8c8d;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#3498db;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #339933;\">-<\/span>hover<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#2980b9;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>border<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#e0e6ed;\r\n<\/span><span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933;\">*<\/span> <span style=\"color: #009900;\">{<\/span>\r\n    box<span style=\"color: #339933;\">-<\/span>sizing<span style=\"color: #339933;\">:<\/span> border<span style=\"color: #339933;\">-<\/span>box<span style=\"color: #339933;\">;<\/span>\r\n    margin<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\nbody <span style=\"color: #009900;\">{<\/span>\r\n    font<span style=\"color: #339933;\">-<\/span>family<span style=\"color: #339933;\">:<\/span> system<span style=\"color: #339933;\">-<\/span>ui<span style=\"color: #339933;\">,<\/span> <span style=\"color: #339933;\">-<\/span>apple<span style=\"color: #339933;\">-<\/span><a href=\"http:\/\/www.php.net\/system\"><span style=\"color: #990000;\">system<\/span><\/a><span style=\"color: #339933;\">,<\/span> Segoe UI<span style=\"color: #339933;\">,<\/span> Roboto<span style=\"color: #339933;\">,<\/span> Helvetica<span style=\"color: #339933;\">,<\/span> Arial<span style=\"color: #339933;\">,<\/span> sans<span style=\"color: #339933;\">-<\/span>serif<span style=\"color: #339933;\">;<\/span>\r\n    background<span style=\"color: #339933;\">-<\/span>color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>body<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>main<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    line<span style=\"color: #339933;\">-<\/span>height<span style=\"color: #339933;\">:<\/span> <span style=\"color: #800080;\">1.6<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\na <span style=\"color: #009900;\">{<\/span> text<span style=\"color: #339933;\">-<\/span>decoration<span style=\"color: #339933;\">:<\/span> none<span style=\"color: #339933;\">;<\/span> color<span style=\"color: #339933;\">:<\/span> inherit<span style=\"color: #339933;\">;<\/span> <span style=\"color: #009900;\">}<\/span>\r\nul <span style=\"color: #009900;\">{<\/span> list<span style=\"color: #339933;\">-<\/span>style<span style=\"color: #339933;\">:<\/span> none<span style=\"color: #339933;\">;<\/span> <span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933;\">.<\/span>site<span style=\"color: #339933;\">-<\/span>wrapper <span style=\"color: #009900;\">{<\/span>\r\n    max<span style=\"color: #339933;\">-<\/span>width<span style=\"color: #339933;\">:<\/span> 1400px<span style=\"color: #339933;\">;<\/span>\r\n    margin<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span> auto<span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span> 10px<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<a href=\"http:\/\/www.php.net\/header\"><span style=\"color: #990000;\">header<\/span><\/a> <span style=\"color: #009900;\">{<\/span>\r\n    background<span style=\"color: #339933;\">-<\/span>color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">:<\/span> 1px solid <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>border<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">-<\/span>radius<span style=\"color: #339933;\">:<\/span> 5px<span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> 20px 10px<span style=\"color: #339933;\">;<\/span>\r\n    margin<span style=\"color: #339933;\">-<\/span>top<span style=\"color: #339933;\">:<\/span> 10px<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933;\">.<\/span>header<span style=\"color: #339933;\">-<\/span>content <span style=\"color: #009900;\">{<\/span>\r\n    display<span style=\"color: #339933;\">:<\/span> flex<span style=\"color: #339933;\">;<\/span>\r\n    justify<span style=\"color: #339933;\">-<\/span>content<span style=\"color: #339933;\">:<\/span> space<span style=\"color: #339933;\">-<\/span>between<span style=\"color: #339933;\">;<\/span>\r\n    align<span style=\"color: #339933;\">-<\/span>items<span style=\"color: #339933;\">:<\/span> center<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933;\">.<\/span>logo <span style=\"color: #009900;\">{<\/span>\r\n    font<span style=\"color: #339933;\">-<\/span>weight<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">700<\/span><span style=\"color: #339933;\">;<\/span>\r\n    font<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 1<span style=\"color: #339933;\">.<\/span>5rem<span style=\"color: #339933;\">;<\/span>\r\n    color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\nnav ul <span style=\"color: #009900;\">{<\/span>\r\n    display<span style=\"color: #339933;\">:<\/span> flex<span style=\"color: #339933;\">;<\/span>\r\n    gap<span style=\"color: #339933;\">:<\/span> 24px<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\nnav a<span style=\"color: #339933;\">:<\/span>hover <span style=\"color: #009900;\">{<\/span>\r\n    color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933;\">.<\/span>main<span style=\"color: #339933;\">-<\/span>wrapper <span style=\"color: #009900;\">{<\/span>\r\n    display<span style=\"color: #339933;\">:<\/span> flex<span style=\"color: #339933;\">;<\/span>\r\n    gap<span style=\"color: #339933;\">:<\/span> 10px<span style=\"color: #339933;\">;<\/span>\r\n    margin<span style=\"color: #339933;\">:<\/span> 10px <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933;\">.<\/span>sidebar<span style=\"color: #339933;\">-<\/span>left<span style=\"color: #339933;\">,<\/span> <span style=\"color: #339933;\">.<\/span>sidebar<span style=\"color: #339933;\">-<\/span>right <span style=\"color: #009900;\">{<\/span>\r\n    border<span style=\"color: #339933;\">:<\/span> 1px solid <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>border<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    background<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> 20px<span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">-<\/span>radius<span style=\"color: #339933;\">:<\/span> 5px<span style=\"color: #339933;\">;<\/span>\r\n    flex<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">0<\/span> <span style=\"color: #cc66cc;\">0<\/span> 240px<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\nmain<span style=\"color: #339933;\">.<\/span>container <span style=\"color: #009900;\">{<\/span>\r\n    flex<span style=\"color: #339933;\">:<\/span> <span style=\"color: #cc66cc;\">1<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">:<\/span> 1px solid <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>border<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    background<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">-<\/span>radius<span style=\"color: #339933;\">:<\/span> 5px<span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> 20px<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n\u00a0\r\nfooter <span style=\"color: #009900;\">{<\/span>\r\n    background<span style=\"color: #339933;\">-<\/span>color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">:<\/span> 1px solid <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>border<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">-<\/span>radius<span style=\"color: #339933;\">:<\/span> 5px<span style=\"color: #339933;\">;<\/span>\r\n    text<span style=\"color: #339933;\">-<\/span>align<span style=\"color: #339933;\">:<\/span> center<span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> 15px <span style=\"color: #cc66cc;\">0<\/span><span style=\"color: #339933;\">;<\/span>\r\n    color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>muted<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    font<span style=\"color: #339933;\">-<\/span>size<span style=\"color: #339933;\">:<\/span> 0<span style=\"color: #339933;\">.<\/span>9rem<span style=\"color: #339933;\">;<\/span>\r\n    margin<span style=\"color: #339933;\">-<\/span>top<span style=\"color: #339933;\">:<\/span> 10px<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/h3>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 1: \u043c\u0435\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0442\u0435\u043c\u0443.<\/strong><br \/>\n\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0432 \u0442\u0451\u043c\u043d\u044b\u0445 \u0442\u043e\u043d\u0430\u0445. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 <code class=\"CodeInlined\">:root<\/code>:<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">css<\/div>\n<pre class=\"php\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #339933;\">:<\/span>root <span style=\"color: #009900;\">{<\/span>\r\n    <span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>body<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#1a1a1d;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#2b2b30;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>main<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#e0e0e0;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>muted<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#999;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#4facfe;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #339933;\">-<\/span>hover<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#00c6ff;\r\n<\/span>    <span style=\"color: #339933;\">--<\/span>border<span style=\"color: #339933;\">:<\/span> <span style=\"color: #666666; font-style: italic;\">#444;\r\n<\/span><span style=\"color: #009900;\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0412\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u043d\u0435\u0442 \u0442\u0451\u043c\u043d\u043e\u0439\u00a0\u2014\u00a0\u0438 \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b.<\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 2: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u043a \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0443.<\/strong><br \/>\n\u041c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c SVG \u043f\u0440\u044f\u043c\u043e \u0432 HTML:<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">html<\/div>\n<pre class=\"php\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #339933;\">&lt;<\/span>a href<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"\/\"<\/span> <span style=\"color: #000000; font-weight: bold;\">class<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"logo\"<\/span><span style=\"color: #339933;\">&gt;<\/span>\r\n  <span style=\"color: #339933;\">&lt;<\/span>svg width<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"24\"<\/span> height<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"24\"<\/span> viewBox<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"0 0 24 24\"<\/span> fill<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"none\"<\/span> stroke<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"currentColor\"<\/span> stroke<span style=\"color: #339933;\">-<\/span>width<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"2\"<\/span><span style=\"color: #339933;\">&gt;<\/span>\r\n    <span style=\"color: #339933;\">&lt;<\/span>path d<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"M3 9h18M3 15h18M5 3v18M19 3V21\"<\/span><span style=\"color: #339933;\">\/&gt;<\/span>\r\n  <span style=\"color: #339933;\">&lt;\/<\/span>svg<span style=\"color: #339933;\">&gt;<\/span>\r\n  Website\r\n<span style=\"color: #339933;\">&lt;\/<\/span>a<span style=\"color: #339933;\">&gt;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0418 \u0432 CSS \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435:<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">css<\/div>\n<pre class=\"php\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #339933;\">.<\/span>logo <span style=\"color: #009900;\">{<\/span>\r\n    display<span style=\"color: #339933;\">:<\/span> flex<span style=\"color: #339933;\">;<\/span>\r\n    align<span style=\"color: #339933;\">-<\/span>items<span style=\"color: #339933;\">:<\/span> center<span style=\"color: #339933;\">;<\/span>\r\n    gap<span style=\"color: #339933;\">:<\/span> 8px<span style=\"color: #339933;\">;<\/span>\r\n    <span style=\"color: #666666; font-style: italic;\">\/* \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u043d\u044c\u0448\u0435 *\/<\/span>\r\n<span style=\"color: #009900;\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 3: \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0435.<\/strong><br \/>\n\u0412 \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438-\u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">html<\/div>\n<pre class=\"php\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #339933;\">&lt;<\/span>aside <span style=\"color: #000000; font-weight: bold;\">class<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"sidebar-left\"<\/span><span style=\"color: #339933;\">&gt;<\/span>\r\n  <span style=\"color: #339933;\">&lt;<\/span>h3<span style=\"color: #339933;\">&gt;<\/span>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<span style=\"color: #339933;\">&lt;\/<\/span>h3<span style=\"color: #339933;\">&gt;<\/span>\r\n  <span style=\"color: #339933;\">&lt;<\/span>ul<span style=\"color: #339933;\">&gt;<\/span>\r\n    <span style=\"color: #339933;\">&lt;<\/span>li<span style=\"color: #339933;\">&gt;&lt;<\/span>a href<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"\/tags\"<\/span> <span style=\"color: #000000; font-weight: bold;\">class<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"btn-link\"<\/span><span style=\"color: #339933;\">&gt;<\/span>\u0412\u0441\u0435 \u0442\u0435\u0433\u0438<span style=\"color: #339933;\">&lt;\/<\/span>a<span style=\"color: #339933;\">&gt;&lt;\/<\/span>li<span style=\"color: #339933;\">&gt;<\/span>\r\n    <span style=\"color: #339933;\">&lt;<\/span>li<span style=\"color: #339933;\">&gt;&lt;<\/span>a href<span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"\/archive\"<\/span> <span style=\"color: #000000; font-weight: bold;\">class<\/span><span style=\"color: #339933;\">=<\/span><span style=\"color: #0000ff;\">\"btn-link\"<\/span><span style=\"color: #339933;\">&gt;<\/span>\u0410\u0440\u0445\u0438\u0432<span style=\"color: #339933;\">&lt;\/<\/span>a<span style=\"color: #339933;\">&gt;&lt;\/<\/span>li<span style=\"color: #339933;\">&gt;<\/span>\r\n  <span style=\"color: #339933;\">&lt;\/<\/span>ul<span style=\"color: #339933;\">&gt;<\/span>\r\n<span style=\"color: #339933;\">&lt;\/<\/span>aside<span style=\"color: #339933;\">&gt;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0410 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<div class=\"CodeBlock CodeBlock_overflow_visible CodeBlock_highlight\">\n<div class=\"CodeBlock-StickyWrapper\">\n<div class=\"CodeBlock-Header\">\n<div class=\"CodeBlock-HeaderTitle\">css<\/div>\n<pre class=\"php\" style=\"font-family: monospace; font-size: 14px;\"><span style=\"color: #339933;\">.<\/span>btn<span style=\"color: #339933;\">-<\/span><a href=\"http:\/\/www.php.net\/link\"><span style=\"color: #990000;\">link<\/span><\/a> <span style=\"color: #009900;\">{<\/span>\r\n    display<span style=\"color: #339933;\">:<\/span> block<span style=\"color: #339933;\">;<\/span>\r\n    padding<span style=\"color: #339933;\">:<\/span> 8px 12px<span style=\"color: #339933;\">;<\/span>\r\n    background<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>bg<span style=\"color: #339933;\">-<\/span>card<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">:<\/span> 1px solid <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>border<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    border<span style=\"color: #339933;\">-<\/span>radius<span style=\"color: #339933;\">:<\/span> 4px<span style=\"color: #339933;\">;<\/span>\r\n    color<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>text<span style=\"color: #339933;\">-<\/span>main<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span>\r\n<span style=\"color: #339933;\">.<\/span>btn<span style=\"color: #339933;\">-<\/span><a href=\"http:\/\/www.php.net\/link\"><span style=\"color: #990000;\">link<\/span><\/a><span style=\"color: #339933;\">:<\/span>hover <span style=\"color: #009900;\">{<\/span>\r\n    background<span style=\"color: #339933;\">:<\/span> <span style=\"color: #000000; font-weight: bold;\">var<\/span><span style=\"color: #009900;\">(<\/span><span style=\"color: #339933;\">--<\/span>accent<span style=\"color: #009900;\">)<\/span><span style=\"color: #339933;\">;<\/span>\r\n    color<span style=\"color: #339933;\">:<\/span> white<span style=\"color: #339933;\">;<\/span>\r\n<span style=\"color: #009900;\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<hr \/>\n<h2>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c: \u043a\u0430\u043a \u0441\u0430\u0439\u0442 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445<\/h2>\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 CSS \u0435\u0441\u0442\u044c \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b\u00a0\u2014\u00a0\u043e\u043d\u0438 \u043c\u0435\u043d\u044f\u044e\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<ul>\n<li data-value=\"\" data-shift=\"0\">\u041f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u0434\u043e 1024\u00a0px \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e.<\/li>\n<li data-value=\"\" data-shift=\"0\">\u041f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u0434\u043e 768\u00a0px \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u044b \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f (<code class=\"CodeInlined\">display: none<\/code>), \u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435, \u0438 \u043d\u0430 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0435.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u0431\u043b\u043e\u0433\u0430. \u041e\u043d \u0443\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0432\u0451\u0440\u0441\u0442\u043a\u0443, \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0433\u0438 \u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\u00a0\u2014\u00a0\u0442\u043e, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0411\u0435\u0437 \u043b\u0438\u0448\u043d\u0435\u0439 \u0442\u0435\u043e\u0440\u0438\u0438: \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u0430\u044f \u0447\u0430\u0441\u0442\u044c. HTML: \u043a\u0430\u0440\u043a\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b HTML-\u043a\u043e\u0434 \u0437\u0430\u0434\u0430\u0451\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443: \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0448\u0430\u043f\u043a\u0430, \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043f\u043e\u0434\u0432\u0430\u043b. html &lt;!DOCTYPE html&gt; &lt;html [&hellip;]<\/p>\n","protected":false},"author":9194254,"featured_media":135540,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[557],"tags":[],"class_list":["post-135538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-557"],"views":7,"_links":{"self":[{"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/135538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/users\/9194254"}],"replies":[{"embeddable":true,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=135538"}],"version-history":[{"count":1,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/135538\/revisions"}],"predecessor-version":[{"id":135541,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/135538\/revisions\/135541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/media\/135540"}],"wp:attachment":[{"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=135538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=135538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=135538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}