Информация

JavaScript должен быть включен. С отключенным JavaScript функционал форума недоступен.
</noscript> <!-- Мгновенные уведомления © Alex_63, 2024 --> <link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/notifications.css" /> <script type="text/javascript" src="//forumstatic.ru/f/ru/bestbb/notifications.js"></script> <!-- посты из важных тем --> <script type="text/javascript"> notifications.load('common', {}); notifications.load('important', {topics: [2921,6505,8996]}); </script> <script>notifications.load('subscriptions');</script><!-- подписки на форум/тему --> <script>notifications.load('fields', {fields: [1, 2], emptyNotify: true})</script><!-- изменения в полях профиля --> <script>notifications.load('mentions');</script><!-- упоминания --> <script>notifications.load('reports');</script><!-- Жалобы --> <script>notifications.load('new_user')</script><!-- регистрация юзеров --> <script>notifications.addons.tgbot.noInvite = true;</script> <!-- убрать подсказку про телегу --> <script>notifications.load('premod')</script><!-- премодерация --> <!-- Правка для уведомлений по клику на ник, в связи с измененной версткой профиля --> <script type="text/javascript"> $('#pun-viewtopic').on('click', '.fd-name a', function(e) {$(this).parents('.post').find('.pa-author a').trigger('click');}); </script> <!-- Голосовые сообщения © Alex_63, 2024 --> <link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/voice.css" /> <script type="text/javascript" src="https://forumstatic.ru/f/ru/bestbb/voice.js"></script> <script>voice.startOnOpen = false</script> <style> .voice-modal .container { overflow: hidden; } </style> <!-- иконки font awesome --> <script src="https://kit.fontawesome.com/f50f12bcbf.js" crossorigin="anonymous"></script> <!-- free --> <script src="https://kit.fontawesome.com/c06ba4bb64.js" crossorigin="anonymous"></script> <!-- pro --> <!-- Скрипт для создания анкет © Alex_63 --> <style> .postlink a[href*="questionary"] {background: #f98561; border-bottom: 6px solid #e63737;} .postlink a[href*="questionary"]:hover {background: #e63737;} </style> <script type="text/javascript"> var Questnr = {}; Questnr.groups = [1,2,6,12,16]; //Группы, которым разрешено создавать шаблоны для анкет Questnr.forums = [4,5,6,19,2,22,108,121,1,144,90,179,151,133,184,123]; //Форумы с допуском к анкетированию Questnr.title = 'Заказ от '; //Начало заголовка темы с анкетой (по умолчанию) Questnr.noedit = 0; //Запрет редактирования заполненной анкеты пользователем </script> <script type="text/javascript"> ['viewforum','viewtopic','post','edit','searchposts'].indexOf($('.punbb')[0].id.substr(4))!=-1&& $().pun_mainReady(function(){var s='script',l='/files/0007/e3/f7/32678.js'; var f=$('#pun-viewforum').length?$('link[rel="alternate"]'):$('.crumbs a[href*="viewforum"]:last'); f=+f[0].href.match(/id=(\d+)$/)[1];Questnr.forums.indexOf(f)!=-1&&document.write('<'+s+' src="'+l+'"></'+s+'>')}); </script> <script> //работающий у всех кроме динозавров вариант //Questnr.allowReply = [+$('link[rel="alternate"]')[0].href.match(/id=(\d+)$/)?.[1]]; //текущая тема var curReplyMatch = $('link[rel="alternate"]')[0].href.match(/id=(\d+)$/); //если нашел текущую тему - массив, иначе 0 if (curReplyMatch) { Questnr.allowReply = [+curReplyMatch[1]]; } </script> <script> // Проверенные спецы var verifiedData = [ { id: '2', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>UI/UX дизайн</b>, <b>CSS/Верстка</b>, Javascript">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7032', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7907', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7006', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>Вебдизайн</b>, <b>Графический дизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7181', color: 'orange', fld: '<span class="material-symbols-outlined red rus" title="Ведущий специалист: <b>DigitalArt</b> - цифровой рисунок, pixelart, анимация">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7130', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>CSS/Верстка</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7639', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '6797', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '6489', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>PHP/Javascript</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '8926', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>, <b>Верстка</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '5063', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>Вебдизайн</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' }, { id: '7884', color: 'orange', fld: '<span class="material-symbols-outlined orange rus" title="Проверенный специалист: <b>дизайны для форумов MyBB</b>">verified</span><span class="material-symbols-outlined orange eng" title="Qualified developer">verified</span>' } ]; // Должности var dutyData = [ { id: '2', color: 'red', fld: '<li class="fd-duty rus">Главный администратор</li><li class="fd-duty eng">System support administrator</li>', }, { id: '7842', color: 'green', fld: '<li class="fd-duty rus">Модератор каталога графики</li><li class="fd-duty eng">Graphics Catalog Moderator</li>', }, { id: '7151', color: 'green', fld: '<li class="fd-duty rus">Модератор ролевых разделов</li><li class="fd-duty eng">Role-Playing Sections Moderator</li>', }, { id: '6995', color: 'green', fld: '<li class="fd-duty rus">Модератор стримов</li><li class="fd-duty eng">Streams Moderator</li>' }, { id: '9439', color: 'green', fld: '<li class="fd-duty rus">Модератор системы бонусов</li><li class="fd-duty eng">Bonus System Moderator</li>' }, { id: '9734', color: 'green', fld: '<li class="fd-duty rus">Ассистент англоязычной версии</li><li class="fd-duty eng">English Content Assistant</li>' }, { id: '9758', color: 'green', fld: '<li class="fd-duty rus">SMM менеджер</li><li class="fd-duty eng">SMM Manager</li>' } ]; // группы с доступом к закладкам var BookmGroups = [1,2,6,16,4,8,12]; </script> <!-- Редирект на портал <script> var portal = '/pages/index'; var TimeRedirect = 24*60*60; //Редирект при последнем посещении более суток var url = document.URL.split('#')[0]; if(!localStorage.LastVisit || RequestTime-localStorage.LastVisit > TimeRedirect){ if((url+'%a').split('/%')[1]=='a'&&url.indexOf('mod')==-1)location.href=portal; }localStorage.LastVisit = RequestTime; $(document).ready(function(){ var a = $('#pun-navlinks #navindex a')[0]; a.href = a.href+'=&forum' }); </script> --> <!-- стили спец постов --> <link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0007/e3/f7/34232.css?v=7"> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93794845, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/93794845" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div> <div id="pun-title" class="section"> <table id="title-logo-table" cellspacing="0"> <tbody id="title-logo-tbody"> <tr id="title-logo-tr"> <td id="title-logo-tdl" class="title-logo-tdl"> <h1 class="title-logo"><span>ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</span></h1> </td> <td id="title-logo-tdr" class="title-logo-tdr"><!-- banner_top --></td> </tr> </tbody> </table> </div> <div id="pun-navlinks" class="section"> <h2><span>Меню навигации</span></h2> <ul class="container"> <li id="navindex"><a href="https://forumd.ru/"><span>Форум</span></a></li> <li id="navuserlist"><a href="https://forumd.ru/userlist.php" rel="nofollow"><span>Участники</span></a></li> <li id="navrules"><a href="https://forumd.ru/misc.php?action=rules" rel="nofollow"><span>Правила</span></a></li> <li id="navsearch"><a href="https://forumd.ru/search.php" rel="nofollow"><span>Поиск</span></a></li> <li id="navregister"><a href="https://forumd.ru/register.php" rel="nofollow"><span>Регистрация</span></a></li> <li id="navlogin"><a href="https://forumd.ru/login.php" rel="nofollow"><span>Войти</span></a></li> </ul> </div> <div id="pun-ulinks" class="section" onclick="void(0)"> <h2><span>Пользовательские ссылки</span></h2> <ul class="container"> <li class="item1"><a href="https://forumd.ru/search.php?action=show_recent">Активные темы</a></li> </ul> </div> <!--noindex--> <div id="pun-announcement" class="section"> <h2><span>Объявление</span></h2> <div class="container"> <div class="html-box"> <!-- Юзер-меню --> <div id="user-menu" class="side-menu"> <div class="close"><i class="material-symbols-outlined">cancel</i></div> <div class="u-ava"></div> <div class="fd-guest g-inf rus"> <b>РЕГИСТРАЦИЯ</b> на форуме позволит: <li>скачивать <i>дизайны</i> и видеть <i>коды скриптов</i></li> <li>оставлять <i>ссылки</i> на сайты/картинки</li> <li><i>оформлять</i> заказы</li> <li>отправлять <i>личные</i> сообщения</li> <li><i>рекламировать</i> свои форумы/сайты или услуги</span> </div> <div class="fd-guest g-inf eng"> <b>REGISTRATION</b> on the forum allows you to: <li>download <i>designs</i> and view <i>script codes</i></li> <li>leave <i>links</i> to websites/images</li> <li><i>place</i> orders</li> <li>send <i>private</i> messages</li> <li><i>advertise</i> your forums/websites or services</li> </div> <ul class="u-menu"> <li class="fd-guest rus"><a href='/register.php'><span class='material-icons'>person</span> Регистрация</a></li> <li class="fd-guest rus"><a href='/login.php'><span class='material-icons'>login</span> Вход</a></li> <li class="fd-guest rus"><a href='/viewtopic.php?id=4506'><span class='material-icons'>message</span> Обратная связь</a></li> <li class="fd-guest eng"><a href='/register.php'><span class='material-icons'>person</span> Register</a></li> <li class="fd-guest eng"><a href='/login.php'><span class='material-icons'>login</span> Login</a></li> <li class="fd-guest eng"><a href='/viewtopic.php?id=7165'><span class='material-icons'>message</span> Feedback</a></li> </ul> </div> <!-- Сайдбар --> <div id="sidebar" class="rus"> <div class="u-ava" title="Меню профиля"></div> <div class="u-notif fd-user icon remake" title="Уведомления" id="notify-link" data-number-unread="0"> <a><em class="notify-link"><strong class="unreads">0</strong></em></a> </div> <div class="u-pm fd-user icon remake" title="Личные сообщения"></div> <div class="u-options icon"> <i class="material-symbols-outlined dark" title="Включить темную тему">dark_mode</i> <i class="material-symbols-outlined light" title="Включить светлую тему">light_mode</i> </div> <div class="u-arrow icon"> <div title="Наверх страницы" class="toTop"><i class="material-symbols-outlined">arrow_circle_up</i></div> <div title="Вниз страницы" class="onBottom"><i class="material-symbols-outlined">arrow_circle_down</i></div> </div> </div> <div id="sidebar" class="eng"> <div class="u-ava" title="Profile menu"></div> <div class="u-notif fd-user icon remake" title="Notifications" id="notify-link" data-number-unread="0"> <a><em class="notify-link"><strong class="unreads">0</strong></em></a> </div> <div class="u-pm fd-user icon remake" title="Private messages"></div> <div class="u-arrow icon"> <div title="Scroll to top" class="toTop"><i class="material-symbols-outlined">arrow_circle_up</i></div> <div title="Scroll to bottom" class="onBottom"><i class="material-symbols-outlined">arrow_circle_down</i></div> </div> </div> <!--кнопки стрелки вверх вниз--> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ if ($(window).scrollTop() > 250) { $(".toTop").fadeIn("slow"); } else { $(".toTop").fadeOut("slow"); } if ($(window).scrollTop() < $(document).height() - 999) { $(".onBottom").fadeIn("slow"); } else { $(".onBottom").fadeOut("slow"); } }); $(".toTop").click(function(){ $("html, body").animate({scrollTop: 0}, "slow"); }); $(".onBottom").click(function(){ $("html, body").animate({scrollTop: $(document).height()}, "slow"); }); }); </script> <!-- Меню --> <div id="nav"><ul class="inner"> <li id="logo"></li> <!-- <li id="navindex"><a href="/pages/index"><i class="material-symbols-outlined">home</i><span class="rus">Главная</span><span class="eng">Home</span></a></li> --> <li id="navforum"><a href="/=&forum"><i class="material-symbols-outlined">forum</i><span class="rus">Форум</span><span class="eng">Forum</span></a></li> <li id="navactive"><a href="/search.php?action=show_recent"><i class="material-symbols-outlined">chat</i><span class="rus">Активные темы</span><span class="eng">Active topics</span></a></li> <li id="navmembers"><a href="/userlist.php"><i class="material-symbols-outlined">group</i><span class="rus">Участники</span><span class="eng">Members</span></a></li> <li id="navsearch"><a href="/search.php"><i class="material-symbols-outlined">search</i><span class="rus">Поиск</span><span class="eng">Search</span></a></li> <li id="navadmin"><a href="/admin_index.php"><i class="material-symbols-outlined">shield_person</i><span class="rus">Админка</span><span class="eng">Admin</span></a></li> <li id="navguest"><a href="/register.php"><i class="material-symbols-outlined">passkey</i><span class="rus">Регистрация</span><span class="eng">Register</span></a></li> <li id="navguest"><a href="/login.php"><i class="material-symbols-outlined">login</i><span class="rus">Вход</span><span class="eng">Login</span></a></li> </ul></div> <!-- Смена языка --> <div id="langChange"><a class="material-icons">language</a><span class="eng"><b>Eng</b>/<a>Ru</a></span><span class="rus"><a>Eng</a>/<b>Ru</b></span></div> <!-- СЛАЙДЕР --> <div class="fd-slider"><!-- НАЧАЛО --> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/236383.jpg"> <div class="content"> <h3>&#127911; Подкаст «НЕ<b>ТЕ</b>РОЛЕВЫЕ»</h3> <p> Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ). </p> <a id="store" target="_blank" href="https://t.me/neterolevye">Telegram</a> <a id="store" href="/viewtopic.php?id=8954">Обсудить</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/808399.jpg"> <div class="content"> <h3>&#127809; Что такое осень? <b>Конкурс</b> осенних дизайнов!</h3> <p> Как вы выражаете осень на своём форуме/сайте? Что осень для вас? <br> Вас ждут вкусные призы за участие, призовой фонд растет вместе с числом участников! <br> Все участники гарантировано получают <b>рекламные места</b>. </p> <a id="store" href="/viewtopic.php?id=8918#p207189">Участвовать</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/965290.jpg"> <div class="content"> <h3>&#128293; Акция! Осенние <b>скидки</b> на Мгновенные уведомления</h3> <p> Оплачивая уведомления <b>до 1 ноября 2024</b>, вы можете получить скидки в 10% или 20% за наградные баллы! <br> <a href="/viewtopic.php?id=8045">Скрипт уведомлений</a> поддерживается уже более 5 лет и имеет много бесплатных дополнений. <br> Мы принимаем <b>все способы оплаты из любых стран</b>. </p> <a id="store" href="/viewtopic.php?id=8924#p207222">Подробности</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/993126.jpg"> <div class="content"> <h3>&#10084;&#65039; Поддержи проект! Стань модератором!</h3> <p> Разыскиваются модераторы на должности: <br> Модератор вебмастерских разделов, Ассистент англоязычной версии, Видеомонтажер и другие<br> <a href="/viewtopic.php?id=5787#p134326">Посмотреть вакансии и условия.</a> </p> <a id="store" href="/viewtopic.php?id=5787#p134326">Подать заявку</a> </div> </div> <div class="slide rus" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/435761.jpg"> <div class="content"> <h3>&#128140; <b>Акция!</b> Подписка, лайк, коммент, репост!</h3> <p> В рамках акции вы можете помочь нам в продвижении и заработать НАГРАДНЫЕ БАЛЛЫ.<br> НБ можно обменивать на платные скрипты, скидки на заказы, рекламу на нашем форуме и т.д. <br> Подробнее о том, где еще можно потратить баллы, можно <a href="https://forumd.ru/viewtopic.php?id=8324#p206561">в теме акции</a>. </p> <a id="store" href="https://forumd.ru/viewtopic.php?id=8324#p206561">Участвовать</a> </div> </div> <div class="slide eng" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/209339.jpg"> <div class="content"> <h3>&#127775; SPECIAL OFFER: We distribute designs for free</h3> <p> Finalizing the layout for your project;<br> Developing a style code; <br> Mobile version included if you wish.<br> </p> <a id="store" href="/viewtopic.php?id=7243">Details</a> </div> </div> <div class="slide eng" data-bg="https://forumupload.ru/uploads/0007/e3/f7/2/209339.jpg"> <div class="content"> <h3>&#10084;&#65039; Support the project</h3> <p> If you want to help us:<br> <a href=/viewtopic.php?id=5787>Become a moderator</a><br> <a href="/viewtopic.php?id=7167">Suggestions</a> &#8226; <a href="/viewtopic.php?id=7168">Reviews</a> </p> <a id="store" href="/viewtopic.php?id=6616">Details</a> </div> </div> <!-- КОНЕЦ --><div class="fd-slider-dots"></div></div> <div class="bot-hr"></div> <!-- мини объявы --> <div id="ann" class="rus"> &#127809; Конкурс! <a href="/viewtopic.php?id=8918#p207189" target='blank'>Что такое осень? Конкурс осенних дизайнов!</a> Вас ждут вкусные призы за участие, призовой фонд растет вместе с числом участников! </div> <!-- <div id="ann" class="rus"> &#128140; Акция! <a href="/viewtopic.php?id=8324#p206561" target='blank'>Подписка, лайк, коммент, репост!</a> Поделись нашими YouTube видео и получи наградные баллы.</div> --> <!-- <div id="ann" class="rus">Требуются модераторы! <a href="https://forumd.ru/viewtopic.php?id=5787#p134326" target='blank'>Посмотреть вакансии и подать заявку.</a> Денежную оплату и "плюшки" гарантируем &#128178; </div> --> <!-- <div id="ann" class="rus"> &#10071; &#10071; &#10071; На форуме временные проблемы с регистрацией пользователей! &#10071; &#10071; &#10071; <br> Если вам не пришел пароль от аккаунта на почту пишите сюда свой никнейм и e-mail: <a href="/viewtopic.php?id=4506" target='blank'>Диалог с администрацией</a> <br>Администраторы зарегистрируют и активируют аккаунт вручную. </div> --> <!-- <div id="ann" class="rus"> &#127876; <a href="/viewtopic.php?id=2921&p=21#p191508" target='blank'>Подборка новогодних украшений вашего проекта</a></div> --> <!-- --><div id="ann" class="eng"> &#10071; &#10071; &#10071; Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, <a href="https://i.imgur.com/mg0OGtT.png" target='blank'>switch to the russian language.</a> This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience. </div> <!-- <div id="ann" class="rus moderator-ann">Пожалуйста <a href="/viewtopic.php?id=7206" target='blank'>заполните анкету</a> и расскажите о вашей готовности к англоязычным пользователям. </div> --> <!-- Скрипт слайдера --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/14086.js?v=2" async></script> </div> </div> </div> <!--/noindex--> <div id="pun-status" class="section"> <h2><span>Информация о пользователе</span></h2> <p class="container"> <span class="item1">Привет, Гость!</span> <span class="item2"><a href="/login.php" rel="nofollow">Войдите</a> или <a href="/register.php" rel="nofollow">зарегистрируйтесь</a>.</span> </p> </div> <div id="pun-break1" class="divider"><hr /></div> <div id="pun-crumbs1" class="section"> <p class="container crumbs"><strong>Вы здесь</strong> <em>&#187;&#160;</em><a href="https://forumd.ru/">ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=14">Архив устаревших тем</a> <em>&#187;&#160;</em>HTML с нуля</p> </div> <div id="pun-break2" class="divider"><hr /></div> <!-- banner_mini_top --> <div id="pun-main" class="main multipage"> <h1><span>HTML с нуля</span></h1> <div class="linkst"> <div class="pagelink">Страница: <a class="prev" href="https://forumd.ru/viewtopic.php?id=91&amp;p=2">&laquo;</a>&#160;&#160;<a href="https://forumd.ru/viewtopic.php?id=91">1</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=2">2</a>&#160;<strong>3</strong>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=4">4</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=5">5</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=6">6</a>&#160;&#160;<a class="next" href="https://forumd.ru/viewtopic.php?id=91&amp;p=4">&raquo;</a></div> <div class="postlink"><span><a href="https://forumd.ru/post.php?tid=91" rel="nofollow">Ответить</a></span></div> </div> <div id="topic_t91" class="topic"> <h2><span class="item1">Сообщений</span> <span class="item2">21 страница 30 из 57</span></h2> <div id="p254" class="post toppost topic-starter" data-posted="1237817195" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p254" onclick="return false;">Поделиться</a><strong>21</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p254">23.03.09 17:06</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p254-content" class="post-content"> <p><strong>Ступенька 20-ая. </strong><br /><em class="bbuline">&quot;Закладка. Как сделать ссылку внутри документа&quot;. </em></p> <p>В этой главе мы продолжим разговор о ссылках. Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем (смотрите пример, понажимайте там на ссылочки). Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами.</p> <p><strong>Способ первый</strong> - с помощью атрибута name (имя закладки) тэга A:</p><div class="quote-box quote-main"><blockquote><p>&lt;H2&gt;Григорий Остер, &quot;Вредные советы.&lt;BR&gt;<br />Книга для непослушных детей и их родителей&quot;.&lt;/H2&gt;<br />&lt;A href=&quot;<strong>#stih1&quot;</strong>&gt;Ссылка на стих первый&lt;/A&gt;&lt;BR&gt;<br />&lt;A href=&quot;<strong>#stih2&quot;</strong>&gt;Ссылка на стих второй&lt;/A&gt;&lt;BR&gt;<br />&lt;A href=&quot;<strong>#stih3&quot;</strong>&gt;Ссылка на стих третий&lt;/A&gt;&lt;BR&gt;&lt;BR&gt;<br />&lt;PRE&gt;<br />Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: &quot;Умывайтесь по утрам&quot; - они берут и не умываются. Им говорят: &quot;Здоровайтесь друг с другом&quot; - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.<br />&lt;/PRE&gt;<br />&lt;H3&gt;<strong>&lt;A name=&quot;stih1&quot;&gt;Стих первый&lt;/A&gt;</strong>&lt;/H3&gt;<br />&lt;PRE&gt;<br />... тра-ля-ля 1...<br />&lt;/PRE&gt;<br />&lt;H3&gt;<strong>&lt;A name=&quot;stih2&quot;&gt;Стих второй&lt;/A&gt;</strong>&lt;/H3&gt;<br />&lt;PRE&gt;<br />... тра-ля-ля 2...<br />&lt;/PRE&gt;<br />&lt;H3&gt;<strong>&lt;A name=&quot;stih3&quot;&gt;Стих третий&lt;/A&gt;</strong>&lt;/H3&gt;<br />&lt;PRE&gt;<br />... тра-ля-ля 3...<br />&lt;/PRE&gt; (<a href="http://postroika.ru/html/ancorpri.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p>Заголовки (стих первый, стих второй, стих третий) в нашем примере мы сделали закладками, использовав атрибут тэга A - name:</p> <p>&lt;A name=&quot;stih3&quot;&gt;Стих третий&lt;/A&gt;</p> <p>Затем, без стеснения, мы сделали на них ссылки:</p> <p>&lt;A href=&quot;<strong>#stih3</strong>&quot;&gt;Ссылка на стих третий&lt;/A&gt;</p> <p>Заметьте - &lt;A href=&quot;<strong>#stih3</strong>&quot;&gt; - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:</p> <p>&lt;A href=&quot;<strong>ancorpri.html#stih3</strong>&quot;&gt; Ссылка на стих третий из какого-то другого документа &lt;/A&gt;</p> <p>или</p> <p>&lt;A href=&quot;<strong>http://www.mysite.ru/ancorpri.html#stih1</strong>&quot;&gt; Ссылка на стих третий из какого-то другого документа &lt;/A&gt;</p> <p>(имя сайта, имя документа + имя закладки)</p> <p><strong>Способ второй</strong> - есть такой атрибут - id, который назначает тэгу (элементу) уникальное имя в пределах одного документа (кроме тэгов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тэгу H3 (заголовкам)? Ничего. </p><div class="quote-box quote-main"><blockquote><p>&lt;H2&gt;Григорий Остер, &quot;Вредные советы.&lt;BR&gt;<br />Книга для непослушных детей и их родителей&quot;.&lt;/H2&gt;<br />&lt;A href=&quot;<strong>#stih1</strong>&quot;&gt;Ссылка на стих первый&lt;/A&gt;&lt;BR&gt;<br />&lt;A href=&quot;<strong>#stih2</strong>&quot;&gt;Ссылка на стих второй&lt;/A&gt;&lt;BR&gt;<br />&lt;A href=&quot;<strong>#stih3</strong>&quot;&gt;Ссылка на стих третий&lt;/A&gt;&lt;BR&gt;&lt;BR&gt;<br />&lt;PRE&gt;<br />Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: &quot;Умывайтесь по утрам&quot; - они берут и не умываются. Им говорят: &quot;Здоровайтесь друг с другом&quot; - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.<br />&lt;/PRE&gt;<br /><strong>&lt;H3 id=&quot;stih1&quot;&gt;Стих первый&lt;/H3&gt;</strong><br />&lt;PRE&gt;<br />... тра-ля-ля 1...<br />&lt;/PRE&gt;<br /><strong>&lt;H3 id=&quot;stih2&quot;&gt;Стих второй&lt;/H3&gt;</strong><br />&lt;PRE&gt;<br />... тра-ля-ля 2...<br />&lt;/PRE&gt;<br /><strong>&lt;H3 id=&quot;stih3&quot;&gt;Стих третий&lt;/H3&gt;</strong><br />&lt;PRE&gt;<br />... тра-ля-ля 3...<br />&lt;/PRE&gt; (<a href="http://postroika.ru/html/ancorpri2.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p><a href="http://postroika.ru/html/ancorpri2.html" rel="nofollow ugc" target="_blank">Посмотрите</a>, внешне ничего не изменилось и все действует так же, как и в первом примере, поэтому вы можете использовать спокойно любой из этих двух способов (какой больше нравится). </p> <p>Также хочу вас предостеречь, никогда не делайте так: </p><div class="quote-box quote-main"><blockquote><p>&lt;A href=&quot;<strong>#stih</strong>&quot;&gt;Ссылка на ...&lt;/A&gt;&lt;BR&gt;<br />...<br />&lt;A name=&quot;<strong>STIH&quot;</strong>&gt;Закладка&lt;/A&gt;</p></blockquote></div><p>Если вы, например, напишите имя закладки большими буквами, а, ссылаясь, укажете это имя маленькими, то броузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре.</p> <p>На этом наши мучения с ссылками закончены. В следующих уроках мы познакомимся с таблицами. Для этого нам придется опустить несколько тем, таких как спецсимволы, линии, списки, бегущие строки и т.д. С этими темами мы ознакомимся позже.</p> <p>Шагаем дальше, к таблицам.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 254)">Цитировать<span class="acchide">&nbsp;Сообщение 21</span></a></li> </ul> </div> </div> </div> <div id="p255" class="post altstyle topic-starter" data-posted="1237819277" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p255" onclick="return false;">Поделиться</a><strong>22</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p255">23.03.09 17:41</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p255-content" class="post-content"> <p><strong>Ступенька 21-ая. </strong><br /><em class="bbuline">&quot;Учимся создавать таблицы&quot;.</em></p> <p>Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру не обошлась бы в своем оформлении без таблиц никак: картинки, тексты – все размечено и размещено относительно друг друга при помощи таблиц (собственно, весь сайт, грубо говоря, расположен в большой сложной таблице). Или вот еще вот <a href="http://postroika.ru/html/simplesitepri.html" rel="nofollow ugc" target="_blank">пример сайта</a>, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда вы пройдете главы о таблицах без труда сможете сверстать подобное).</p> <p>Таблица задается тэгом:</p> <p>&lt;table&gt;&lt;/table&gt;</p> <p>Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их.</p> <p>&lt;tr&gt;&lt;/tr&gt; - строчка таблицы<br />&lt;td&gt;&lt;/td&gt; - столбец (ячейка) таблицы </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza41.gif" alt="http://postroika.ru/html/tabliza41.gif" /></p> <p>Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:</p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br /><strong>&lt;tr&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;/tr&gt;</strong><br />&lt;/table&gt;</p></blockquote></div><p>Сначала мы задали строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки): </p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br /><strong>&lt;td&gt;&lt;/td&gt;<br />&lt;td&gt;&lt;/td&gt;<br />&lt;td&gt;&lt;/td&gt;</strong><br />&lt;/tr&gt;<br />&lt;tr&gt;<br /><strong>&lt;td&gt;&lt;/td&gt;<br />&lt;td&gt;&lt;/td&gt;<br />&lt;td&gt;&lt;/td&gt;</strong><br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Кстати, когда вы будете создавать свой сайт и таблицы, лучше рисуйте все сначала на бумаге, так вам будет легче потом верстать, т.к. вы все наглядно будете видеть на бумаге, и у вас будет меньше вероятности ошибиться.</p> <p>Итак, теперь нам надо заполнить получившийся каркас: </p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td&gt;<strong>1x1</strong>&lt;/td&gt;<br />&lt;td&gt;<strong>1x2</strong>&lt;/td&gt;<br />&lt;td&gt;<strong>1x3</strong>&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td&gt;<strong>2x1</strong>&lt;/td&gt;<br />&lt;td&gt;<strong>2x2</strong>&lt;/td&gt;<br />&lt;td&gt;<strong>2x3</strong>&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Надеюсь вы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:</p> <p>1x1 1x2 1x3<br />2x1 2x2 2x3</p> <p>Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается атрибутом bgcolor=&quot;цвет_фона&quot;. Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки.</p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td <strong>bgcolor=&quot;#FFCC33&quot;</strong>&gt;1x1&lt;/td&gt;<br />&lt;td <strong>bgcolor=&quot;#336699&quot;</strong>&gt;1x2&lt;/td&gt;<br />&lt;td <strong>bgcolor=&quot;#FFCC33&quot;</strong>&gt;1x3&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td <strong>bgcolor=&quot;#336699&quot;</strong>&gt;2x1&lt;/td&gt;<br />&lt;td <strong>bgcolor=&quot;#FFCC33&quot;</strong>&gt;2x2&lt;/td&gt;<br />&lt;td <strong>bgcolor=&quot;#336699&quot;</strong>&gt;2x3&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Вот, что у нас получилось:</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza21.gif" alt="http://postroika.ru/html/tabliza21.gif" /></p> <p>Если вы хотите задать фон для ряда, то атрибут bgcolor мы прописываем для тэга &lt;tr&gt;:</p> <p>&lt;tr bgcolor=&quot;#FFCC33&quot;&gt;</p> <p>Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга &lt;table&gt;:</p> <p>&lt;table bgcolor=&quot;#FFCC33&quot;&gt;</p> <p>Однако, если при заданном фоне для всей таблицы, вы задаете свой фон для ряда или ячейки, то этот ряд или ячейка будут иметь фон отличный от всей таблицы.</p> <p>Попробуйте самостоятельно задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следующей ступеньке, и мы продолжим разговор о таблицах.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 255)">Цитировать<span class="acchide">&nbsp;Сообщение 22</span></a></li> </ul> </div> </div> </div> <div id="p256" class="post topic-starter" data-posted="1237819671" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p256" onclick="return false;">Поделиться</a><strong>23</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p256">23.03.09 17:47</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p256-content" class="post-content"> <p><strong>Ступенька 22-ая. </strong><br /><em class="bbuline">&quot;Учимся создавать таблицы&quot; продолжение.</em></p> <p>Итак, как помнится, мы решили с вами создать вот такую таблицу: </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza41.gif" alt="http://postroika.ru/html/tabliza41.gif" /></p> <p>А получилось у нас еще только вот такая таблица:</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza21.gif" alt="http://postroika.ru/html/tabliza21.gif" /></p> <p>В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним об атрибутах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек). </p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td <strong>height=&quot;35&quot; width=&quot;50&quot;</strong> bgcolor=&quot;#FFCC33&quot;&gt; 1x1 &lt;/td&gt;<br />&lt;td <strong>width=&quot;50&quot;</strong> bgcolor=&quot;#336699&quot;&gt; 1x2 &lt;/td&gt;<br />&lt;td <strong>width=&quot;50&quot;</strong> bgcolor=&quot;#FFCC33&quot;&gt; 1x3 &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td <strong>height=&quot;35&quot; width=&quot;50&quot;</strong> bgcolor=&quot;#336699&quot;&gt; 2x1 &lt;/td&gt;<br />&lt;td <strong>width=&quot;50&quot;</strong> bgcolor=&quot;#FFCC33&quot;&gt; 2x2 &lt;/td&gt;<br />&lt;td <strong>width=&quot;50&quot;</strong> bgcolor=&quot;#336699&quot;&gt; 2x3 &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).</p> <p>Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).</p> <p>Кстати, атрибуты height и width можно задать в процентах:</p> <p>&lt;td width=&quot;30%&quot;&gt; содержимое ячейки &lt;/td&gt;</p> <p>Если мы задали для ячейки ширину в 30 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 70 процентов, т.е. сумма их ширин не должна превышать 70 процентов. Почему? Простая арифметика: в сумме это все должно равняться 100%. Считаем: 100 – 30 = 70. <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /></p> <p>Вернемся к нашему примеру: теперь мы почти получили то, что хотели:) </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza31.gif" alt="http://postroika.ru/html/tabliza31.gif" /></p> <p>Теперь нам осталось лишь выровнять содержимое (текст) внутри таблицы:</p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; <strong>&lt;center&gt;</strong> 1x1 <strong>&lt;/center&gt;</strong> &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; <strong>&lt;center</strong>&gt; 1x2 <strong>&lt;/center&gt;</strong> &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;1x3 &lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; <strong>&lt;center&gt;</strong> 2x1 <strong>&lt;/center&gt;</strong> &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; <strong>&lt;center&gt;</strong> 2x2 <strong>&lt;/center&gt;</strong> &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; <strong>&lt;center&gt;</strong> 2x3 <strong>&lt;/center&gt;</strong> &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>И... готово!<img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza11.gif" alt="http://postroika.ru/html/tabliza11.gif" /></p> <p>Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста нам нужно было прописать в нашем примере для содержимого (текста) каждой ячейки, что мы с вами и сделали.</p> <p>Вы должны помнить и другие тэги для выравнивания содержимого, кроме &lt;center&gt;, а также атрибут align, который мы прописывали для них. Этот атрибут можно задать и для ячеек таблицы:</p> <p>&lt;td <strong>align=”center”</strong>&gt;2x2&lt;/td&gt;</p> <p>Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом &lt;td&gt; атрибут align принимать не может. В нашем случае атрибут align выравнивает содержимое внутри ячейки (на всякий случай, если вы еще не поняли его назначение).</p> <p>В каждой ячейке могут находиться и картинки, и текст (+тэги и атрибуты применяемые к ним), и даже таблицы (в этом случае они называются - вложенные таблицы). Т.е. тэги, которые мы применяем для форматирования содержимого (контента) - все те же.</p> <p>Давайте шагнем на следующую ступеньку и продолжим разговор о таблицах.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 256)">Цитировать<span class="acchide">&nbsp;Сообщение 23</span></a></li> </ul> </div> </div> </div> <div id="p257" class="post altstyle topic-starter" data-posted="1237819812" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p257" onclick="return false;">Поделиться</a><strong>24</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p257">23.03.09 17:50</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p257-content" class="post-content"> <p><strong>Ступенька 23-ая. </strong><br /><em class="bbuline">&quot;Таблицы, вертикальное выравнивание (valign)&quot;.</em></p> <p>В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и атрибуты на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:).</p> <p>Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим атрибутом - valign=&quot;middle&quot; (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabliza51.gif" alt="http://postroika.ru/html/tabliza51.gif" /></p> <p>Вот вам и наглядный пример, как это выглядит. А теперь разберемся, как это пишется: </p> <p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot; <strong>valign=&quot;top&quot;</strong>&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot; <strong>valign=&quot;bottom&quot;</strong>&gt; &lt;center&gt;1x3&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot; <strong>valign=&quot;bottom&quot;</strong>&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; <strong>valign=&quot;top&quot;</strong>&gt; &lt;center&gt;2x3&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt; </p> <p>Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование атрибута valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:).</p> <p>А теперь, когда мы знаем, что align, задает горизонтальное выравнивание содержимого ячейки, а valign – вертикальное, перейдем к следующей ступеньке, чтобы узнать о других атрибутах, облегчающих нашу трудную жизнь.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 257)">Цитировать<span class="acchide">&nbsp;Сообщение 24</span></a></li> </ul> </div> </div> </div> <div id="p258" class="post topic-starter" data-posted="1237820005" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p258" onclick="return false;">Поделиться</a><strong>25</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p258">23.03.09 17:53</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p258-content" class="post-content"> <p><strong>Ступенька 24-ая.</strong><br /><em class="bbuline">&quot;Таблицы, учимся растягивать ячейки (rowspan, colspan)&quot;.</em></p> <p>В этой главе мы поговорим об атрибутах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь, чтобы было все понятно, обратимся к примерам.</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab1.gif" alt="http://postroika.ru/html/20tab1.gif" /></p> <p>Итак, наша задача растянуть ячейку 1х1 на два столбца (ячейки). Для этого мы используем атрибут colspan=&quot;2&quot;, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:</p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot; <strong>colspan=&quot;2&quot;</strong>&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x3&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Как вы видите, ячейка 1х1 простирается на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (100 пикселов). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным ста пикселам. И еще, прошу вас обратить внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.</p> <p>Если бы мы по оплошности прописали ячейку 1х3, тогда у нас получилась бы следующее: </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab2.gif" alt="http://postroika.ru/html/20tab2.gif" /></p> <p>Аккуратнее обращайтесь с параметрами colspan и rowspan. Ошибка может привести к тому, что ваш сайт «поедет». Теперь, когда мы разобрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab3.gif" alt="http://postroika.ru/html/20tab3.gif" /></p> <p>Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите):</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab4.gif" alt="http://postroika.ru/html/20tab4.gif" /></p> <p>Если ничего не получится, то вы можете посмотреть коды для этих таблиц на следующей ступеньке. А кто все понял и все сделал, тот молодец и может даже перешагнуть через ступеньку.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 258)">Цитировать<span class="acchide">&nbsp;Сообщение 25</span></a></li> </ul> </div> </div> </div> <div id="p259" class="post altstyle topic-starter" data-posted="1237820179" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p259" onclick="return false;">Поделиться</a><strong>26</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p259">23.03.09 17:56</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p259-content" class="post-content"> <p><strong>Ступенька 24-2 - дополнительная. </strong><br /><em class="bbuline">&quot;Дополнительная глава. Ответы на домашнее задание&quot;.</em></p> <p>Эта ступенька дополнительная, здесь вы можете посмотреть ответы на задание предыдущего урока. Те, кто справился с заданием сам – молодцы, можете взять конфетку с полки и продолжить обучение на следующей ступеньке. Двоечникам же придется задержаться <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /></p> <p>Первое задание: </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab3.gif" alt="http://postroika.ru/html/20tab3.gif" /></p> <p>Растягиваем ячейку 1х3 на два ряда. </p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; <strong>rowspan=&quot;2&quot;</strong>&gt; &lt;center&gt;1x3&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Второе задание: </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab4.gif" alt="http://postroika.ru/html/20tab4.gif" /></p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot; <strong>colspan=&quot;2&quot;</strong>&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; <strong>rowspan=&quot;2&quot;</strong>&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Если вы посмотрели ответы, т.к. сами не смогли решить поставленную мной задачу, то советую вам самостоятельно придумать себе задание, и попытаться выполнить его. Таблицы достаточно важный материал для тех, кто хочет в дальнейшем делать качественные сайты. Так или иначе, вам придется их освоить.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 259)">Цитировать<span class="acchide">&nbsp;Сообщение 26</span></a></li> </ul> </div> </div> </div> <div id="p260" class="post topic-starter" data-posted="1237820493" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p260" onclick="return false;">Поделиться</a><strong>27</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p260">23.03.09 18:01</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p260-content" class="post-content"> <p><strong>Ступенька 25-ая. </strong><br /><em class="bbuline">&quot;Таблицы, что такое cellspacing и cellpadding. Что делать с пространством&quot;.</em></p> <p>Итак, мы остановились на такой таблице: </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/20tab4.gif" alt="http://postroika.ru/html/20tab4.gif" /></p> <p>Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например, можно избавиться от пространства между ячейками таблицы:</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/21tab.gif" alt="http://postroika.ru/html/21tab.gif" /></p> <p>Такая красота достигается с помощью атрибута cellspacing, равного нулю: </p><div class="quote-box quote-main"><blockquote><p>&lt;table <strong>cellspacing=&quot;0&quot;</strong>&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot;&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Можно наоборот увеличить пространство между ячейками, допустим, пусть cellspacing=&quot;5&quot;, тогда получим следующее: </p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/22tab.gif" alt="http://postroika.ru/html/22tab.gif" /></p> <p>Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотрится не стандартно.</p> <p>Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который задает верхнее, нижнее, правое и левое поля ячейки. Чтобы было видно нагляднее, я для начала прижму текст ячеек первого ряда к верху, и нижнего - к низу, используя атрибут valign:</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/23tab.gif" alt="http://postroika.ru/html/23tab.gif" /></p> <p>Теперь зададим атрибут cellpadding=&quot;5&quot;:</p> <p><img class="postimg" loading="lazy" src="https://postroika.ru/html/24tab.gif" alt="http://postroika.ru/html/24tab.gif" /></p> <p>В этих примерах мы отчетливо видим верхнее и нижнее поля (левое и правое тоже присутствуют, но на данном примере это не очевидно). Теперь вам должно быть понятно, что поля отделяют содержание ячейки от ее краев. Убрать поля можно, задав атрибут cellpadding равный нулю (по умолчанию небольшие поля все-таки у таблиц есть, как и пространство между ячеек). Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):</p><div class="quote-box quote-main"><blockquote><p>&lt;table cellpadding=&quot;5&quot;&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot; <strong>valign=&quot;top&quot;</strong>&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot; <strong>valign=&quot;top&quot;</strong>&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot; <strong>valign=&quot;bottom&quot;</strong>&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot; <strong>valign=&quot;bottom&quot;</strong>&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Теперь я могу с чистой совестью завершить этот урок и перейти к следующему, в котором мы узнаем о вложенных таблицах.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 260)">Цитировать<span class="acchide">&nbsp;Сообщение 27</span></a></li> </ul> </div> </div> </div> <div id="p261" class="post altstyle topic-starter" data-posted="1237877449" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p261" onclick="return false;">Поделиться</a><strong>28</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p261">24.03.09 09:50</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p261-content" class="post-content"> <p><strong>Ступенька 26-ая. </strong><br /><em class="bbuline">&quot;Вложенные таблицы и некоторые нюансы&quot;.</em></p> <p>Когда мы учились делать таблицы, то я упоминала о вложенных таблицах. Что же это такое и в чем их особенность? - это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти.</p> <p>Допустим, у нас уже есть большая таблица, две колонки которой забиты текстом какого-то отчета, а третья между ними для красоты: <br /><a href="http://postroika.ru/html/26step2.html" rel="nofollow ugc" target="_blank">http://postroika.ru/html/26step2.html</a></p> <p>Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу (с буками и бяками). Теперь код: </p><div class="quote-box quote-main"><blockquote><p>&lt;table&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;200&quot; valign=&quot;top&quot; <strong>background=&quot;blue.gif&quot; align=&quot;center&quot;</strong>&gt;С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.&lt;/td&gt;<br /><strong>&lt;td width=&quot;10&quot; background=&quot;white.gif&quot;&gt;&amp;nbsp;&lt;/td&gt;</strong><br />&lt;td width=&quot;200&quot; valign=&quot;top&quot; background=&quot;blue.gif&quot; align=&quot;center&quot;&gt;Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:<br />&lt;br&gt;&lt;br&gt;</p> <p><strong>&lt;table cellspacing=&quot;3&quot;&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;50&quot; background=&quot;white.gif&quot;&gt;буки&lt;/td&gt;&lt;td background=&quot;white.gif&quot;&gt;65% населения&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;50&quot; background=&quot;white.gif&quot;&gt;бяки&lt;/td&gt;&lt;td background=&quot;white.gif&quot;&gt;20% населения&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;50&quot; background=&quot;white.gif&quot;&gt;др.&lt;/td&gt;&lt;td background=&quot;white.gif&quot;&gt;15% населения&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br /></strong><br />&lt;br&gt;&lt;br&gt;<br />За сим все&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается. Благодаря вложенным таблицам гораздо проще управлять содержимым сайта. Так и в случае с Постройкой.ру – было гораздо проще ввести вложенные таблицы (что мы и сделали, например, для правой колонки с дополнительной информацией), чем размечать очень сложную таблицу (теперь только представьте, что это было бы одной таблицей, ужас, да и только).</p> <p>Теперь поговорим, о некоторых нюансах, на которые следует обратить внимание: background=&quot;картинка.gif&quot; - раньше мы говорили об атрибуте bgcolor, который задает цвет фона для таблицы (ряда, ячейки), а атрибут background задает фоновую картинку для таблицы (ряда, ячейки).</p> <p>А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor=&quot;#ffffff&quot;), а не мучиться, создавая просто белую картинку и делая ее фоном (background=&quot;white.gif&quot;), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает атрибут bgcolor для вложенных таблиц, то некоторые другие броузеры отказываются этот атрибут для вложенных таблиц отображать, поэтому приходиться идти обходным путем, используя background.</p> <p>Вот так мы и убили двух зайцев сразу: узнали, что можно задать атрибут background для таблиц, и при этом ознакомились с некоторыми тонкостями ремесла <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" />. Теперь будем добивать оставшихся заек:</p> <p>&lt;td width=&quot;10&quot; background=&quot;white.gif&quot;&gt;&amp;nbsp;&lt;/td&gt;</p> <p>Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен &amp;nbsp; (символ неразрывного пробела, это спецсимвол, с ними мы ознакомимся подробно чуть позже). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: &lt;td&gt;&lt;/td&gt;. Вот такую конструкцию некоторые броузеры просто-напросто игнорируют, т.к. не любят пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или &amp;nbsp;, или мелкую картинку размеров 1х1 пиксела.</p> <p>Вот, пожалуй, и все. Охота за остальными зайками переноситься в следующие главы.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 261)">Цитировать<span class="acchide">&nbsp;Сообщение 28</span></a></li> </ul> </div> </div> </div> <div id="p262" class="post topic-starter" data-posted="1237879361" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p262" onclick="return false;">Поделиться</a><strong>29</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p262">24.03.09 10:22</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p262-content" class="post-content"> <p><strong>Ступенька 27-ая. </strong><br /><em class="bbuline">&quot;О рамках таблиц, и брюзжание о таблицах напоследок&quot;.</em></p> <p>В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:<br /><strong><br />&lt;table border=&quot;3&quot;&gt;</strong></p> <p>Остальную таблицу допишете сами. </p> <p>Нашей рамке мы можем задать цвет. Пусть он будет черным в нашем примере:</p> <p>&lt;table border=&quot;3&quot;<strong> bordercolor=&quot;#000000&quot;</strong>&gt;</p> <p>Все очень просто.</p> <p>Если вы хотите создать однотонную рамку (допустим черную), то мы используем таблицу с черным фоном и атрибутом cellpadding, который, как мы помним, задает размер поля ячейки. В нашу таблицу мы вкладываем другую таблицу – в итоге получится, что вокруг вложенной таблицы образовалась рамка с толщиной в пикселах, которую мы задали для атрибута cellpadding, и цветом, который мы задали для фона (bgcolor=&quot;#000000&quot;, в нашем случае) основной таблицы.</p> <p>Для наглядности пример кода: </p><div class="quote-box quote-main"><blockquote><p>&lt;table border=&quot;0&quot; cellspacing=&quot;0&quot; <strong>cellpadding=&quot;5&quot; bgcolor=&quot;#000000&quot;</strong>&gt;<br />&lt;tr&gt;<br />&lt;td&gt;<br /><strong>&lt;table width=&quot;100%&quot; border=&quot;0&quot; bgcolor=&quot;цвет фона&quot;&gt; ... &lt;/table&gt;</strong><br />&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Есть и другой вариант, но тоже с использованием вложенной таблицы. Создаем основную таблицу, из трех рядов, первый и последний – будут верхом и низом (гранями) нашей рамки. Второй ряд делим на три ячейки: первая и последняя также будут гранями нашей рамки (им мы прописываем соответственную толщину и нужный цвет). А в среднюю ячейку второго ряда поселяем вложенную таблицу, в которой будет находиться нужное нам содержимое (допустим, новости).</p> <p>Второй вариант сложнее, но он может пригодиться, если вы хотите создать, допустим, пунктирную рамку, в этом случае мы делаем картинку с пунктирной линией, которую помещаем в качестве фона в первый и третий ряд, и в первую и третью ячейки нашей основной таблицы, и, вуаля, получаем то, что хотели.</p> <p>Кстати, если мы уж говорим о тонкостях, то часто мне задают вопрос, как сделать скругленные углы таблицам – очень просто, если вы видите на сайте таблицу со скругленными углами, то знайте, что на самом деле это всего лишь четыре картинки, которые помещены по углам таблицы и создают иллюзию, что таблица имеет скругленные углы. Без картинок такое не было бы возможным <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /></p> <p>Вообще-то не так трудно создать таблицу, и даже описанные выше тонкости на самом деле не тонкости, любой из вас может дойти до этого сам своим умом, стоит только понять механизм Html, и включить свою выдумку и соображаловку.</p> <p>Зато самое трудное, чтобы то, что мы сверстали, выглядело под разными броузерами одинаково. Возьмем те же рамки тех же таблиц: </p> <p>Различные таблицы в IE<br /><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabie.gif" alt="http://postroika.ru/html/tabie.gif" /></p> <p>Различные таблицы в NN<br /><img class="postimg" loading="lazy" src="https://postroika.ru/html/tabnn.gif" alt="http://postroika.ru/html/tabnn.gif" /></p> <p>Полагаю, это достаточно наглядный пример (есть над чем задуматься). Опытные кодеры стараются просматривать сверстанную ими страницу под разными типами броузеров, чтобы везде все выглядело одинаково, у каждого броузера свои капризы, так что сверстать сайт, чтобы везде выглядело все одинаково, задача сложная.</p> <p>Я советую по возможности проверять, как выглядит ваш документ под разными броузерами и разрешениями, т.к. при этом могут проявиться такие дефекты, о которых вам доселе было неведомо.</p> <p>Ну, уж если вы можете махнуть рукой на тех, кто не желает использовать Internet Explorer и любит другие броузеры, то вот на то, что у разных пользователей разное разрешение экрана махнуть рукой нельзя, это уже совсем не прилично. Для тех, кто не знал: два самых используемых разрешения - 800x600 и 1024x768.</p> <p>Никогда не стоит забывать о том, что вашу страницу могут смотреть под бОльшим или меньшим разрешением, и что нет абсолютной гарантии, что вы мастерский верстальщик (кодер) и ваши таблицы не поедут куда-нибудь, например, к бабушке черта (да-да, сколько раз говорилось, сколько написано об этом, а толку практически никакого, интересно, почему многие не желают этого понимать).</p> <p>И еще раз хочу напомнить (для тех, кто еще не понял): мы используем таблицы, чтобы управлять элементами оформления на нашем сайте. Благодаря таблицам мы можем много чего: от просто расположения текста рядом в три колонки, до создания сложного оформления, где ваши чудесные картинки будут разнесены по разным ячейкам таблицы, а в итоге сложатся чудный и сложный узор.</p> <p>Так что вопросы от вас, мои читатели, как расположить текст рядом с картинкой с двух сторон, и прочие подобные я буду уже воспринимать, как личное оскорбление <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> или злую шутку.</p> <p>В следующей главе мы сделаем с вами несложный сайт с таблицами, используя полученные навыки, как показали несколько лет жизни учебника, необходимость в такой главе есть, чтобы вся информация уложилась в вашей голове окончательно.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 262)">Цитировать<span class="acchide">&nbsp;Сообщение 29</span></a></li> </ul> </div> </div> </div> <div id="p263" class="post altstyle endpost topic-starter" data-posted="1237880263" data-user-id="2" data-group-id="1"> <h3><span><a class="sharelink" rel="nofollow" href="#p263" onclick="return false;">Поделиться</a><strong>30</strong><a class="permalink" rel="nofollow" href="https://forumd.ru/viewtopic.php?id=91&amp;p=3#p263">24.03.09 10:37</a></span></h3> <div class="container"> <div class="post-author topic-starter"> <ul> <li class="pa-author"><span class="acchide">Автор:&nbsp;</span><a href="https://forumd.ru/profile.php?id=2" rel="nofollow">Gerda</a></li> <li class="pa-title">крашеный некротехнофил</li> <li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/0007/e3/f7/2-1724838590.jpg" alt="Gerda" title="Gerda" /></li> <li class="pa-last-visit"><span class="fld-name">Последний визит:</span><br />03.12.24 00:27</li> <li class="pa-respect"><span class="fld-name">Уважение:</span> <span>+10113</span></li> <li class="pa-fld2"><img src="https://forumstatic.ru/files/0007/e3/f7/55248.svg" alt="Неравнодушный" title="Неравнодушный" /> <img src="https://forumstatic.ru/files/0007/e3/f7/39098.svg" alt="Инициатор" title="Инициатор" /> <img src="https://forumstatic.ru/files/0007/e3/f7/96572.svg" alt="Резидент" title="Резидент" /> <img src="https://forumstatic.ru/files/0007/e3/f7/31483.svg" alt="Мыслитель" title="Мыслитель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/87304.svg" alt="Советник" title="Советник" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82723.svg" alt="Обозреватель" title="Обозреватель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/12318.svg" alt="Почитатель" title="Почитатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/71606.svg" alt="Стажер" title="Стажер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/51030.svg" alt="Тестер" title="Тестер" /> <img src="https://forumstatic.ru/files/0007/e3/f7/82607.svg" alt="Джун" title="Джун" /> <img src="https://forumstatic.ru/files/0007/e3/f7/70410.svg" alt="Наблюдатель" title="Наблюдатель" /> <img src="https://forumstatic.ru/files/0007/e3/f7/14302.svg" alt="Человек в свитере" title="Человек в свитере" /></li> </ul> </div> <div class="post-body"> <div class="post-box"> <div id="p263-content" class="post-content"> <p><strong>Ступенька 28-ая.</strong><br /><em class="bbuline">&quot;Создаем простой сайт с таблицами&quot;. </em></p> <p>Итак, возьмем за основу один, из рассмотренных нами примеров:<br /><img class="postimg" loading="lazy" src="https://postroika.ru/html/22tab.gif" alt="http://postroika.ru/html/22tab.gif" /></p><div class="quote-box quote-main"><blockquote><p>&lt;table cellspacing=&quot;5&quot;&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot;&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p></blockquote></div><p>Давайте, попытаемся на основе его сделать полноценную страницу. Первое, что мы сделаем, введем обязательные тэги и атрибуты для них:</p><div class="quote-box quote-main"><blockquote><p><strong>&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;Мой первый сайт с таблицами&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; link=&quot;#000000&quot; alink=&quot;#000000&quot; vlink=&quot;#000000&quot;&gt;</strong></p> <p>&lt;table cellspacing=&quot;5&quot;&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot;&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td height=&quot;35&quot; width=&quot;50&quot; bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td width=&quot;50&quot; bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p> <p><strong>&lt;/body&gt;<br />&lt;/html&gt; </strong>(<a href="http://postroika.ru/html/tablev1.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p>Если вы посмотрите, что у нас получилось, то увидите, что таблица маленькая по размеру, а значит, что мы должны изменить значения атрибутов, отвечающих за высоту и ширину таблицы. Убираем все старые значения ширин и высот, и прописываем новые: </p><div class="quote-box quote-main"><blockquote><p>&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;Мой первый сайт с таблицами&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; link=&quot;#000000&quot; alink=&quot;#000000&quot; vlink=&quot;#000000&quot;&gt;</p> <p>&lt;table cellspacing=&quot;5&quot; <strong>width=&quot;700&quot;</strong>&gt;<br />&lt;tr&gt;<br />&lt;td <strong>width=&quot;400&quot;</strong> bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot;&gt; &lt;center&gt;1x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td <strong>width=&quot;300&quot;</strong> bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;</p> <p>&lt;/body&gt;<br />&lt;/html&gt; (<a href="http://postroika.ru/html/tablev2.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p>Мы задали для всей таблицы ширину 700 пикселов. Соответственно, общая сумма ширин ячеек не может превышать 700 пикселов: 300+400=700. Мы задали ширину только двум ячейкам, т.к. оставшиеся ячейки сами распределят выделенные под них 400 пикселов поровну. Мы не задали высоту (height), т.к. нельзя задать стопроцентную высоту (во весь экран) для таблиц, это не предусмотрено спецификацией, так что, наша таблица сама растянется, когда мы введем в нее какое-либо содержание (текст, картинки). </p><div class="quote-box quote-main"><blockquote><p>&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;Мой первый сайт с таблицами&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; link=&quot;#000000&quot; alink=&quot;#000000&quot; vlink=&quot;#000000&quot;&gt;</p> <p><strong>&lt;center&gt;</strong><br />&lt;table cellspacing=&quot;5&quot; width=&quot;700&quot;&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;400&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot;&gt;<br /><strong>&lt;div align=&quot;left&quot;&gt;</strong><br /><span style="color: olive">Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. &lt;br&gt;&lt;br&gt; А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится &lt;b&gt;еще один виртуальный друг? <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> &lt;/b&gt;&lt;br&gt;&lt;br&gt; На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) &lt;br&gt;&lt;br&gt; Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?<img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> Кто знает, может быть, мы и в реальной жизни станем друзьями:)</span><br /><strong>&lt;/div&gt;</strong><br />&lt;/td&gt;<br />&lt;td width=&quot;300&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot;&gt; &lt;center&gt;1x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br /><strong>&lt;/center&gt;</strong></p> <p>&lt;/body&gt;<br />&lt;/html&gt; (<a href="http://postroika.ru/html/tablev3.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p>Итак, мы ввели в таблицу уже знакомый вам текст с виртуальным другом. Мы выровняли текст по левому краю при помощи тэга DIV. Саму таблицу мы расположили по центру экрана при помощи тэга CENTER.</p> <p>Если вы обратите внимание, то заметите, что текст слишком близко расположен к краям нашей ячейки и это смотрится не красиво. Что мы можем сделать? Конечно, ввести атрибут cellpadding для таблицы. </p><div class="quote-box quote-main"><blockquote><p>&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;Мой первый сайт с таблицами&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; link=&quot;#000000&quot; alink=&quot;#000000&quot; vlink=&quot;#000000&quot;&gt;</p> <p>&lt;center&gt;<br />&lt;table cellspacing=&quot;5&quot; width=&quot;700&quot; <strong>cellpadding=&quot;20&quot;</strong>&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;400&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot; <strong>valign=&quot;top&quot;</strong>&gt;<br />&lt;div align=&quot;left&quot;&gt;<br /><strong>&lt;h3&gt;Добро пожаловать на мою страницу!&lt;/h3&gt;</strong><br /><span style="color: olive">Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. &lt;br&gt;&lt;br&gt; А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится &lt;b&gt;еще один виртуальный друг? <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> &lt;/b&gt;&lt;br&gt;&lt;br&gt; На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) &lt;br&gt;&lt;br&gt; Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?<img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> Кто знает, может быть, мы и в реальной жизни станем друзьями:)</span><br />&lt;/div&gt;<br />&lt;/td&gt;<br />&lt;td width=&quot;300&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot; <strong>valign=&quot;top&quot;</strong>&gt;</p> <p><strong>&lt;div align=&quot;center&quot;&gt;&lt;img src=&quot;primtocodephoto.gif&quot; alt=&quot;моя фотография&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;img src=&quot;ptimtocodephoto2.gif&quot; alt=&quot;моя фотография&quot;&gt;&lt;/div&gt;</strong></p> <p>&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td bgcolor=&quot;#336699&quot;&gt; &lt;center&gt;2x1&lt;/center&gt; &lt;/td&gt;<br />&lt;td bgcolor=&quot;#FFCC33&quot;&gt; &lt;center&gt;2x2&lt;/center&gt; &lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/center&gt;</p> <p>&lt;/body&gt;<br />&lt;/html&gt; (<a href="http://postroika.ru/html/tablev4.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p>Кроме атрибута cellpadding мы ввели заголовок, чтобы ваш посетитель смог понять, куда он попал, а также мы ввели содержимое для второй колонки. Также, введя атрибут valign, мы расположили текст и картинки вверху наших ячеек (как мы помним, по умолчанию, если атрибут valign не вводить, содержимое располагается по центру ячейки).</p> <p>Давайте введем содержание для оставшихся двух ячеек: </p><div class="quote-box quote-main"><blockquote><p>&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;Мой первый сайт с таблицами&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; link=&quot;#000000&quot; alink=&quot;#000000&quot; vlink=&quot;#000000&quot;&gt;</p> <p>&lt;center&gt;<br />&lt;table cellspacing=&quot;5&quot; width=&quot;700&quot; cellpadding=&quot;20&quot;&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;400&quot; bgcolor=&quot;#FFCC33&quot; colspan=&quot;2&quot; valign=&quot;top&quot;&gt;<br />&lt;div align=&quot;left&quot;&gt;<br />&lt;h3&gt;Добро пожаловать на мою страницу!&lt;/h3&gt;<br /><span style="color: olive">Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. &lt;br&gt;&lt;br&gt; А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится &lt;b&gt;<strong>еще один виртуальный друг? <img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /></strong> &lt;/b&gt;&lt;br&gt;&lt;br&gt; На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) &lt;br&gt;&lt;br&gt; Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?<img src="https://forumstatic.ru/img/smilies/MyBB/universal/smile.gif" alt=":)" /> Кто знает, может быть, мы и в реальной жизни станем друзьями:)</span><br />&lt;/div&gt;<br />&lt;/td&gt;<br />&lt;td width=&quot;300&quot; bgcolor=&quot;#336699&quot; rowspan=&quot;2&quot; valign=&quot;top&quot;&gt;</p> <p>&lt;div align=&quot;center&quot;&gt;&lt;img src=&quot;primtocodephoto.gif&quot; alt=&quot;моя фотография&quot;&gt;&lt;br&gt;&lt;br&gt;&lt;img src=&quot;ptimtocodephoto2.gif&quot; alt=&quot;моя фотография&quot;&gt;&lt;/div&gt;</p> <p>&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;tr&gt;<br />&lt;td bgcolor=&quot;#336699&quot;&gt;<br /><strong>&lt;div align=&quot;center&quot;&gt;&lt;a href=&quot;mailto:admin@postroika.ru&quot;&gt;напиши мне письмо&lt;/a&gt;&lt;/div&gt;</strong><br />&lt;/td&gt;<br />&lt;td bgcolor=&quot;#FFCC33&quot;&gt;<br /><strong>&lt;div align=&quot;center&quot;&gt;&lt;a href=&quot;#&quot;&gt;посмотри мои фотографии&lt;/a&gt;&lt;/div&gt;</strong><br />&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/center&gt;</p> <p>&lt;/body&gt;<br />&lt;/html&gt; (<a href="http://postroika.ru/html/tablev5.html" rel="nofollow ugc" target="_blank">посмотреть</a>)</p></blockquote></div><p>Итак, в последние две ячейки мы ввели текст, который сделали ссылками на наш почтовый ящик, чтобы наш посетитель мог написать нам письмо, и на страницу с нашими фотографиями. Естественно, предварительно нужно создать документ с фотографиями, прежде, чем на него ссылаться.</p> <p>&lt;a href=&quot;#&quot;&gt; … &lt;/a&gt; - заметьте, что мы не прописали путь к документу с фотографиями, и вместо него подставили значок решетки. Как вы помните, значок решетки используется при создании закладок внутри страницы. Однако, в нашем случае имя закладки не указано, и самой закладки в нашей странице нет. А это значит, что при нажатии на такую странную ссылку, которую мы прописали, ваш посетитель никуда не перейдет с вашей страницы. Т.е. это пустая ссылка. Такие ссылки кодеры очень часто используют при создании макета сайта, когда еще точно не известно, какие будут имена у *.html документов вашей страницы.</p> <p>Итак, подводим итоги: как видите, все достаточно просто. Мы получили с вами аккуратненький и даже оригинальный для начинающего сайтостроителя сайт, которым даже можно немножко гордиться. Такой сайт уже не стыдно показать знакомым и друзьям. Такой сайт уже не стыдно выложить в интернет. Конечно, над ним еще можно поработать, усложнить его, ввести несколько оригинальных изображений, чтобы придать индивидуальности, но это уже работа для вас и вашей фантазии. А я же закончу повествование о таблицах, и мы переходим к разделу Дополнительные.</p> <dl class="post-sig"><dt><span>Подпись автора</span></dt><dd><p>Герду как-то спросили:<br />— Вот вы писали, что &quot;Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер.&quot; А кто вы среди ролевиков?<br />Герда не растерялась и ответила:<br />— Иди на**й.</p></dd></dl> </div> <div class="post-rating"><p class="container"><a title="Вы не можете дать оценку участнику">0</a></p></div> </div> <div class="clearer"><!-- --></div> </div> <div class="post-links"> <ul> <li class="pl-email social-discord has-display-name no-link"><em>Discord<span class="acchide">&nbsp;TrueZlober#1227</span></em></li></li> <li class="pl-email social-lichnaya_tema has-display-name"><a href="https://forumd.ru/viewtopic.php?id=7232" target="_blank">Личная тема<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=7232</span></a></li></li> <li class="pl-email social-portfolio has-display-name"><a href="https://forumd.ru/viewtopic.php?id=3833" target="_blank">Портфолио<span class="acchide">&nbsp;https://forumd.ru/viewtopic.php?id=3833</span></a></li></li> <li class="pl-quote"><a href="javascript:quote('Gerda', 263)">Цитировать<span class="acchide">&nbsp;Сообщение 30</span></a></li> </ul> </div> </div> </div> </div> <div class="linksb"> <div class="postlink"><span><a href="https://forumd.ru/post.php?tid=91" rel="nofollow">Ответить</a></span></div> <div class="pagelink">Страница: <a class="prev" href="https://forumd.ru/viewtopic.php?id=91&amp;p=2">&laquo;</a>&#160;&#160;<a href="https://forumd.ru/viewtopic.php?id=91">1</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=2">2</a>&#160;<strong>3</strong>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=4">4</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=5">5</a>&#160;<a href="https://forumd.ru/viewtopic.php?id=91&amp;p=6">6</a>&#160;&#160;<a class="next" href="https://forumd.ru/viewtopic.php?id=91&amp;p=4">&raquo;</a></div> </div> <!-- topic_banner_bottom --> <div id="post-form" class="formal"> <h2><span>Быстрый ответ</span></h2> <form id="post" class="container" method="post" action="/post.php?tid=91" onsubmit="this.submit.disabled=true;if(process_form(this)){return true;}else{this.submit.disabled=false;return false;}"> <fieldset> <legend><span>Напишите ваше сообщение и нажмите &laquo;Отправить&raquo;</span></legend> <div class="fs-box hashelp"> <div id="formkey"></div> <div id="formetc" style="display:none"></div> <input type="hidden" name="form_sent" value="1" /> <input type="hidden" name="form_user" value="Guest" /> <script type="text/javascript"> FORUM.set("editor.addition.tags.pattern", {name: "Шаблон", onclick: function() { var text = "111111\nололо[cursor]\n<b>anm</b>", cursor = text.indexOf('[cursor]'); if (cursor != -1) { bbcode(text.substring(0, cursor), text.substring(cursor + 8)); } else insert(text); }}); </script> <div id="form-buttons"></div> <div id="tags"> <script type="text/javascript"> html = '<table cellspacing="0" cellpadding="0"><tr>'; $.each(FORUM.get('editor'), function(key,value){ if (key != 'settings') { var icon = key; html += '<td id="button-'+key+'" title="'+value.name+'"><img onclick="FORUM.get(\'editor.'+key+'.onclick()\')" src="/i/blank.gif" /></td>'; } }); html += '</tr></table>'; $('#form-buttons').append(html); </script> <div class="container" id="font-area" style="display:none" onclick="changeVisibility('font-area')"></div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.font.fonts'), function(key,value){ html += '<div style="font-family:'+value+'"><span>'+value+'</span><img onclick="bbcode(\'[font='+value+']\',\'[/font]\')" src="/i/blank.gif" /></div>'; }); $('#font-area').append(html); </script> <div class="container" id="size-area" style="display:none" onclick="changeVisibility('size-area')"></div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.size.sizes'), function(key,value){ html += '<div style="font-size:'+value+FORUM.get('editor.size.unit')+'"><span>'+value+FORUM.get('editor.size.unit')+'</span><img onclick="bbcode(\'[size='+value+']\',\'[/size]\')" src="/i/blank.gif" /></div>'; }); $('#size-area').append(html); </script> <div class="container" id="color-area" style="display:none" onclick="changeVisibility('color-area')"></div> <script type="text/javascript"> html = '<table cellspacing="0" cellpadding="0"><tr>'; $.each(FORUM.get('editor.color.colors'), function(key,value){ html += '<td style="background-color:'+value+'"><img onclick="bbcode(\'[color='+value+']\',\'[/color]\')" src="/i/blank.gif" /></td>'; }); html += '</tr></table>'; $('#color-area').append(html); </script> <div class="container" id="table-area" style="display:none"></div> <script type="text/javascript"> html = '<table cellspacing="0" cellpadding="0">'; for (r=1; r<=FORUM.get('editor.table.rows'); r++){ html += '<tr>'; for (c=1; c<=FORUM.get('editor.table.cols'); c++){ html += '<td><img onclick="tag_table('+c+','+r+'); changeVisibility(\'table-area\')" src="/i/blank.gif" alt="'+c+'x'+r+'" title="'+c+'x'+r+'" /></td>'; } html += '</tr>'; } html += '</table>'; html += '<div><p><input id="table-layout" type="checkbox"'+(FORUM.get('editor.table.layout') == 'auto' ? '' : ' checked="checked"')+' onclick="FORUM.set(\'editor.table.layout\', ($(this).is(\':checked\') ? \'fixed\' : \'auto\'));" /><label for="table-layout">Ячейки одной ширины</label></p></div>'; $('#table-area').append(html); $('#table-area td').hover(function() { for (var x = 0; x <= $(this).index(); x++) { for (var y = 0; y <= $(this).parent().index(); y++) { $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected'); } } }, function() { $('#table-area td').removeClass('selected'); }); </script> <div class="container" id="smilies-area" style="display:none" onclick="changeVisibility('smilies-area')"> <div id="smilies-block"></div> </div> <script type="text/javascript"> FORUM.set('editor.smile.dir', 'img/smilies/MyBB/universal'); FORUM.set('editor.smile.smilies', {":angry:":"angry.gif","o.O":"blink.gif",":blush:":"blush.gif",":canthearyou:":"canthearyou.gif",":confused:":"confused.gif",":cool:":"cool.gif",":crazyfun:":"crazyfun.gif",":crazy:":"crazy.gif",":'(":"cry.gif",":disappointed:":"disappointed.gif",":dontcare:":"dontcare.gif",":dontknow:":"dontknow.gif",":flag:":"flag.gif",":flirt:":"flirt.gif","8-)":"funny.gif",":glasses:":"glasses.gif","^^":"happy.gif",":hobo:":"hobo.gif",":huh:":"huh.gif",":idea:":"idea.gif",":insane:":"insane.gif",":jumping:":"jumping.gif",":D":"lol.gif",":love:":"love.gif",":mad:":"mad.gif",":music:":"music.gif",":mybb:":"mybb.gif",":|":"neutral.gif",":no:":"no.gif",":nope:":"nope.gif",":offtop:":"offtop.gif",":playful:":"playful.gif",":question:":"question.gif",":rain:":"rain.gif",":rofl:":"rofl.gif",":rolleyes:":"rolleyes.gif",":(":"sad.gif",":sceptic:":"sceptic.gif",":shine:":"shine.gif",":O":"shock.gif",":x":"sick.gif",":)":"smile.gif",":smoke:":"smoke.gif",":stupor:":"stupor.gif",":surprise:":"surprise.gif",":suspicious:":"suspicious.gif",":tired:":"tired.gif",":tomato:":"tomato.gif",":P":"tongue.gif",":unsure:":"unsure.gif","%-)":"wacko.gif",":whistle:":"whistle.gif",";)":"wink.gif",":writing:":"writing.gif",":yep:":"yep.gif"}); </script> <div class="container" id="image-area" style="display:none"> <div id="image-area-sels" style="display:block"> <div><strong>Выберите источник изображения</strong></div> <div id="image-source-list"> <a id="action-computer" class="turn_link">С компьютера</a> <a id="action-internet" class="turn_link">Из интернета</a> </div> </div> <div id="image-area-tcon-internet" style="display:none"> <div id="image-area-thd">Вставьте ссылки на изображения (по одной на строку)</div> <textarea id="image-area-tinp" rows="5"></textarea> </div> <div id="image-area-tcon-computer" style="display:none"> <table cellpadding="0" cellspacing="0"> <tr valign="top"> <td id="imageupload-left"> <div id="image_upload"><input id="image_upload_input" type="file" name="files[]" multiple /><input class="button" type="button" value="Выберите файлы" /></div> <div id="file"></div> <div id="image-width" style="display:none"></div> <div id="image-thumb-width" style="display:none"></div> <div id="upload-button-container" style="display:none"><input id="upload-button" class="button" type="button" value="Загрузить" /></div> <div id="image-insert-format" style="display:none"></div> </td> <td id="imageupload-right"> <div id="load-image-container" style="display:none"> <div id="imageQueue" style="display:none"></div> <div id="uploaded-images" style="display:none"></div> </div> <div id="insert-image-tip" style="display:none"><span>Нажмите на изображение, чтобы вставить в форму.</span></div> </td> </tr> </table> </div> <div id="image-area-actions" style="display:none"> <a id="action-insert-textarea" style="display:none">Вставить</a> <a id="action-insert-uploaded" style="display:none">Вставить все</a> <a id="action-clean-textarea" style="display:none">Очистить</a> <a id="action-clean-uploaded" style="display:none">Очистить</a> <a id="action-return">Другой источник</a> <a id="action-close">Закрыть</a> </div> </div> <div class="container" id="video-area" style="display:none"> <div id="video-area-hsel" style="display:block;" onclick="MYBB_vsi(this,arguments)"> <div><strong>Выберите видеохостинг</strong></div> <div id="video-host-list"></div> </div> <div id="video-area-tcon" style="display:none;"> <div id="video-area-thd">Вставьте ссылку или embed-код видеофайла</div> <textarea id="video-area-tinp" onclick="this.select();"></textarea> <div id="video-area-msg"></div> </div> <div id="video-area-actions" style="display:none"> <a href="#" onclick="MYBB_vsc.parse(); return false;">Вставить</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onclick="changeVisibility('video-area'); return false;">Закрыть</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onclick="MYBB_vsc.reInit(); return false;">Другой хостинг</a> </div> </div> <div class="container" id="spoiler-area" style="display:none"> <div id="spoiler-sels"> <div><strong>Выберите тип спойлера</strong></div> <div id="spoiler-type-list"> <a href="#" onclick="return tag_spoiler('media');">Спойлер для медиа</a> <a href="#" onclick="return tag_spoiler('spoiler');">Спойлер для текста</a> </div> </div> </div> <script type="text/javascript"> html = []; $.each(FORUM.get('editor.video.hosts'), function(key,value){ html.push('<a class="turn_link" href="#'+value+'">'+value+'</a>'); }); $('#video-host-list').append(html.join(', ')); </script> <div class="container" id="keyboard-area" style="display:none"> <span id="keyboard-span"></span> </div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.keyboard.keys'), function(key,value){ html += value == '_NL_' ? '<br />' : '<input type="button" value="'+value+'" onclick="keyboard(\''+value+'\')" />'; }); $('#keyboard-span').append(html); </script> <div class="container" id="addition-area" style="display:none" onclick="changeVisibility('addition-area')"></div> <script type="text/javascript"> html = ''; $.each(FORUM.get('editor.addition.tags'), function(key,value){ html += '<div onclick="FORUM.get(\'editor.addition.tags.'+key+'.onclick()\')"><span>'+value.name+'</span></div>'; }); $('#addition-area').append(html); </script> </div> <p class="inputfield required"> <label for="fld1">Имя</label><br /> <span class="input"><input type="text" id="fld1" name="req_username" value="" size="25" maxlength="25" /></span> </p> <p class="areafield required"> <span class="input"><textarea id="main-reply" name="req_message" rows="13"></textarea></span> </p> <!-- WYSI - визуальный редактор сообщений © Alex_63, 2024 <style> /* Подсветка кнопок WYSI для новой формы ответа */ .fo-buttons span.wysi-highlight { color: #333; background-color: #aaa; } .fo-lists span.wysi-highlight { background-color: #ddd; } .fo-lists .colors span.wysi-highlight { outline: solid 3px #bbb; } </style> <link rel="stylesheet" type="text/css" href="https://forumstatic.ru/f/ru/bestbb/wysi.css" /> <script type="text/javascript" src="https://forumstatic.ru/f/ru/bestbb/wysi.js"></script> <style> #wysi-reply.post-content {margin-bottom: 0;} .wysi-active #tags.wysi-disabled .fo-lists .container {opacity: .5; cursor: not-allowed !important;} .wysi-active #form-buttons.wysi-disabled .fo-buttons, .wysi-active #tags.wysi-disabled .fo-lists .container *[onclick] {pointer-events: none;} </style> <script> //Доп.атрибуты для подсветки кнопок $(function() { $('.fo-butblok>span').attr('data-action', function() { return $(this).attr('onclick') ? $(this).attr('onclick').match(/\.([^\.]+)\.onclick/)[1] : $(this).attr('class').match(/\s([^-]+)-button/)[1] }); $('.fo-lists>.container').attr('data-container', function() { return $(this).attr('class').split('s container')[0] }) .find('span[style]').each(function() { var style = $(this).attr('style'); var prop = style && style.split(':')[0]; $(this).attr('data-style', prop + ':' + $(this).css(prop)); }) .end().find('span[onclick]').not('[style]').each(function() { var action = $(this).attr('onclick').replace(/^.+?\((.+)\)/, '$1').split('.')[3]; $(this).attr('data-tag', action); }); }); </script> --> <!-- BB-цитирование © Alex_63, 2024 --> <script type="text/javascript" src="https://forumstatic.ru/f/su/1bb/bbquote.js"></script> <script type="text/javascript" src="https://forumstatic.ru/f/su/1bb/bbquote.custom_quotes.js"></script> <!-- Перенос формы ответа под отвечаемое сообщение (c) 2017 --> <script type="text/javascript"> (function() { if (!$('#pun-viewtopic').length) return; var tstPrev = false, prevElem, form, cnt, cntPrev; $(window).on('click', '.fd-name a,.pl-quote a,.pl-BBquote,.pl-reply a,.fd-ava-but a', function() { form = $('#post-form'); if (!tstPrev) prevElem = form.prev(), tstPrev = true; $('script', form).remove(); form.insertAfter($(this).parents('.post')); if (!$('.button[name=cancel]', form).length) $('.button[name=preview]', form).after(' <input type="button" class="button" id="rus" name="cancel" value="Отмена" />'); if ($.trim($('#main-reply', form).val()) != cnt) cntPrev = $.trim($('#main-reply', form).val()); setTimeout(function() { cnt = $.trim($('#main-reply', form).val()); }, 10); }).on('click', '.button[name=cancel]', function() { form.insertAfter(prevElem); $('.fs-box .container[id]:visible', form).hide(); $(this).remove(); if ($.trim($('#main-reply', form).val()) == cnt) $('#main-reply', form).val(cntPrev); }); })(); </script> <!-- Кастомная форма ответа: начало --> <div id="my-fo"> <!-- кнопки начало --><div class="fo-buttons"> <div class="fo-butblok"> <span class="material-icons font-button ank-hide mobhide" title="<gg class='rus'>Шрифт</gg><gg class='eng'>Font</gg>">font_download</span> <span class="material-icons size-button ank-hide mobhide" title="<gg class='rus'>Размер</gg><gg class='eng'>Size</gg>">format_size</span> <span class="material-icons" onclick="FORUM.get('editor.bold.onclick()')" title="<gg class='rus'>Жирный</gg><gg class='eng'>Bold</gg>">format_bold</span> <span class="material-icons" onclick="FORUM.get('editor.italic.onclick()')" title="<gg class='rus'>Курсив</gg><gg class='eng'>Italic</gg>">format_italic</span> <span class="material-icons" onclick="FORUM.get('editor.underline.onclick()')" title="<gg class='rus'>Подчеркнутый</gg><gg class='eng'>Underline</gg>">format_underlined</span> <span class="material-icons" onclick="FORUM.get('editor.strike.onclick()')" title="<gg class='rus'>Зачеркнутый</gg><gg class='eng'>Strike</gg>">strikethrough_s</span> <span class="material-icons ank-hide" onclick="FORUM.get('editor.addition.tags.mark.onclick()')" title="<gg class='rus'>Маркированный</gg><gg class='eng'>Marked</gg>">format_paint</span> <span class="material-icons color-button ank-hide" title="<gg class='rus'>Цвет</gg><gg class='eng'>Color</gg>">color_lens</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span class="material-icons" onclick="FORUM.get('editor.left.onclick()')" title="<gg class='rus'>Выравнивание слева</gg><gg class='eng'>Align left</gg>">format_align_left</span> <span class="material-icons" onclick="FORUM.get('editor.center.onclick()')" title="<gg class='rus'>Выравнивание по центру</gg><gg class='eng'>Align center</gg>">format_align_center</span> <span class="material-icons" onclick="FORUM.get('editor.right.onclick()')" title="<gg class='rus'>Выравнивание справа</gg><gg class='eng'>Align right</gg>">format_align_right</span> <span class="material-icons list-button" title="<gg class='rus'>Список</gg><gg class='eng'>List</gg>">list</span> <span class="material-icons ank-hide mobhide" onclick="FORUM.get('editor.table.onclick()')" title="<gg class='rus'>Таблица</gg><gg class='eng'>Table</gg>">table_view</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span class="material-icons" onclick="FORUM.get('editor.link.onclick()')" title="<gg class='rus'>Ссылка</gg><gg class='eng'>Link</gg>">link</span> <span class="material-icons image-button" onclick="FORUM.get('editor.image.onclick()')" title="<gg class='rus'>Изображение</gg><gg class='eng'>Image</gg>">add_photo_alternate</span> <span class="material-icons video-button" onclick="FORUM.get('editor.video.onclick()')" title="<gg class='rus'>Видео</gg><gg class='eng'>Video</gg>">ondemand_video</span> <span class="material-icons smile-button ank-hide" onclick="FORUM.get('editor.smile.onclick()')" title="<gg class='rus'>Смайлы</gg><gg class='eng'>Smiles</gg>">mood</span> <span class="material-icons rus" onclick="FORUM.get('editor.voice.onclick()')" title="Голосовое сообщение">mic</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span class="material-icons spoiler-button" onclick="FORUM.get('editor.spoiler.onclick()')" title="<gg class='rus'>Свернутый текст</gg><gg class='eng'>Spoiler</gg>">content_cut</span> <span onclick="FORUM.get('editor.hide.onclick()')" class="material-icons" title="<gg class='rus'>Скрытый текст</gg><gg class='eng'>Hidden text</gg>">lock_open</span> <span onclick="FORUM.get('editor.quote.onclick()')" class="material-icons" title="<gg class='rus'>Цитата</gg><gg class='eng'>Quote</gg>">format_quote</span> <span class="material-icons code-button" title="<gg class='rus'>Код/Текст для копирования</gg><gg class='eng'>Code/Text to copy</gg>">code</span> </div> <div class="sep"></div> <div class="fo-butblok"> <span onclick="FORUM.get('editor.addition.tags.hr.onclick()')" class="material-icons mobhide" title="<gg class='rus'>Горизонтальная линия</gg><gg class='eng'>Horizontal line</gg>">horizontal_rule</span> <span onclick="FORUM.get('editor.addition.tags.anchor.onclick()')" class="material-icons mobhide" title="<gg class='rus'>Якорь</gg><gg class='eng'>Anchor</gg>">anchor</span> <span onclick="FORUM.get('editor.addition.tags.abbr.onclick()')" class="material-icons mobhide" title="<gg class='rus'>Поясняющий текст</gg><gg class='eng'>Tooltip text</gg>">live_help</span> <span class="material-icons symbol-button ank-hide mobhide" title="<gg class='rus'>Символы</gg><gg class='eng'>Symbols</gg>">emoji_symbols</span> <span class="material-icons aditional-button ank-hide mobhide" title="<gg class='rus'>Дополнительно</gg><gg class='eng'>Additionally</gg>">library_add</span> </div> </div><!-- кнопки конец --> </div> <!-- раскрывающиеся списки --><div class="fo-lists"> <!-- списки --> <div class="lists container"> <span onclick="bbcode('[ul=disc]','[/ul]')" class="disc"><ul><li><gg class='rus'>Точками</gg><gg class='eng'>Dots</gg></li></ul></span> <span onclick="bbcode('[ul=circle]','[/ul]')" class="circle"><ul><li><gg class='rus'>Кружочками</gg><gg class='eng'>Circles</gg></li></ul></span> <span onclick="bbcode('[ul=square]','[/ul]')" class="square"><ul><li><gg class='rus'>Квадратами</gg><gg class='eng'>Squares</gg></li></ul></span> <span onclick="bbcode('[ul=decimal]','[/ul]')" class="decimal"><ul><li><gg class='rus'>Цифрами</gg><gg class='eng'>Numbers</gg></li></ul></span> <span onclick="bbcode('[ul=upper-roman]','[/ul]')" class="roman"><ul><li><gg class='rus'>Римскими цифрами</gg><gg class='eng'>Roman Numerals</gg></li></ul></span> <span onclick="bbcode('[ul=none]','[/ul]')" class="nopadding"><ul><li><gg class='rus'>Без обозначений</gg><gg class='eng'>No Markers</gg></li></ul></span> <span onclick="bbcode('[*',']')" class="nopadding"><gg class='rus'>Многострочный пункт списка</gg><gg class='eng'>Multiline List Item</gg></span> </div> <!-- коды --> <div class="codes container"> <span onclick="bbcode('[code]','[/code]')" class="disc"><ul><li><gg class='rus'>Текст</gg><gg class='eng'>Text</gg></li></ul></span> <span onclick="bbcode('[block=code-html][code]','[/code][/block]')" class="disc"><ul><li>HTML</li></ul></span> <span onclick="bbcode('[block=code-css][code]','[/code][/block]')" class="disc"><ul><li>CSS</li></ul></span> <span onclick="bbcode('[block=code-javascript][code]','[/code][/block]')" class="disc"><ul><li>Javascript</li></ul></span> </div> <!-- шрифты --> <div class="fonts container"> <span style="font-family:Bebas Neue" onclick="bbcode('[font=Bebas Neue]','[/font]')">Bebas Neue</span> <span style="font-family:Arial" onclick="bbcode('[font=Arial]','[/font]')">Arial</span> <span style="font-family:Georgia" onclick="bbcode('[font=Georgia]','[/font]')">Georgia</span> <span style="font-family:Microsoft Sans Serif" onclick="bbcode('[font=Microsoft Sans Serif]','[/font]')">Microsoft Sans Serif</span> <span style="font-family:Tahoma" onclick="bbcode('[font=Tahoma]','[/font]')">Tahoma</span> <span style="font-family:Verdana" onclick="bbcode('[font=Verdana]','[/font]')">Verdana</span> <span style="font-family:Century Gothic" onclick="bbcode('[font=Century Gothic]','[/font]')">Century Gothic</span> <span style="font-family:Palatino Linotype" onclick="bbcode('[font=Palatino Linotype]','[/font]')">Palatino Linotype</span> <span style="font-family:Times New Roman" onclick="bbcode('[font=Times New Roman]','[/font]')">Times New Roman</span> <span style="font-family:Franklin Gothic Medium" onclick="bbcode('[font=Franklin Gothic Medium]','[/font]')">Franklin Gothic Medium</span> <span style="font-family:Impact" onclick="bbcode('[font=Impact]','[/font]')">Impact</span> <span style="font-family:Arial Black" onclick="bbcode('[font=Arial Black]','[/font]')">Arial Black</span> <span style="font-family:Courier New" onclick="bbcode('[font=Courier New]','[/font]')">Courier New</span> <span style="font-family:Lucida Console" onclick="bbcode('[font=Lucida Console]','[/font]')">Lucida Console</span> <span style="font-family:Comic Sans Ms" onclick="bbcode('[font=Comic Sans Ms]','[/font]')">Comic Sans Ms</span> </div> <!-- размеры --> <div class="sizes container"> <span style="font-size:10px" onclick="bbcode('[size=10]','[/size]')">10px</span> <span style="font-size:12px" onclick="bbcode('[size=12]','[/size]')">12px</span> <span style="font-size:14px" onclick="bbcode('[size=14]','[/size]')">14px</span> <span style="font-size:16px" onclick="bbcode('[size=16]','[/size]')">16px</span> <span style="font-size:18px" onclick="bbcode('[size=18]','[/size]')">18px</span> <span style="font-size:20px" onclick="bbcode('[size=20]','[/size]')">20px</span> <span style="font-size:22px" onclick="bbcode('[size=22]','[/size]')">22px</span> </div> <!-- цвета --> <div class="colors container"> <span style="background-color: #f98561;" onclick="bbcode('[color=#f98561]','[/color]')"></span> <span style="background-color: #b80000;" onclick="bbcode('[color=#b80000]','[/color]')"></span> <span style="background-color: #e63737;" onclick="bbcode('[color=#e63737]','[/color]')"></span> <span style="background-color: #f7941d;" onclick="bbcode('[color=#f7941d]','[/color]')"></span> <span style="background-color: #e36120;" onclick="bbcode('[color=#e36120]','[/color]')"></span> <span style="background-color: #29aecb;" onclick="bbcode('[color=#29aecb]','[/color]')"></span> <span style="background-color: #00a1e4;" onclick="bbcode('[color=#00a1e4]','[/color]')"></span> <span style="background-color: #0481d9;" onclick="bbcode('[color=#0481d9]','[/color]')"></span> <span style="background-color: #0080b7;" onclick="bbcode('[color=#0080b7]','[/color]')"></span> <span style="background-color: #1c8426;" onclick="bbcode('[color=#1c8426]','[/color]')"></span> <span style="background-color: #26af33;" onclick="bbcode('[color=#26af33]','[/color]')"></span> <span style="background-color: #71218e;" onclick="bbcode('[color=#71218e]','[/color]')"></span> <span style="background-color: #a726af;" onclick="bbcode('[color=#a726af]','[/color]')"></span> <span style="background-color: #2e3e4f;" onclick="bbcode('[color=#2e3e4f]','[/color]')"></span> <span style="background-color: #2d343a;" onclick="bbcode('[color=#2d343a]','[/color]')"></span> <span style="background-color: #666666;" onclick="bbcode('[color=#666666]','[/color]')"></span> <span style="background-color: #a5a5a5;" onclick="bbcode('[color=#a5a5a5]','[/color]')"></span> <span style="background-color: #d7d7d7;" onclick="bbcode('[color=#d7d7d7]','[/color]')"></span> <span style="background-color: #000000;" onclick="bbcode('[color=#000000]','[/color]')"></span> <span style="background-color: #ffffff;" onclick="bbcode('[color=#ffffff]','[/color]')"></span> </div> <!-- символы --> <div class="symbols container"> <span onclick="keyboard('©')">©</span> <span onclick="keyboard('®')">®</span> <span onclick="keyboard('&#8482;')">&#8482;</span> <span onclick="keyboard('«')">«</span> <span onclick="keyboard('»')">»</span> <span onclick="keyboard('&#10077;')">&#10077;</span> <span onclick="keyboard('&#10078;')">&#10078;</span> <span onclick="keyboard('&#162;')">&#162;</span> <span onclick="keyboard('&#8364;')">&#8364;</span> <span onclick="keyboard('&#163;')">&#163;</span> <span onclick="keyboard('&#8381;')">&#8381;</span> <span onclick="keyboard('&#8383;')">&#8383;</span> <span onclick="keyboard('&#10008;')">&#10008;</span> <span onclick="keyboard('&#10004;')">&#10004;</span> <span onclick="keyboard('&#9746;')">&#9746;</span> <span onclick="keyboard('&#9745;')">&#9745;</span> <span onclick="keyboard('&#9744;')">&#9744;</span> <span onclick="keyboard('&#9679;')">&#9679;</span> <span onclick="keyboard('&#8226;')">&#8226;</span> <span onclick="keyboard('&#9724;')">&#9724;</span> <span onclick="keyboard('&#9706;')">&#9706;</span> <span onclick="keyboard('&#9726;')">&#9726;</span> <span onclick="keyboard('&#9673;')">&#9673;</span> <span onclick="keyboard('&#9670;')">&#9670;</span> <span onclick="keyboard('&#9684;')">&#9684;</span> <span onclick="keyboard('&#9792;')">&#9792;</span> <span onclick="keyboard('&#9794;')">&#9794;</span> <span onclick="keyboard('&#10084;')">&#10084;</span> <span onclick="keyboard('&#9835;')">&#9835;</span> <span onclick="keyboard('&#12483;')">&#12483;</span> <span onclick="keyboard('&#10052;')">&#10052;</span> <span onclick="keyboard('&#9728;')">&#9728;</span> <span onclick="keyboard('&#9729;')">&#9729;</span> <span onclick="keyboard('&#10059;')">&#10059;</span> <span onclick="keyboard('&#10047;')">&#10047;</span> <span onclick="keyboard('&#9998;')">&#9998;</span> <span onclick="keyboard('&#9986;')">&#9986;</span> <span onclick="keyboard('&#9733;')">&#9733;</span> <span onclick="keyboard('&#9734;')">&#9734;</span> <span onclick="keyboard('&#8249;')">&#8249;</span> <span onclick="keyboard('&#8250;')">&#8250;</span> <span onclick="keyboard('&#8592;')">&#8592;</span> <span onclick="keyboard('&#8593;')">&#8593;</span> <span onclick="keyboard('&#8594;')">&#8594;</span> <span onclick="keyboard('&#8595;')">&#8595;</span> <span onclick="keyboard('&#8596;')">&#8596;</span> <span onclick="keyboard('&#8597;')">&#8597;</span> <span onclick="keyboard('&#9668;')">&#9668;</span> <span onclick="keyboard('&#9650;')">&#9650;</span> <span onclick="keyboard('&#9658;')">&#9658;</span> <span onclick="keyboard('&#9660;')">&#9660;</span> <span onclick="keyboard('&#9666;')">&#9666;</span> <span onclick="keyboard('&#9652;')">&#9652;</span> <span onclick="keyboard('&#9656;')">&#9656;</span> <span onclick="keyboard('&#9662;')">&#9662;</span> <span onclick="keyboard('&#9471;')">&#9471;</span> <span onclick="keyboard('&#10102;')">&#10102;</span> <span onclick="keyboard('&#10103;')">&#10103;</span> <span onclick="keyboard('&#10104;')">&#10104;</span> <span onclick="keyboard('&#10105;')">&#10105;</span> <span onclick="keyboard('&#10106;')">&#10106;</span> <span onclick="keyboard('&#10107;')">&#10107;</span> <span onclick="keyboard('&#10108;')">&#10108;</span> <span onclick="keyboard('&#10109;')">&#10109;</span> <span onclick="keyboard('&#10110;')">&#10110;</span> <span onclick="keyboard('&#10111;')">&#10111;</span> </div> <!-- Дополнительно --> <div class="aditionals container"> <span onclick="bbcode('[size=28][font=Bebas Neue]','[/font][/size]');"><gg class='rus'>Заголовок</gg><gg class='eng'>Title</gg></span> <span onclick="bbcode('[block=prev][align=center]','[/align][/block]');"><gg class='rus'>Автосжатие больших картинок</gg><gg class='eng'>Auto-resize large images</gg></span> <span onclick="bbcode('[block=hidecode][hide]','[/hide][/block]');"><gg class='rus'>Скрыть от гостей</gg><gg class='eng'>Hide from guests</gg></span> <span class="rus" onclick="bbcode('[block=hidelink][hide][block=superlink][url=',']СКАЧАТЬ[/url][/block][/hide][/block]');">Ссылка «скачать»</span> <span class="eng" onclick="bbcode('[block=hidelink][hide][block=superlink][url=',']DOWNLOAD[/url][/block][/hide][/block]');">Download link</span> <span onclick="FORUM.get('editor.addition.tags.you.onclick()')"><gg class='rus'>Имя читателя</gg><gg class='eng'>Reader's name</gg></span> <span onclick="FORUM.get('editor.addition.tags.add.onclick()')"><gg class='rus'>Добавлено спустя&#8230;</gg><gg class='eng'>Added after...</gg></span> <span onclick="FORUM.get('editor.addition.tags.sup.onclick()')"><gg class='rus'>Надстрочный текст</gg><gg class='eng'>Superscript text</gg></span> <span onclick="FORUM.get('editor.addition.tags.sub.onclick()')"><gg class='rus'>Подстрочный текст</gg><gg class='eng'>Subscript text</gg></span> <span onclick="bbcode('[block=class]','[/block]');" class="userhide"><gg class='rus'>Блок</gg><gg class='eng'>Block</gg></span> <span onclick="bbcode('[html]','[/html]');" class="userhide">HTML</span> <span onclick="bbcode('[icon]verified','[/icon]');" class="userhide">иконка</span> </div> </div><!-- раскрывающиеся списки --> <!-- ---------------- --> <script type="text/javascript"> $('#my-fo').appendTo('#form-buttons'); $('.fo-lists').appendTo('#tags'); var buttonList = [ {button: ".code-button", list: ".codes"}, {button: ".font-button", list: ".fonts"}, {button: ".size-button", list: ".sizes"}, {button: ".color-button", list: ".colors"}, {button: ".list-button", list: ".lists"}, {button: ".symbol-button", list: ".symbols"}, {button: ".aditional-button", list: ".aditionals"} ]; buttonList.forEach(function(item) { $("#form-buttons " + item.button).click(function() { $("#tags .fo-lists " + item.list).toggleClass('show'); }); }); </script> <!-- Новая форма ответа: Конец --> <!-- Кнопка шаблона для новой формы --> <script type="text/javascript"> $(document).ready(function() { if ($('#post #addition-area div[onclick*="addition.tags.pattern"]').length) { $('#my-fo .fo-butblok').first().before('<span id="fo-shablon" class="material-icons tip" onclick="FORUM.get(\'editor.addition.tags.pattern.onclick()\')" title="Шаблон добавления материала">note_add</span><div class="sep sep-shab"></div>'); } //Скрытие кнопки шаблонов в некоторых разделах var shabforums = [5, 6, 19]; for (var i = 0; i < shabforums.length; i++) { var crumbsSelector = 'a[href="/viewforum.php?id=' + shabforums[i] + '"]'; var hideShab = document.querySelector(crumbsSelector); if (hideShab) { $("#fo-shablon").not('[onclick*="voice"]').addClass('moderator-ann2'); $(".sep-shab").addClass('moderator-ann2'); } } }); </script> <style> .fo-buttons #fo-shablon {background-color: #e63737; color: #fff;} .fo-buttons #fo-shablon:hover {background-color: #2e3e4f; color: #e63737;} </style> <!--дополнительные смайлы--> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/75411.js" defer></script> <!-- Инструментарий: Пресеты тегов для топиков портфолио --> <div id="pt-swich" class="superlink"><a class="pt-hide tip" title="убрать инструментарий спец-топиков">Скрыть инструментарий</a><a class="pt-show tip" title=" инструментарий спец-топиков">Показать инструментарий</a></div> <div id="pt-inside"> <div id="portfolio-tags"> <h4>Теги оформления специальных постов</h4> <div class="pt-row"> <div class="pt-click red tip" title="Обязательный тег для создания специального поста:<br><img src='https://i.imgur.com/sXmPgWq.jpg'>">Сделать пост специальным<span class="pttag-cont">[block="portfoliopost"]portfoliopost[/block],</span></div> <div class="pt-click tip" title="Перекрашивает специальный пост в более светлые тона">Светлый фон<span class="pttag-cont">[block="makeportfoliolight"]makeportfoliolight[/block],</span></div> <div class="pt-click tip" title="Элементы поста красного цвета:<br><img src='https://i.imgur.com/2yNshzv.jpg'>">Красный пост<span class="pttag-cont">[block="saledpost"]saledpost[/block],</span></div> <div class="pt-click tip" title="Элементы поста синего цвета:<br><img src='https://i.imgur.com/YnDb3Ar.jpg'>">Синий пост<span class="pttag-cont">[block="forsalepost"]forsalepost[/block],</span></div> <div class="pt-click tip"title="Элементы поста зеленого цвета:<br><img src='https://i.imgur.com/H4ATE6K.jpg'>">Зеленый пост<span class="pttag-cont">[block="freepost"]freepost[/block],</span></div> <br> <div class="pt-click red tip" title="Обязательный тег для создания поста в рамочке на всю ширину форума (но без профиля):<br><img src='https://i.imgur.com/7k916GZ.png'>">Пост без профиля<span class="pttag-cont">[block="no-prof"]no-prof[/block],</span></div> </div> <h4>Теги оформления картинок</h4> <p><b>Обложки: </b>Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px</p> <div class="pt-row"> <div class="pt-click tip" title="Вставить простую обложку:<br><img src='https://i.imgur.com/DpG7E19.jpg'>">Обложка<span class="pttag-cont">[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <div class="pt-click tip" title="Обложка с иконкой замка:<br><img src='https://i.imgur.com/akk5tJr.jpg'>">Закрыто<span class="pttag-cont">[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <div class="pt-click tip" title="Обложка с иконкой доллара:<br><img src='https://i.imgur.com/VtsGPlx.jpg'>">Продажа<span class="pttag-cont">[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <div class="pt-click tip" title="Обложка с иконкой подарка:<br><img src='https://i.imgur.com/VHGTul4.jpg'>">Подарок<span class="pttag-cont">[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]</span></div> <br> <p><b>Превью: </b>Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px</p> <div class="pt-click tip" title="Вставить блок для превью картинок:<br><img src='https://i.imgur.com/00hJCG0.jpg'>">Блок для превью<span class="pttag-cont">[block="morepics"],[/block]</span></div> <br> <p><b>Разноцветные картинки-ссылки: </b>Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)</p> <div class="pt-click tip" title="Вставляет блок для ОТОБРАЖЕНИЯ и выравнивания их по центру:<br><img src='https://i.imgur.com/tLqbv3Z.jpg'>">Блок для картинок-ссылок<span class="pttag-cont">[block="port-block"],[/block]</span></div> <div class="pt-click tip" title="Вставляет красный блок картинки-ссылки:<br><img src='https://i.imgur.com/a3D74QO.jpg'>">Красный<span class="pttag-cont">[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет синий блок картинки-ссылки:<br><img src='https://i.imgur.com/m8s4vcP.jpg'>">Синий<span class="pttag-cont">[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет зеленый блок картинки-ссылки:<br><img src='https://i.imgur.com/JLSrWtL.jpg'>">Зеленый<span class="pttag-cont">[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет желтый блок картинки-ссылки:<br><img src='https://i.imgur.com/jOJ7EsQ.jpg'>">Желтый<span class="pttag-cont">[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]</span></div> </div> <h4>Теги оформления контента</h4> <div class="pt-row"> <div class="pt-click tip" title="Создает блок с обведенным текстом:<br><img src='https://i.imgur.com/ouNs2Hb.jpg'>">Обведенный текст<span class="pttag-cont">[block="details"] [block="det"],[/block] [/block]</span></div> <div class="pt-click tip" title="Добавить еще один внутренний блок для текста в ряд:<br><img src='https://i.imgur.com/pTAQB0C.jpg'>">Добавить еще блок<span class="pttag-cont">[block="det"],[/block]</span></div> <br> <div class="pt-click tip" title="Добавляет блок с ссылками-кнопками:<br><img src='https://i.imgur.com/PNFlJfB.jpg'>">Блок с кнопками<span class="pttag-cont">[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]</span></div> <div class="pt-click tip" title="Вставляет синюю кнопку:<br><img src='https://i.imgur.com/KblQToG.jpg'>">Синяя кнопка<span class="pttag-cont">[block="demo"][url=ссылка]текст,[/url][/block]</span></div> <div class="pt-click tip" title="Вставляет оранжевую кнопку:<br><img src='https://i.imgur.com/xmMJL1b.jpg'>">Оранжевая кнопка<span class="pttag-cont">[block="store"][url=ссылка]текст,[/url][/block]</span></div> </div> </div></div> <style> .pttag-cont, #portfolio-tags .pt-click.admin, #pt-inside, #pt-swich, #pt-swich.show .pt-show, #pt-swich .pt-hide {display:none;} .isadmin #portfolio-tags .pt-click.admin {display:inline-block;} .ismoderator #pt-swich, .gid6 #pt-swich, .gid16 #pt-swich, .ismoderator #pt-inside.show, .gid6 #pt-inside.show, .gid16 #pt-inside.show, .ismoderator #pt-swich.show .pt-hide, .gid6 #pt-swich.show .pt-hide, .gid16 #pt-swich.show .pt-hide {display:block;} #portfolio-tags {padding: 10px;} #portfolio-tags h4 {margin: 0 0 5px; font-family: 'Bebas Neue'; font-size: 20px; font-weight: normal;} #portfolio-tags p {margin:0;} #portfolio-tags .pt-row {padding-bottom: 10px;} #portfolio-tags .pt-click {cursor: pointer; display: inline-block; padding: 5px; border-radius: 5px; margin: 5px; font-size: 16px; text-transform: uppercase; background: #cacaca; color: #0080b7;} .dark #portfolio-tags .pt-click {background: #4f4f4f; color: #4eafc1;} #portfolio-tags .pt-click:hover, .dark #portfolio-tags .pt-click:hover {background: #2e3e4f; color: #e63737;} #portfolio-tags .pt-click.red, .dark #portfolio-tags .pt-click.red {background-color: #f98561; color: #fff;} #portfolio-tags .pt-click.red:hover, .dark #portfolio-tags .pt-click.red:hover {background-color: #e63737; color: #fff;} #portfolio-tags .pt-click.admin, .dark #portfolio-tags .pt-click.admin {background-color: #a726af; color: #fff;} #portfolio-tags .pt-click.admin:hover, .dark #portfolio-tags .pt-click.admin:hover {background-color: #71218e; color: #fff;} #pt-swich {margin: 10px 0 0;} #pt-swich.superlink a {cursor:pointer;} </style> <script type="text/javascript"> $("#portfolio-tags div").click(function(){ var L=$(this).find(".pttag-cont").html(); var P=L.split(','); bbcode(P[0],P[1]) return false; }); $(document).ready(function() { $(".pt-hide").click(function(){ $("#pt-inside").removeClass("show"); $("#pt-swich").removeClass("show"); }); $(".pt-show").click(function(){ $("#pt-inside").addClass("show"); $("#pt-swich").addClass("show"); }); }); </script> <!-- ------------------------------------------------------ админские инструментарии навигаторов ------------------------------------------------------ --> <!-- Пресеты тегов для навигатора по общему портфолио --> <div id="supertags2"><div id="meny-styles2" class="container"> <span class="addscript"><p>добавить работу <i>[block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block] </i> </p></span> <div class="icons"> <span class="menustylestext">Иконки:</span> <p><span class="icon material-icons">lock</span><i>[block="icon material-icons"]lock,[/block]</i></p> <p><span class="icon fa-solid fa-sack-dollar"></span><i>[block="icon fa-solid fa-sack-dollar"],[/block]</i></p> <p><span class="icon fa-solid fa-gift"></span><i>[block="icon fa-solid fa-gift"],[/block]</i></p> </div> <div class="sttags"> <span class="menustylestext">ТЕГИ</span> <span class="menustylestext2">(вставить в <b>p-out</b> через пробел)</span> <br> <div class="forumtags"> <span class="menustylestext3">Тип работы: </span> <span class="tag red"><p>под заказ<i> saled,</i></p></span> <span class="tag lightblue"><p>на продажу<i> forsale,</i></p></span> <span class="tag green"><p>бесплатно<i> free,</i></p></span> <br><br> <span class="menustylestext3">Основная категория: </span> <span class="tag"><p>Вебдизайн<i> dis,</i></p><em>(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)</em></span> <span class="tag"><p>Графика<i> graf,</i></p><em>(для графона, НЕ включающего кодинг/скрипты)</em></span> <span class="tag"><p>Скрипты/коды<i> code,</i></p><em>(для готовых разработок и работы по верстке/кодингу)</em></span> <br> <span class="menustylestext3">Мини-фильтры дизайнов: </span> <span class="tag orange"><p>адаптивные<i> mob,</i></p></span> <span class="tag blue"><p>ролевые игры<i> frpg,</i></p></span> <span class="tag yellow"><p>компьютерные игры<i> game,</i></p></span> <span class="tag orange"><p>нейтральные<i> flat,</i></p></span> </div> <div class="forumtags"> <span class="menustylestext3">Подкатегории: </span> <span class="tag"><p>Дизайн форумов/сайтов<i> fulldis,</i></p><em>(для полных работ по дизайну)</em></span> <span class="tag"><p>Макеты<i> layout,</i></p><em>(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)</em></span> <span class="tag"><p>Верстка<i> dis-code,</i></p><em>(для работ по верстке чужих дизайнов или отдельных штук)</em></span> <span class="tag"><p>Соц-сети/стримы<i> graf-s,</i></p><em>(графон для оформления соцсетей/стримов)</em></span> <span class="tag"><p>Ролевая графика/арт<i> art,</i></p><em>(для мелкой графики)</em></span> <span class="tag"><p>Javascript/CSS<i> js,</i></p><em>(для скриптов или выложенных цсс кодов)</em></span> </div> </div> </div></div> <style> #meny-styles3 i,#supertags2, #supertags3 {display: none;} #supertags2.show, #supertags3.show {display:block!important;} #supertags2 .container p, #supertags3 .container p { padding: 3px; border-radius: 3px; color: #fff; cursor:pointer; margin: 2px 0; font-size: 14px; display: inline-block; } #supertags2 .container p:hover, #supertags3 .container p:hover {background-color: #939393;} #supertags2 .container .addscript p, #supertags3 .container .addscript p {text-transform: uppercase;font-family: 'Bebas Neue', Impact;padding: 2px 10px 0;background: #f98561;border-bottom: 6px solid #e63737;border-radius: 0;font-size: 24px;} #supertags2 .container .addscript p:hover, #supertags3 .container .addscript p:hover {background: #e63737;} #supertags2 .addscript, #supertags3 .addscript {margin: 10px 10px 5px 0px; display: inline-block;} #supertags2 .icons {display: inline-block;vertical-align: bottom;} .menustylestext2 b {color: #e63737;} #supertags2 .icon.fa-gift {color: #26af33;} #supertags2 .icon.fa-sack-dollar {color: #00a1e4;} #supertags2 .icon.material-icons {color: #e63737;} .tag p {background: #1e1d1d;} .forumtags {margin-top: 6px;} .forumtags em {display: block;margin-bottom: 5px;font-size: 11px;} </style> <script type="text/javascript"> $("#supertags2").appendTo('#tags'); $("#meny-styles3 p").click(function(){ var L=$(this).find("i").html(); var P=L.split(','); bbcode(P[0],P[1]) return false; }); if(window.location.toString().indexOf('/viewtopic.php?id=7108')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178198')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178360')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178361')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178362')>0) {$("#supertags2").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178363')>0) {$("#supertags2").addClass('show');} </script> <!-- Пресеты тегов для навигатора по бесплатным дизам --> <div id="supertags3"><div id="meny-styles2" class="container"> <span class="addscript fd"><p>Бесплатный диз от FD <i>[block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block] </i> </p></span> <span class="addscript fdpay"><p>Платный диз от FD <i>[block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block] </i> </p></span> <span class="addscript norm"><p>Дизайн от юзеров <i>[block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block] </i> </p></span> <div class="sttags"> <span class="menustylestext">ТЕГИ</span> <span class="menustylestext2">(вставить в <b>p-out</b> через пробел)</span> <br> <div class="forumtags"> <span class="menustylestext3">Платформа: </span> <span class="tag blue"><p>MyBB.ru<i> mybb-ru,</i></p></span> <span class="tag red"><p>Макет (любая платформа)<i> any,</i></p></span> <br><br> <span class="menustylestext3">Параметры: </span> <span class="tag"><p>+ PSD<i> psd-in,</i></p><em>(в наличии макет помимо кодов)</em></span> <span class="tag"><p>+ адаптивка<i> mob,</i></p><em>(есть версия для мобилок)</em></span> </div> <div class="forumtags"> <span class="menustylestext3">Тематика: </span> <span class="tag orange"><p>нейтральные<i> flat,</i></p></span> <span class="tag blue"><p>ролевые игры<i> frpg,</i></p></span> <span class="tag yellow"><p>компьютерные игры<i> game,</i></p></span> <span class="tag lightblue"><p>фентези<i> fant,</i></p></span> <span class="tag red"><p>аниме<i> anime,</i></p></span> <span class="tag yellow"><p>кино/сериалы<i> kino,</i></p></span> <span class="tag green"><p>стимпанк/киберпанк<i> cyb,</i></p></span> <span class="tag yellow"><p>мультфильмы<i> kids,</i></p></span> <span class="tag orange"><p>животные<i> cats,</i></p></span> <br><br> <span class="menustylestext3">Цвета: </span> <span class="tag"><p>тёмные<i> darkst,</i></p></span> <span class="tag gray"><p>светлые<i> light,</i></p></span> <span class="tag orange"><p>яркие<i> bright,</i></p></span> </div> </div> </div></div> <style> #supertags3 .container .addscript.fd p {background: #26af33; border-bottom: 6px solid #1c8426;} #supertags3 .container .addscript.fd p:hover {background: #1c8426;} #supertags3 .container .addscript.fdpay p {background: #23afc8; border-bottom: 6px solid #0080b7;} #supertags3 .container .addscript.fdpay p:hover {background: #0080b7;} #supertags3 .container .addscript.norm p {background: #f7941d; border-bottom: 6px solid #e36120;} #supertags3 .container .addscript.norm p:hover {background: #e36120;} </style> <script type="text/javascript"> $("#supertags3").appendTo('#tags'); if(window.location.toString().indexOf('/viewtopic.php?id=7140')>0) {$("#supertags3").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178837')>0) {$("#supertags3").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=178838')>0) {$("#supertags3").addClass('show');} </script> <!-- Пресеты тегов для навигатора по скриптам --> <div id="supertags"><div id="meny-styles2" class="container"> <span class="addscript"><p>добавить скрипт/код <i>[block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block] </i> </p></span> <div class="icons"> <span class="menustylestext">Иконки:</span> <p><span class="icon fa-brands fa-js"></span><i>[block="icon fa-brands fa-js"],[/block]</i></p> <p><span class="icon fa-brands fa-css3-alt"></span><i>[block="icon fa-brands fa-css3-alt"],[/block]</i></p> <p><span class="icon fa-regular fa-file-lines"></span><i>[block="icon fa-regular fa-file-lines"],[/block]</i></p> <p><span class="icon fa-solid fa-file-code"></span><i>[block="icon fa-solid fa-file-code"],[/block]</i></p> <p><span class="icon fa-solid fa-file-invoice-dollar"></span><i>[block="icon fa-solid fa-file-invoice-dollar"],[/block]</i></p> </div> <div class="sttags"> <span class="menustylestext">ТЕГИ</span> <span class="menustylestext2">(*значение в скобках вставить в SCRBLOCK через пробел)</span> <div class="maintags"> <span class="menustylestext2">Тип кода: </span> <span class="tag blue"><p>скрипт (js)<i>[block="js"]скрипт, js[/block]</i></p></span> <span class="tag lightblue"><p>css код (css)<i>[block="css"]css код, css[/block]</i></p></span> <span class="tag orange"><p>HTML/CSS шаблоны (shab)<i>[block="shab"]HTML/CSS шаблоны, shab[/block]</i></p></span> <span class="tag red"><p>Модули/Расширения (global)<i>[block="global"]Модули/Расширения, global[/block]</i></p></span> <span class="menustylestext2">Платформа: </span> <span class="tag blue"><p>MyBB.ru (mybb-ru)<i>[block="mybb-ru"]MyBB.ru, mybb-ru[/block]</i></p></span> <span class="tag red"><p>Любой движок (any)<i>[block="any"]Любой движок, any[/block]</i></p></span> </div> <div class="forumtags"> <span class="menustylestext3">Тип для форума: </span> <span class="tag orange"><p>Пользователи (users)<i>[block="users"]Пользователи, users[/block]</i></p></span> <span class="tag green"><p>Профиль (userprof)<i>[block="userprof"]Профиль, userprof[/block]</i></p></span> <span class="tag lightblue"><p>Доп. поля профиля (adfield)<i>[block="adfield"]Доп. поля профиля, adfield[/block]</i></p></span> <span class="tag yellow"><p>Аватары (avatars)<i>[block="avatars"]Аватары, avatars[/block]</i></p></span> <span class="tag lightblue"><p>Репутация (repa)<i>[block="repa"]Репутация, repa[/block]</i></p></span> <br> <span class="tag orange"><p>Группы (groups)<i>[block="groups"]Группы, groups[/block]</i></p></span> <span class="tag green"><p>Гoсти (guest)<i>[block="guest"]Гoсти, guest[/block]</i></p></span> <span class="tag red"><p>Администраторы (admins)<i>[block="admins"]Администраторы, admins[/block]</i></p></span> <span class="tag blue"><p>Модераторы (moders)<i>[block="moders"]Модераторы, moders[/block]</i></p></span> <br> <span class="tag yellow"><p>Регистрация (regis)<i>[block="regis"]Регистрация, regis[/block]</i></p></span> <span class="tag lightblue"><p>Личные сообщения (ls)<i>[block="ls"]Личные сообщения, ls[/block]</i></p></span> <span class="tag yellow"><p>Вход (login)<i>[block="login"]Вход, login[/block]</i></p></span> <span class="tag lightblue"><p>Подписки (subsc)<i>[block="subsc"]Подписки, subsc[/block]</i></p></span> <br> <span class="tag yellow"><p>Поиск (search)<i>[block="search"]Поиск, search[/block]</i></p></span> <span class="tag lightblue"><p>Цитирование (quotes)<i>[block="quotes"]Цитирование, quotes[/block]</i></p></span> <span class="tag yellow"><p>Пагинация (pagin)<i>[block="pagin"]Пагинация, pagin[/block]</i></p></span> <span class="tag green"><p>Опросы (polls)<i>[block="polls"]Опросы, polls[/block]</i></p></span> <span class="tag yellow"><p>Смайлы (smiles)<i>[block="smiles"]Смайлы, smiles[/block]</i></p></span> <br> <span class="tag lightblue"><p>Фикс скриптов QuadroBoards (qbfix)<i>[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]</i></p></span> </div> <div class="forumtags"> <span class="menustylestext3">Страница форума: </span> <span class="tag red"><p>На всех страницах (allpages)<i>[block="allpages"]На всех страницах, allpages[/block]</i></p></span> <span class="tag orange"><p>Страницы (созд. в админке) (fpages)<i>[block="fpages"]Страницы (соз. в админке), fpages[/block]</i></p></span> <br> <span class="tag orange"><p>Главная страница (mainpage)<i>[block="mainpage"]Главная страница, mainpage[/block]</i></p></span> <span class="tag yellow"><p>Объявление (announ)<i>[block="announ"]Объявление, announ[/block]</i></p></span> <span class="tag green"><p>Категории (categ)<i>[block="categ"]Категории, categ[/block]</i></p></span> <span class="tag yellow"><p>Форумы (forums)<i>[block="forums"]Форумы, forums[/block]</i></p></span> <span class="tag lightblue"><p>Статистика (stats)<i>[block="stats"]Статистика, stats[/block]</i></p></span> <br> <span class="tag orange"><p>Список тем (topiclist)<i>[block="topiclist"]Список тем, topiclist[/block]</i></p></span> <span class="tag yellow"><p>Страница профиля (profpage)<i>[block="profpage"]Страница профиля, profpage[/block]</i></p></span> <br> <span class="tag orange"><p>Тема (topics)<i>[block="topics"]Тема, topics[/block]</i></p></span> <span class="tag green"><p>Сообщения (posts)<i>[block="posts"]Сообщения, posts[/block]</i></p></span> <span class="tag yellow"><p>Контент сообщений (p-content)<i>[block="p-content"]Контент сообщений, p-content[/block]</i></p></span> <span class="tag yellow"><p>Рейтинг постов (p-repa)<i>[block="p-repa"]Рейтинг постов, p-repa[/block]</i></p></span> <span class="tag green"><p>Профиль автора поста (p-prof)<i>[block="p-prof"]Профиль автора поста, p-prof[/block]</i></p></span> <br> <span class="tag orange"><p>Форма ответа (fo)<i>[block="fo"]Форма ответа, fo[/block]</i></p></span> <span class="tag green"><p>Модификация ФО (fomod)<i>[block="fomod"]Модификация ФО, fomod[/block]</i></p></span> <span class="tag yellow"><p>Новые BB-теги (newbb)<i>[block="newbb"]Новые BB-теги, newbb[/block]</i></p></span> <span class="tag lightblue"><p>Инструментарий спец тем/постов (spesh)<i>[block="spesh"]Инструментарий спец тем/постов, spesh[/block]</i></p></span> </div> <div class="speztags"> <span class="menustylestext3">Универсальные теги: </span> <span class="tag red"><p>Дизайн/стиль (dis)<i>[block="dis"]Дизайн/стиль, dis[/block]</i></p></span> <span class="tag blue"><p>Замена элементов/атрибутов (chan)<i>[block="chan"]Замена элементов/атрибутов, chan[/block]</i></p></span> <span class="tag green"><p>Загрузка (load)<i>[block="load"]Загрузка, load[/block]</i></p></span> <span class="tag lightblue"><p>Переадресация (redir)<i>[block="redir"]Переадресация, redir[/block]</i></p></span> <span class="tag lightblue"><p>Скроллинг (scroll)<i>[block="scroll"]Скроллинг, scroll[/block]</i></p></span> <br> <span class="tag orange"><p>Виджеты (vidjet)<i>[block="vidjet"]Виджеты, vidjet[/block]</i></p></span> <span class="tag lightblue"><p>Меню (menu)<i>[block="menu"]Меню, menu[/block]</i></p></span> <span class="tag yellow"><p>Вкладки (ttabs)<i>[block="ttabs"]Вкладки, ttabs[/block]</i></p></span> <span class="tag lightblue"><p>Галереи (gall)<i>[block="gall"]Галереи, gall[/block]</i></p></span> <span class="tag green"><p>Слайдеры (sliders)<i>[block="sliders"]Слайдеры, sliders[/block]</i></p></span> <span class="tag yellow"><p>Ротаторы (rotat)<i>[block="rotat"]Ротаторы, rotat[/block]</i></p></span> <span class="tag lightblue"><p>Таймеры/даты (timers)<i>[block="timers"]Таймеры/даты, timers[/block]</i></p></span> <span class="tag green"><p>Спойлеры (spoilers)<i>[block="spoilers"]Спойлеры, spoilers[/block]</i></p></span> <br> <span class="tag green"><p>Реклама (adv)<i>[block="adv"]Реклама, adv[/block]</i></p></span> <span class="tag yellow"><p>Изображения (pics)<i>[block="pics"]Изображения, pics[/block]</i></p></span> <span class="tag lightblue"><p>Медиа (media)<i>[block="media"]Медиа, media[/block]</i></p></span> <span class="tag blue"><p>Ролевые игры (frpg)<i>[block="frpg"]Ролевые игры, frpg[/block]</i></p></span> <br> <span class="tag green"><p>Hover-эффекты (hover)<i>[block="hover"]Hover-эффекты, hover[/block]</i></p></span> <span class="tag yellow"><p>Анимация (anim)<i>[block="anim"]Анимация, anim[/block]</i></p></span> <span class="tag lightblue"><p>Украшения (decor)<i>[block="decor"]Украшения, decor[/block]</i></p></span> <span class="tag red"><p>Праздники (seleb)<i>[block="seleb"]Праздники, seleb[/block]</i></p></span> <br> <span class="tag red"><p>Ограничения/запреты (stops)<i>[block="stops"]Ограничения/запреты, stops[/block]</i></p></span> <span class="tag yellow"><p>Антикопирование (nocopy)<i>[block="nocopy"]Антикопирование, nocopy[/block]</i></p></span> <span class="tag lightblue"><p>Уведомления (notif)<i>[block="notif"]Уведомления, notif[/block]</i></p></span> </div> </div> </div></div> <style> .speztags {border-top: 2px solid #ccc; padding-top: 10px;} #pun .punbb #tags .forumtags { display: inline-block; vertical-align: top; width: 48% !important; } #pun .punbb #tags .maintags {display: block;} .maintags { margin: 10px 0; border-width: 2px 0 2px 0px; border-style: solid; border-color: #ccc; padding: 6px 0; } #supertags .container .addscript p { text-transform: uppercase; font-family: 'Bebas Neue', Impact; padding: 2px 10px 0; background: #f98561; border-bottom: 6px solid #e63737; border-radius: 0; font-size: 24px; } #supertags .addscript {margin: 10px 10px 10px 0px; display: inline-block;} #supertags .icons {display: inline-block;vertical-align: bottom;} #supertags .container .addscript p:hover {background: #e63737;} .tag.blue p {background: #0481d9;} .tag.lightblue p {background: #29aecb;} .tag.red p {background: #e63737;} .tag.orange p {background: #f98561;} .tag.gray p {background: #bbb;} .tag.green p {background: #26af33;} .tag.yellow p {background: #f7941d;} .menustylestext, .menustylestext2 {margin: 0 5px;} .menustylestext { font-size: 26px; text-transform: uppercase; font-family: 'Bebas Neue', Impact; } .menustylestext2 {font-weight: bold;} .menustylestext3 {display: block;font-weight: bold;margin-bottom: 5px;} #meny-styles2 .icon {font-size: 30px;} #meny-styles2 .icon.fa-js {color: #0481d9;} #meny-styles2 .icon.fa-css3-alt {color: #29aecb;} #meny-styles2 .icon.fa-file-lines {color: #f98561;} #meny-styles2 .icon.fa-file-code {color: #e63737;} #meny-styles2 .icon.fa-file-invoice-dollar {color: #f7941d} #meny-styles2 i,#supertags {display: none;} #supertags.show {display:block!important;} #supertags .container p { padding: 3px; border-radius: 3px; color: #fff; cursor:pointer; margin: 2px 0; font-size: 14px; display: inline-block; } #supertags .container p:hover {background-color: #939393;} </style> <script type="text/javascript"> $("#supertags").appendTo('#tags'); $("#meny-styles2 p").click(function(){ var L=$(this).find("i").html(); var P=L.split(','); bbcode(P[0],P[1]) return false; }); if(window.location.toString().indexOf('/viewtopic.php?id=7078')>0) {$("#supertags").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=176290')>0) {$("#supertags").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=176293')>0) {$("#supertags").addClass('show');} else if(window.location.toString().indexOf('/edit.php?id=176329')>0) {$("#supertags").addClass('show');} </script> </div> </fieldset> <p class="formsubmit"><input type="submit" class="button submit submit-premod" name="submit" value="Отправить на модерацию" accesskey="s" /> <input type="submit" class="button" name="preview" value="Посмотреть" accesskey="p" /></p> </form> </div> </div> <script type="text/javascript">$(document).trigger("pun_main_ready");</script> <!-- pun_stats --> <!-- banner_mini_bottom --> <!-- banner_bottom --> <div id="pun-break3" class="divider"><hr /></div> <div id="pun-crumbs2" class="section"> <p class="container crumbs"><strong>Вы здесь</strong> <em>&#187;&#160;</em><a href="https://forumd.ru/">ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов</a> <em>&#187;&#160;</em><a href="https://forumd.ru/viewforum.php?id=14">Архив устаревших тем</a> <em>&#187;&#160;</em>HTML с нуля</p> </div> <div id="pun-break4" class="divider"><hr /></div> <div id="pun-about" class="section"> <p class="container"> </p> </div> <script type="text/javascript">$(document).trigger("pun_about_ready"); if (typeof ym == 'object') {ym(201230, 'userParams', {UserId:1, is_user:0}); ym(201230, 'params', {forum_id: 517111});}</script> <div id="html-footer" class="section"> <div class="container"><script> </script> <!-- переключение языка --> <script> if ((!window['UserID'] || 1 == UserID) && !['ru', 'ru-RU'].includes(navigator.language) && !~document.cookie.indexOf('lang=')) {document.cookie = "lang=en"; location.reload()} var i,smbCodeArr=[];var arr0=[1026,1027,8218,1107,8222,8230,8224,8225,8364,8240,1033,8249,1034,1036,1035,1039,1106,8216,8217,8220,8221,8226,8211,8212,"0",8482,1113,8250,1114,1116,1115,1119,160,1038,1118,1032,164,1168,166,167,1025,169,1028,171,172,173,174,1031,176,177,1030,1110,1169,181,182,183,1105,8470,1108,187,1112,1029,1109,1111];for(i=0;i<arr0.length;i++)smbCodeArr[arr0[i]]=i+128;for(i=1040;i<=1103;i++)smbCodeArr[i]=i-848; var encodeURIwin1251=function(str){for(var arr=str.split(""),n,i=0;i<arr.length;i++){n=arr[i].charCodeAt();if(n>187&&n<1025||n>1105)arr[i]="&#"+n+";";if(typeof smbCodeArr[n]!="undefined")arr[i]=String.fromCharCode(smbCodeArr[n])}return escape(arr.join("")).replace(/\+/mg,"%2B")};$.fn.extend({serialize:function(){var i=0,s="",obj=this.serializeArray(),Lng=obj.length;for(;i<Lng;i++)s+=(i?"&":"")+encodeURIwin1251(obj[i].name)+"="+encodeURIwin1251(obj[i].value);return s}}); function changeLang(){if(window["UserID"]&&1!=UserID){var url=location.origin+"/profile.php?section=essentials&id="+UserID;$.ajax({url:url,async:false,success:function(res){var f=$(res).find("#profile1");"en"!=f.find('select[name="req_lang"]').val()?f.find('select[name="req_lang"]').val("en"):f.find('select[name="req_lang"]').val("ru");data=f.serialize();var curl=document.URL;history.replaceState(null,"",url);$.ajax({url:url,async:false,data:data,type:"POST",success:function(res){history.replaceState(null, "",curl);location.reload()}})}})}else{$("#pun.en").length?document.cookie="lang=ru":document.cookie="lang=en";location.reload()}}$("#langChange").on("click",changeLang); </script> <!-- изменение кода страниц --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/43819.js?v=5" defer></script> <!-- сайдбар --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/67067.js?v=2" defer></script> <!-- главная форума --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/25287.js?v=5" defer></script> <!-- топиклист --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/13065.js?v=2" defer></script> <!-- подписки в топиклисте --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/26591.js?v=19" defer></script> <!-- топики --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/49006.js?v=5" defer></script><!-- юзерлист --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/18416.js?v=4" defer></script><!-- ЛС --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/20727.js?v=17" defer></script><!-- Профиль --> <!--Добавляем ссылку на форум в crumbs --> <script> if(!$("#pun-index").length&&document.URL.indexOf("/pages/index")==-1){ var s=' »&nbsp;<a href="/=&forum"><span class="cr-txt rus">Форум</span><span class="cr-txt eng">Forum</span></a>'; if ($('#pun').hasClass('en')) { $(".crumbs").find("a:first").text('Home page').after(s) } else { $(".crumbs").find("a:first").text('Главная страница').after(s) } }; if($(".punbb").attr("id")=="pun-index"){ var s=' »&nbsp;<a href="/pages/index" class="rus">Главная страница</a><a href="/pages/index-eng" class="eng">Home page</a> »&nbsp;\ <a href="/=&forum"><span class="cr-txt rus">Форум</span><span class="cr-txt eng">Forum</span></a>'; $(".crumbs").html(s); }; </script> <!-- Аватар и ссылка в цитате © Alex_63 / Мод: Gerda, ForumD.ru --> <script>var FdQuoteAva = '<i class="fa-solid fa-user"></i>';</script> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/79040.js"></script> <script type="text/javascript">setLinkAndAva()</script> <!-- HTML в постах с допуском по группам © Alex_63 --> <script type="text/javascript" src="/files/0015/c4/3f/52361.js"></script> <script type="text/javascript"> HTMLinPost.groups = [1,2]; // Группы, допущенные к вставке HTML в посты HTMLinPost.noAccess = ['Дух осени','Maquis','Romych','Duka']; // Пользователи с запретом вставки HTML в посты HTMLinPost.parseHTMLinPosts() </script> <!-- Выделение и разворот кода © ForumD.ru, Gerda --> <script type="text/javascript"> $(document).ready(function() { $('.code-box').each(function() { var $codeBox = $(this); $codeBox.parents('.code-css').find('pre').wrapInner('<code class="language-css line-numbers"></code>'); $codeBox.parents('.code-javascript').find('pre').wrapInner('<code class="language-javascript line-numbers"></code>'); $codeBox.parents('.code-html').find('pre').wrapInner('<code class="language-html line-numbers"></code>'); $codeBox.find('.legend').html('<span class="copy-code" href="javascript:void(0);"><i><gg class="rus">Скопировать код</gg><gg class="eng">Copy code</gg></i><b><gg class="rus">Скопировано</gg><gg class="eng">Copied</gg></b></span>'); $codeBox.find('.legend').append('<span class="expand-code"><i><gg class="rus">Развернуть</gg><gg class="eng">Expand</gg></i><b><gg class="rus">Свернуть</gg><gg class="eng">Collapse</gg></b></span>'); $codeBox.find('.copy-code').on('click', function () { $codeBox.addClass('copied'); var textarea = document.createElement('textarea'); textarea.value = $codeBox.find('.scrollbox pre').text(); document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); console.log('Код скопирован успешно:', textarea.value); } catch (err) { console.error('Ошибка копирования кода:', err); } finally { document.body.removeChild(textarea); } }); $codeBox.find('.expand-code').on('click', function () { $codeBox.toggleClass('expanded'); }); }); }); </script> <!-- подсветка кода --> <link href="https://forumstatic.ru/files/0007/e3/f7/65930.css" rel="stylesheet"> <script src="https://forumstatic.ru/files/0007/e3/f7/20627.js" async></script> <!-- Полноэкранный просмотр изображений v.3 © ForumD, satsana & Gerda --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/97612.js?v=3" async></script> <!-- Автоматическая подписка на темы --> <script>(function(){var forumLnk=$('#pun-crumbs1 a[href*="viewforum.php"]:last');if(!forumLnk.length)return;if(~[5,6,19].indexOf(+forumLnk.attr('href').match(/id=(\d+)/)[1]))$('#fld6').parent('.checkfield').remove(),$('#pun-viewtopic,#pun-post').find('#post .areafield').append('<input type="checkbox" checked style="display:none" id="fld6" name="subscribe"/>');})()</script> <!-- цветовыделение должностей и мастеров --> <script> $(document).ready(function() { function addDutyClass(element, userId) { var userDuty = dutyData.find(item => String(item.id) === String(userId)); if (userDuty) { $(element).addClass(userDuty.color); } } function addVerifiedClass(element, userId) { var verifiedUser = verifiedData.find(item => String(item.id) === String(userId)); if (verifiedUser) { $(element).addClass(verifiedUser.color); } } $('.post-content a, a.post-mention, #onlinelist a, .modmenu a, .tcl.username a, .tcl.tc-username a, .tc2.pmtc22 a').each(function () { var href = $(this).attr('href'); var userIdMatch = href.match(/\/profile\.php\?id=(\d+)$/); if (userIdMatch) { var userId = userIdMatch[1]; addDutyClass(this, userId); addVerifiedClass(this, userId); } }); }); </script> <!-- Проверка имени при регистрации © Alex_63 --> <style> #username.normal {background-color: #abd4af !important; border: 2px solid #26af33; color: #2f5325;} #username.error {background-color: #e7b8b8 !important; border: 2px solid #e63737; color: #6c1313;} .stclr {margin-left: 10px;} .stclr.normal{color: #26af33; font-family: 'Bebas Neue', 'Book Antiqua'; text-transform: uppercase; font-size: 22px;} .stclr.error {color: #e63737; font-family: 'Bebas Neue', 'Book Antiqua'; text-transform: uppercase; font-size: 22px;} img.preloader{width:12px;height:12px;margin-left:3px;} </style> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/28064.js" defer></script> <!-- Чекбокс "Выбрать все" при модерировании темы и форума © Alex_63 --> <script type="text/javascript">if($('#pun-modviewforum').length){$('th.tcmod').html('Выбрать все: <input type="checkbox" id="CheckAll" title="Выбрать все">');$('#CheckAll').click(function(){if($('#CheckAll').attr('checked')){$(this).parents('table').find('td.tcmod input[type="checkbox"]').attr('checked',true);}else{$(this).parents('table').find('td.tcmod input[type="checkbox"]').attr('checked',false);}});}else if(GroupID<=2 && $('.punbb[id^="pun-multi"]').length){$('.modmenu .button').before('<span>Выбрать все</span><input type="checkbox" id="CheckAll" title="Выбрать все">');$('#CheckAll').click(function(){if($('#CheckAll').attr('checked')){$(this).parents('#pun-main').find('.pl-select input[type="checkbox"]').attr('checked',true);}else{$(this).parents('#pun-main').find('.pl-select input[type="checkbox"]').attr('checked',false);}});}</script> <!-- Всплывающие Подсказки --> <style> #tooltip { display: none; position: absolute; z-index: 9999999999999999; background: rgba(0,0,0,0.8); color: #fff; padding: 5px 8px; border-radius: 4px; max-width: 250px; } </style> <script type="text/javascript"> jQuery.fn.quicktip = function(options){ var defaults = { speed: 500, xOffset: 26, yOffset: -5 }; var options = $.extend(defaults, options); return this.each(function(){ var $this = jQuery(this); var tipTitle = $this.attr('title'); if (tipTitle) { $this.removeAttr('title'); $this.on('mouseover', function(e) { $(this).css('cursor', 'pointer'); $("body").append("<div id='tooltip'>" + tipTitle + "</div>"); $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px") .fadeIn(options.speed); }).on('mouseout', function(e) { $("#tooltip").remove(); }); $this.mousemove(function(e) { $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px"); }); } }); }; // Добавление подсказок $('.post abbr').attr('data-title', function() { return $(this).attr('title') }); $(function() {$(window).on('load', function() { $('.post abbr').attr('title', function() { return $(this).attr('data-title') }); $('*[title]').quicktip({ speed: 700 }); });}); </script> <!-- костыли английской версии --> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/52360.js?v=2"></script> <!-- кастомные селекты --> <script> var fdSelects = '#punbbsearch select, #userlist select, #birthday select, #form-area select, .questionary-post select'; </script> <script type="text/javascript" src="https://forumstatic.ru/files/0007/e3/f7/66411.js" defer></script> <!-- Форма постинга рекламы --> <script> const piarTopicsPrefix = '[Реклама]'; //начало названия топиков, в которых будет форма const piarForumId = '186'; //id форума, в котором лежат топики, в которых будет форма const isPiarTopic = FORUM.topic?.subject.startsWith(piarTopicsPrefix) && FORUM.topic?.forum_id === piarForumId; if (location.pathname === '/viewtopic.php' && isPiarTopic) { const saveToLS = (data) => localStorage.setItem('pr_values', JSON.stringify(data)); const getFromLS = () => JSON.parse(localStorage.getItem('pr_values') || "false"); const removeFromLS = () => localStorage.removeItem('pr_values'); if (GroupID === 3){ const defaultReply = document.querySelector('#post-form'); if (defaultReply) defaultReply.remove(); const piarLogin = 'Ролевой Курьер'; //логин пиар-аккаунта const piarPassword = '1234'; //пароль пиар-аккаунта let linkError = ''; let codeError = ''; const validateFields = (fields) => true; const markup = ` <div id='piar_reply_emulator' class='container'> <form> <fieldset> <legend>Разместить рекламу</legend> <p style="display: grid; grid-template-columns: 1fr;"${linkError ? " class=has-error" : ""}> <label for="our_piar_link">Ссылка на ответную рекламу</label> ${linkError} <input type="text" id="our_piar_link" name="our_piar_link"> </p> <p${codeError ? " class=has-error" : ""}> <label for="your_piar_code">Код вашей рекламы</label><br> ${codeError} <textarea id="your_piar_code" name="your_piar_code" rows="13"></textarea> </p> </fieldset> <p><input type="submit"></p> </form> </div>`; const bottomPagination = document.querySelector('.linksb'); bottomPagination.insertAdjacentHTML('afterend', markup); const piarReplyEmulatorForm = bottomPagination.nextElementSibling.querySelector('form'); piarReplyEmulatorForm.addEventListener('submit', async (ev) => { ev.preventDefault(); const values = {}; for(let elem of piarReplyEmulatorForm){ if(['text', 'textarea'].includes(elem.type)) values[elem.name] = elem.value || '' } if (!validateFields(values)) return false; saveToLS(values); const loginFormMarkup = ` <form id="login" class="container" method="post" action="${location.origin}/login.php?action=in" onsubmit="return true"> <input type="hidden" name="form_sent" value="1"> <input type="hidden" name="redirect_url" value="${location.href}"> <input type="text" id="fld1" name="req_username" size="25" maxlength="25" value="${piarLogin}"> <input type="password" id="fld2" name="req_password" size="16" maxlength="16" value="${piarPassword}"> </form>`; const container = document.createElement('div'); container.innerHTML = loginFormMarkup; document.querySelector('body').append(container); const event = new Event("submit"); container.querySelector('form').submit(); }) } else { const pr_data = getFromLS(); if(pr_data) { document.querySelector('#main-reply').value = ` ${pr_data.your_piar_code} [b]Ваша:[/b] ${pr_data.our_piar_link}`.trim(); removeFromLS(); document.querySelector('#post-form #post').submit?.click() const logoutUrl = `${location.origin}/login.php?action=out&id=${window.UserID}` fetch(logoutUrl); } } } </script> <!-- Баннеры конкурса --> <div class="comp-banner" style="display: none;"> <a href="https://memecross.rusff.me/" target="_blank" title="Meme Crossover"><img src="https://i.ibb.co/Bs2Tsy3/84101.gif"></a> <a href="https://theraven.rusff.me/" target="_blank" title="The raven"><img src="https://forumupload.ru/uploads/001c/00/4d/5/220581.gif"></a> <a href="https://thedome.rusff.me/" target="_blank" title="the dome"><img src="https://forumupload.ru/uploads/001b/60/aa/48/821676.png"></a> <a href="https://curama.mybb.ru" target="_blank" title="Наруто: Печать времени"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/627857.gif"></a> <a href="https://primaltotem.hstn.me/" target="_blank" title="Ойкумена: до начала времен"><img src="https://i.imgur.com/wPEJEYI.gif"></a> </div> <script> $(document).ready(function() { var $compBanner = $('.comp-banner'); var $banners = $compBanner.children(); for (var i = $banners.length - 1; i >= 0; i--) { $compBanner.append($banners.eq(Math.floor(Math.random() * (i + 1)))); } var $clonedBanner = $compBanner.clone().css('display', 'flex'); var forumSelectors = ['#forum_f192', '#forum_f193', '#forum_f194', '#forum_f195']; $.each(forumSelectors, function(index, selector) { var $forum = $(selector); if ($forum.length) { var $descBanner = $forum.find('.desc-banner').after($clonedBanner); } }); var $banners2 = $('.comp-banner2'); for (var i = $banners2.children.length; i >= 0; i--) { $banners2.appendChild($banners2.children[Math.random() * i | 0]); } }); </script> <style> .comp-banner2 p {display: flex;} .comp-banner, .comp-banner2 p { justify-content: center; gap: 5px; flex-wrap: wrap; } .comp-banner2 img {width: 468px; height: 60px;} </style> <!--Копирайт--> <div id="bottom"><div class="inner"> <div id="fdcop1" class="fdcop rus"><a href="/viewtopic.php?id=4505" target='blank'>Отзывы</a> | <a href='/viewtopic.php?id=8309' target='blank'>Сообщить об ошибке</a> | <a href='/viewtopic.php?id=6616' target='blank'>Помочь нам</a> | <a href='/misc.php?action=rules' target='blank'>Правила проекта</a></div> <div id="fdcop2" class="fdcop icons rus"> <a href="https://discord.com/invite/rNWtvk7" target="_blank" title="Наш сервер на дискорде для заказов"><i class="fa-brands fa-discord"></i></a> <a href="/viewtopic.php?id=4506" title="Диалог с администрацией"><i class="fa-regular fa-comment"></i></a> <a href="/viewtopic.php?id=6616" title="Поддержать проект"><i class="fa-solid fa-hand-holding-heart"></i></a> <a href="https://vk.com/forumd" target="_blank" title="Мы в ВК"><i class="fa-brands fa-vk"></i></a> <a href="https://www.youtube.com/@forumd-ru" target="_blank" class="tip" title="Канал на Ютубе"><i class="fa-brands fa-youtube"></i></a> <a href="https://boosty.to/forumd.ru" target="_blank" title="Подписки/донаты на Boosty"><i class="fa-solid fa-money-check-dollar"></i></a> <a href="https://www.donationalerts.com/r/forumdru" target="_blank" title="Донаты на DonationAlerts"><i class="fa-solid fa-coins"></i></a> </div> <div id="fdcop2" class="fdcop icons eng"> <a href="https://discord.gg/Vz8GGZT" target="_blank" title="Our Discord server"><i class="fa-brands fa-discord"></i></a> <a href="/viewtopic.php?id=4506" target="_blank" title="Dialogue with the administration"><i class="fa-regular fa-comment"></i></a> <a href="https://vk.com/forumd" target="_blank" title="Our VK page"><i class="fa-brands fa-vk"></i></a> <a href="https://www.youtube.com/@forumd-ru" target="_blank" title="Our Youtube channel"><i class="fa-brands fa-youtube"></i></a> <a href="https://boosty.to/forumd.ru" target="_blank" title="Subscribe/Donate on Boosty"><i class="fa-solid fa-money-check-dollar"></i></a> <a href="https://www.donationalerts.com/r/forumdru" target="_blank" title="Donate on DonationAlerts"><i class="fa-solid fa-coins"></i></a> </div> <div class="fdcop rus">© ForumD.ru, 2009-2024<br> <a href="https://forumd.ru/viewtopic.php?id=5751#rule" target="_blank">Условия использования бесплатного контента</a></div> <div class="fdcop eng">© ForumD.ru, 2009-2024<br> When publishing our content, please leave a link to the source.</div> <div id="fdbotBANNER" class="fdcop rus"><!-- баннеры --> <!-- форум Coffee table knight --> <a href="https://abyssus.f-rpg.me/" target="_blank"><img src="https://forumupload.ru/uploads/001c/36/d0/3/228996.png" title="Supermassive Black Cross"></a> <!-- форум magia --> <a href="https://magia-frpg.ru/" target="_blank" title="MAGIA"><img src="https://forumupload.ru/uploads/001a/fa/19/2/153026.gif"></a> <!-- ЛИЛ, взаимный референс --><a href="https://urchoice.su" class="tip" title="Каталог форумов" target="_blank"><img src="https://forumstatic.ru/files/000b/09/4f/61730.png"></a> <!-- референс к подкастерам, Герда --> <a href="https://urchoice.su/viewtopic.php?id=58390#p2160217" class="tip" title="Подкаст «НеТЕролевые» - Рассказываем и обсуждаем ФРПГ" target=_blank><img src="https://forumupload.ru/uploads/0014/80/a5/2/729997.png"></a> <!-- рпг-хит - референс --> <a href="http://rpg-hit.ru/vote/forumcard/id/38" title="каталог ролевых: RPG-HIT" target="_blank" class="tip"><img src="https://forumstatic.ru/files/001b/c3/c4/23464.gif"></a> <!-- Top.Roleplay.Ru --> <script type="text/javascript" language="javascript"> var topRPGc="<img src='https://s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=26353&rnd=" + Math.random(); topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'><a href='https://rpgtop.su/26353' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'>"+ "<img src='//img.rpgtop.su/88x31x11x8.gif' class='tip' title='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> "; document.write(topRPGc); </script> <noscript> <img src='//s02.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=26353' width='1' height='1' border='0'><a href='https://rpgtop.su/26353' class="tip" title='Рейтинг Ролевых Ресурсов - RPG TOP' target='_blank'><img src='//img.rpgtop.su/88x31x11x8.gif' border='0' width='88' height='31'></a> </noscript> <!-- /Top.Roleplay.Ru --> <!-- Yandex.Metrika informer --> <a href="https://metrika.yandex.ru/stat/?id=93794845&amp;from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/93794845/3_1_EFEFEFFF_EFEFEFFF_0_uniques" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="93794845" data-lang="ru" /></a> <!-- /Yandex.Metrika informer --> </div> <div id="fdbotMENU" class="rus"> <div class="bmenu"><span>Заказать</span> <ul> <li><a href="/viewtopic.php?id=5760" target='blank'>Дизайн для форумов/сайтов</a></li> <li><a href="/viewtopic.php?id=5768" target='blank'>Графика и арт</a></li> <li><a href="/viewtopic.php?id=6322" target='blank'>Аватары и подписи</a></li> <li><a href="/viewtopic.php?id=5769" target='blank'>Стримы и соцсети</a></li> <li><a href="/viewtopic.php?id=5771" target='blank'>Скрипты и техоснащение</a></li> </ul> </div> <div class="bmenu"><span>Полезное</span> <ul> <li><a href="/viewtopic.php?id=2791" target='blank'>Бесплатные MyBB-дизайны</a></li> <li><a href="/viewtopic.php?id=7051" target='blank'>Бесплатные макеты</a></li> <li><a href="/pages/allscripts" target='blank'>Бесплатные скрипты и коды</a></li> <li><a href="/viewforum.php?id=7" target='blank'>Гайды по вебдизайну</a></li> <li><a href="/viewforum.php?id=96" target='blank'>Поиск специалистов</a></li> </ul> </div> <div class="bmenu"><span>Заказчикам</span> <ul> <li><a href="/viewforum.php?id=75" target='blank'>Техническая поддержка</a></li> <li><a href="/viewforum.php?id=1" target='blank'>Размещение рекламы форума/сайта</a></li> <li><a href="/viewtopic.php?id=5762" target='blank'>Условия работы ForumD.ru</a></li> <li><a href="/viewtopic.php?id=3434" target='blank'>Правила оформления заказов</a></li> </ul> </div> <div class="bmenu"><span>Специалистам</span> <ul> <li><a href="/viewforum.php?id=90" target='blank'>Размещение портфолио</a></li> <li><a href="/viewtopic.php?id=5788" target='blank'>Присоединиться к команде ForumD.ru</a></li> <li><a href="/viewtopic.php?id=6036" target='blank'>Бонусы и привилегии</a></li> <li><a href="/viewtopic.php?id=3434" target='blank'>Правила выполнения заказов</a></li> </ul> </div> </div> <div class="stat-place"></div> </div></div> <!-- ------------------------------------------------------------------------------ --> <!-- Спецпосты - скрипт --> <script type="text/javascript"> ((topic, search, result) => { $(topic).toggleClass(result, $('.post-content .' + search, topic).length > 0); })($('#pun-main'), 'portfoliopost', 'portfoliotopic'); ((topic, search, result) => { $(topic).toggleClass(result, $('.post-content .' + search, topic).length > 0); })($('#pun-main'), 'anketa-hide', 't-anketa'); $('#pun-edit .portfoliotopic h1').after('<div id="portprew"><div class="topic"><div class="post"><div class="container"><div class="post-body"></div></div></div></div></div>'); $('#pun-post .portfoliotopic h1').after('<div id="portprew"><div class="topic"><div class="post"><div class="container"><div class="post-body"></div></div></div></div></div>'); $('#post-preview .post-box').appendTo('#portprew .post-body'); $('.no-prof:contains("no-prof")').parents('.post').addClass('no-prof'); $('.portfoliopost:contains("portfoliopost")').parents('.post').addClass('portfolio'); $('.forsalepost:contains("forsalepost")').parents('.post').addClass('forsale'); $('.saledpost:contains("saledpost")').parents('.post').addClass('saled'); $('.freepost:contains("freepost")').parents('.post').addClass('free'); $('.makeportfoliolight:contains("makeportfoliolight")').parents('.post').addClass('portfolio-light'); $('#pun-searchposts .post:contains("***QUESTIONARY***")').addClass('anketa'); $('.questionary-post').parents('#pun-main').addClass('questionary'); </script></div> </div> </div> </div> </div> </body> </html>