|
|
| Строка 1: |
Строка 1: |
| <includeonly> | | <includeonly> |
| <div class="modern-table-container">
| | {| class="wikitable" style="width: {{{width|100%}}}; margin-left: {{{margin-left|0}}}; float: {{{float|none}}}; background: linear-gradient(135deg, rgba(50,50,70,0.9), rgba(30,30,50,0.9)); border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.5);" |
| <div class="table-grid">
| | ! colspan="2" style="background: linear-gradient(90deg, rgba(100,100,150,0.7), rgba(50,50,70,0.9)); color: white; padding: 15px; text-align: center; font-size: 1.5em;" | {{{title|Пример таблицы}}} |
| {| class="wikitable modern-table" style="float: {{{float|right}}}; width: {{{width|450px}}}; margin-left: {{{margin-left|1em}}};" | |
| ! colspan="2" class="modern-table-header" | | |
| <div class="header-gradient">
| |
| <span class="header-text">{{{title|FAQ (Частые вопросы)}}}</span>
| |
| <div class="header-line"></div>
| |
| </div>
| |
| |- | | |- |
| ! class="modern-table-question" | {{{q1|Вопрос 1}}} | | ! style="background-color: rgba(70,70,90,0.8); color: white; padding: 15px; text-align: right;" | {{{q1|Вопрос 1}}} |
| | class="modern-table-answer" | {{{a1|Ответ 1}}} | | | style="background-color: rgba(30,30,50,0.8); color: #d3d3d3; padding: 15px;" | {{{a1|Ответ 1}}} |
| |- | | |- |
| ! class="modern-table-question" | {{{q2|Вопрос 2}}} | | ! style="background-color: rgba(70,70,90,0.8); color: white; padding: 15px; text-align: right;" | {{{q2|Вопрос 2}}} |
| | class="modern-table-answer" | {{{a2|Ответ 2}}} | | | style="background-color: rgba(30,30,50,0.8); color: #d3d3d3; padding: 15px;" | {{{a2|Ответ 2}}} |
| |- | | |- |
| ! class="modern-table-question" | {{{q3|Вопрос 3}}} | | ! style="background-color: rgba(70,70,90,0.8); color: white; padding: 15px; text-align: right;" | {{{q3|Вопрос 3}}} |
| | class="modern-table-answer" | {{{a3|Ответ 3}}} | | | style="background-color: rgba(30,30,50,0.8); color: #d3d3d3; padding: 15px;" | {{{a3|Ответ 3}}} |
| |} | | |} |
| </div>
| |
| </div>
| |
| </includeonly><noinclude> | | </includeonly><noinclude> |
| {{#css:
| |
| .modern-table-container {
| |
| position: relative;
| |
| }
| |
|
| |
| .table-grid {
| |
| transition: all 0.3s ease;
| |
| box-shadow: 0 15px 30px rgba(0,0,0,0.4);
| |
| }
| |
|
| |
| .modern-table {
| |
| border-collapse: separate !important;
| |
| border-spacing: 0 10px !important;
| |
| background: linear-gradient(135deg, rgba(30,30,40,0.9), rgba(20,20,30,0.9)) !important;
| |
| font-family: 'Montserrat', sans-serif !important;
| |
| border-radius: 10px !important;
| |
| overflow: hidden !important;
| |
| position: relative !important;
| |
| }
| |
|
| |
| .header-gradient {
| |
| position: relative;
| |
| background: linear-gradient(90deg, rgba(74,74,74,0.7), rgba(30,30,40,0.9));
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 10px;
| |
| }
| |
|
| |
| .header-text {
| |
| color: #d3d3d3 !important;
| |
| z-index: 2;
| |
| position: relative;
| |
| text-transform: uppercase;
| |
| letter-spacing: 2px;
| |
| }
| |
|
| |
| .header-line {
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: -2px;
| |
| width: 100%;
| |
| height: 3px;
| |
| background: linear-gradient(90deg, #4a90e2, #9b59b6);
| |
| opacity: 0.7;
| |
| }
| |
|
| |
| .modern-table-header {
| |
| background: transparent !important;
| |
| padding: 0 !important;
| |
| border: none !important;
| |
| }
| |
|
| |
| .modern-table-question {
| |
| background-color: rgba(30,30,40,0.7) !important;
| |
| color: #a0a0a0 !important;
| |
| text-align: right !important;
| |
| padding: 15px !important;
| |
| font-weight: bold !important;
| |
| width: 30% !important;
| |
| border: none !important;
| |
| position: relative;
| |
| }
| |
|
| |
| .modern-table-question::after {
| |
| content: '';
| |
| position: absolute;
| |
| right: -10px;
| |
| top: 0;
| |
| width: 2px;
| |
| height: 100%;
| |
| background: linear-gradient(transparent, rgba(74,144,226,0.5), transparent);
| |
| }
| |
|
| |
| .modern-table-answer {
| |
| background-color: rgba(20,20,30,0.7) !important;
| |
| color: #c0c0c0 !important;
| |
| padding: 15px !important;
| |
| text-align: left !important;
| |
| border: none !important;
| |
| position: relative;
| |
| }
| |
|
| |
| .modern-table-answer::before {
| |
| content: '';
| |
| position: absolute;
| |
| left: -10px;
| |
| top: 0;
| |
| width: 2px;
| |
| height: 100%;
| |
| background: linear-gradient(transparent, rgba(155,89,182,0.5), transparent);
| |
| }
| |
| }}
| |
|
| |
| Пример использования: | | Пример использования: |
| {{Modern Table | | {{Modern Table |
| |q1=Вопрос 1 | | |title=Часто задаваемые вопросы |
| |a1=Ответ 1 | | |q1=Какой язык программирования лучше всего изучать? |
| |q2=Вопрос 2 | | |a1=Это зависит от ваших целей, но Python часто рекомендуется для начинающих. |
| |a2=Ответ 2 | | |q2=Что такое Open Source? |
| | |a2=Open Source — это программное обеспечение, исходный код которого доступен для изучения, изменения и распространения. |
| | |q3=Как начать изучать программирование? |
| | |a3=Начните с онлайн-курсов, книг или видеоуроков, которые подходят вашему стилю обучения. |
| | |float=left |
| | |width=600px |
| | |margin-left=2em |
| }} | | }} |
| </noinclude> | | </noinclude> |