fghgh
dfgfh
Страница: 1
Тема закрыта
Сообщений 1 страница 4 из 4
Поделиться12021-12-14 02:52:29
- Администратор
- Зарегистрирован: 2014-03-25
- Приглашений: 0
- Сообщений: 19
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
14 часов 55 минут - Последний визит:
2025-06-05 19:47:42
Поделиться22023-12-13 15:41:08
- Администратор
- Зарегистрирован: 2014-03-25
- Приглашений: 0
- Сообщений: 19
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
14 часов 55 минут - Последний визит:
2025-06-05 19:47:42
[html]<style>
/*переменные для стиля*/
#game {
--c: 200px; /*Высота блока, высота картинки*/
--b: #dbc3db; /*цвет текста, цвет рамки*/
--g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/
--f: "helvetica"; /*опционально - шрифт блока*/}
/*стили блока с картинкой*/
.e1 {
padding: 7px;
border: 1px solid var(--b);
height: calc(var (--c));
width: calc(var(--g));
}
/*стиль самой картинки*/
.e1 img {
width: calc(var(--g));
height: calc(var(--c));
}
/*стиль названия эпизода*/
.e2 {
width: 70px;
border-right: 1px solid var(--b)!important;
color: var(--b);
vertical-align: top;
padding-right: 10px!important;
text-align: right; font-size: 30px;
font-family: impact;
text-shadow: 2px 2px 2px #fff;
}
/*стиль описания эпизода*/
.e3 {
padding: 10px;
text-align: justify;
padding-right: 0px;
vertical-align: top;
}
/*по желанию - стиль буквицы*/
// .e3::first-letter {
float: left;
line-height: 35px;
font-size: 3em;
color: var(--b);
border: solid var(--b);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
}
/*стиль блока участники*/
.e4 {
padding: 7px;
border: 1px solid var(--b);
width: calc(var(--g));
height: 22px;
font-size: 1.1em;
font-family: var(--f);
}
<style>
<div id="game">
<div align="center">
<div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div>
<table style="width:calc(var(--g));" border="0">
<tbody>
<tr>
<td class="e2">Название эпизода</td>
<td class="e3">
Описание эпизода:
<br>
— Вэй Усянь мёртв! Вот так прекрасные новости!<br>
<br>
Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников.
</td>
</tr>
</tbody>
</table>
<div class="e4">
Участники эпизода
</div>
</div></div>[/html]
Поделиться32023-12-13 15:42:53
- Администратор
- Зарегистрирован: 2014-03-25
- Приглашений: 0
- Сообщений: 19
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
14 часов 55 минут - Последний визит:
2025-06-05 19:47:42
[html]<style>
/*переменные для стиля*/
#game {
--c: 200px; /*Высота блока, высота картинки*/
--b: #dbc3db; /*цвет текста, цвет рамки*/
--g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/
--f: "helvetica"; /*опционально - шрифт блока*/}
/*стили блока с картинкой*/
.e1 {
padding: 7px;
border: 1px solid var(--b);
height: calc(var (--c));
width: calc(var(--g));
}
/*стиль самой картинки*/
.e1 img {
width: calc(var(--g));
height: calc(var(--c));
}
/*стиль названия эпизода*/
.e2 {
width: 70px;
border-right: 1px solid var(--b)!important;
color: var(--b);
vertical-align: top;
padding-right: 10px!important;
text-align: right; font-size: 30px;
font-family: impact;
text-shadow: 2px 2px 2px #fff;
}
/*стиль описания эпизода*/
.e3 {
padding: 10px;
text-align: justify;
padding-right: 0px;
vertical-align: top;
}
/*по желанию - стиль буквицы*/
// .e3::first-letter {
float: left;
line-height: 35px;
font-size: 3em;
color: var(--b);
border: solid var(--b);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
}
/*стиль блока участники*/
.e4 {
padding: 7px;
border: 1px solid var(--b);
width: calc(var(--g));
height: 22px;
font-size: 1.1em;
font-family: var(--f);
}
<style>[/html]
[html]
<div id="game">
<div align="center">
<div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div>
<table style="width:calc(var(--g));" border="0">
<tbody>
<tr>
<td class="e2">Название эпизода</td>
<td class="e3">
Описание эпизода:
<br>
— Вэй Усянь мёртв! Вот так прекрасные новости!<br>
<br>
Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников.
</td>
</tr>
</tbody>
</table>
<div class="e4">
Участники эпизода
</div>
</div></div>[/html]
Поделиться42023-12-13 15:50:56
- Администратор
- Зарегистрирован: 2014-03-25
- Приглашений: 0
- Сообщений: 19
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
14 часов 55 минут - Последний визит:
2025-06-05 19:47:42
Код:
[html]<style>
.osnova {
width: 500px;
height: 450px;
background-color: #b2a087b5;
margin: auto;
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
overflow-y: scroll;
border: 4px double #dcc5c5;
border-bottom: 4px double #dcc5c5;
}
.taprim {
display: flex;
flex-wrap: wrap;
width: 470px;
height: auto;
}
.epprim {
width: 200px;
padding: 5px 15px;
background: radial-gradient(360% 60%, #4b0000, #340000);
text-align: center;
font-size: 14px;
font-family: 'Oswald';
color: #d0c3b3;
text-shadow: #fdf5f5 0 0 12px;
margin-left: 5px;
}
.whenprim {
width: 200px;
padding: 5px 15px;
background: radial-gradient(360% 60%, #4b0000, #340000);
text-align: center;
font-size: 14px;
font-family: 'Oswald';
color: #d0c3b3;
text-shadow: #fdf5f5 0 0 12px;
margin-left: 5px;
}
.tables {
display: flex;
flex-wrap: wrap;
width: 470px;
height: auto;
}
.episodes {
width: 200px;
height: auto;
padding: 5px 15px;
color: #5b432c;
font-family: arial;
background-color: #d6c4ab;
text-align: center;
border-radius: 5%;
margin-bottom: 5px;
border: 5px;
margin-left: 5px;
margin-top: 5px;
}
.when {
width: 200px;
height: auto;
padding: 5px 15px;
color: #5b432c;
font-family: arial;
background-color: #d6c4ab;
text-align: center;
border-radius: 5%;
margin-bottom: 5px;
border: 5px;
margin-left: 5px;
margin-top: 5px;
}
.shapka {
margin: auto;
width: 507px;
height: auto;
background: radial-gradient(360% 60%, #4b0000, #060202);
text-align: center;
font-size: 32px;
font-family: 'Oswald';
color: #d0c3b3;
text-shadow: #fdf5f5 0 0 12px;
padding-top: 15px;
display: flex;
flex-wrap: wrap;
}
.art {
margin-left: 25px;
margin-bottom: 15px;
width: 100px;
}
.cita {
text-align: center;
text-transform: uppercase;
}
.citate{
text-align: center;
font-family: Arial Narrow;
font-size: 12px;
}
.obob {
display: flex;
flex-direction: column;
width: 350px;
height: auto;
}
.episodes a:hover {
color: #a59c4c; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: underline; /* Добавляем подчеркивание */
}
<style>[/html]
[html]<div class="shapka">
<div class="art"><img src="https://i.ibb.co/n3KbPpr/111.png"></div>
<div class="obob">
<div class="cita">хронология</div>
<div class="citate">Здесь должна быть цитата</div>
</div>
</div>
<div class="osnova">
<div class="taprim">
<div class="epprim">Название эпизода</div>
<div class="whenprim">Дата</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода может быть длинным, поэтому в ячейке "дата" я написала комментарий, чтобы наглядно показать</a></div>
<div class="when">00.00.00<br>
(здесь может быть ваша реклама)</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
<div class="tables">
<div class="episodes"><a href="ссылка на эпизод">название эпизода</a></div>
<div class="when">00.00.00</div>
</div>
</div>
[/html]Тема закрыта
Страница: 1