Страничка в html

@Server043 · Регистрация: 27.12.2016

Студворк — интернет-сервис помощи студентам

Помогите перенести страницу в html

@tnfsk · 11.04.2019, 17:53

jsfiddle

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<div class="container">
<div class="menu">
<i id="menu_button" class="material-icons material-menu">menu</i>
<i id="close_button" class="material-icons material-close">close</i>
<ul id="list" class="list">
<li><a href="#">Малыш и Крлсон</a></li>
<li><a href="#">Колобок</a></li>
<li><a href="#">Кошкин дом</a></li>
<li><a href="#">Буратино</a></li>
</ul>
 
 
</div>
<div class="left">
<i id="arrow_upward" class="material-icons arrow_upward">
arrow_upward
</i>
</div>
<div id="slides" class="slides">
 
<div class="slide">
<img class="slideImg" src="https://pixy.org/placeholder/5cadf94972f3f.jpg" alt="">
<div class="text">
<p>В городе Стокгольме, на самой обыкновенной улице,
в самом обыкновенном доме живёт самая обыкновенная
шведская семья по фамилии Свантесон. Семья эта состоит
из самого обыкновенного папы, самой обыкновенной мамы
и трёх самых обыкновенных ребят - Боссе, Бетан и Малыша.</p>
 
<p>Но это, конечно, неправда. Ведь на свете столько мальчишек,
которым семь лет, у которых голубые глаза, немытые уши и разорванные
на коленках штанишки, что сомневаться тут нечего:
Малыш - самый обыкновенный мальчик.</p>
 
<p>Боссе пятнадцать лет, и он с большей охотой стоит
в футбольных воротах, чем у школьной доски,
а значит - он тоже самый обыкновенный мальчик.</p>
 
</div>
 
</div> <!-- slide -->
 
 
<div class="slide">
<img class="slideImg" src="https://pixy.org/placeholder/5caf35b5d9032.jpg" alt="">
<div class="text">
<p>Во всём доме есть только одно не совсем обыкновенное существо —
Карлсон, который живёт на крыше. Да, он живёт на крыше,
и одно это уже необыкновенно. Быть может, в других городах
дело обстоит иначе, но в Стокгольме почти никогда не случается,
чтобы кто-нибудь жил на крыше, да ещё в отдельном маленьком домике.
А вот Карлсон, представьте себе, живёт именно там.</p>
 
<p>Карлсон — это маленький толстенький самоуверенный человечек,
и к тому же он умеет летать. На самолётах и вертолётах летать
могут все, а вот Карлсон умеет летать сам по себе. Стоит ему
только нажать кнопку на животе, как у него за спиной тут же
начинает работать хитроумный моторчик. С минуту, пока пропеллер
не раскрутится, как следует, Карлсон стоит неподвижно, но когда
мотор заработает вовсю, Карлсон взмывает ввысь и летит, слегка
покачиваясь, с таким важным и достойным видом, словно какой-нибудь
директор, — конечно, если можно себе представить директора с
пропеллером за спиной.</p>
 
</div>
 
</div> <!-- slide -->
 
 
<div class="slide">
<img class="slideImg" src="https://pixy.org/placeholder/5caf35eb3c3c2.jpg" alt="">
<div class="text">
<p>Карлсону прекрасно живётся в маленьком домике на крыше.
По вечерам он сидит на крылечке, покуривает трубку да глядит
на звёзды. С крыши, разумеется, звёзды видны лучше,
чем из окон, и поэтому можно только удивляться, что
так мало людей живёт на крышах. Должно быть, другие
жильцы просто не догадываются поселиться на крыше. Ведь они
не знают, что у Карлсона там свой домик, потому что домик
этот спрятан за большой дымовой трубой. И вообще,
станут ли взрослые обращать внимание на какой-то там
крошечный домик, даже если и споткнутся о него?</p>
 
<p>Малыш был очень рад, что познакомился с Карлсоном.
Как только Карлсон прилетал, начинались необычайные приключения.
Карлсону, должно быть, тоже было приятно познакомиться с Малышом.
Ведь что ни говори, а не очень-то уютно жить одному в маленьком домике,
да ещё в таком, о котором никто и не слышал. Грустно,
если некому крикнуть: «Привет, Карлсон!», когда ты пролетаешь мимо.</p>
 
</div>
 
</div> <!-- slide -->
 
 
<div class="slide">
<img class="slideImg" src="https://pixy.org/placeholder/5caf3551e284a.jpg" alt="">
<div class="text">
 
<p>Их знакомство произошло в один из тех неудачных,
дней, когда быть Малышом не доставляло никакой
радости, хотя обычно быть Малышом чудесно.
Ведь Малыш — любимец всей семьи, и каждый балует его
как только может. Но в тот день всё шло шиворот-навыворот.
Мама выругала его за то, что он опять разорвал штаны,
Бетан крикнула ему: «Вытри нос!», а папа рассердился,
потому что Малыш поздно пришёл из школы.</p>
 
<p>Если бы это зависело от Малыша, то желание щенка
осуществилось бы тут же. Но беда заключалась в том,
что мама и папа ни за что не хотели держать в доме собаку.
А кроме того, из-за угла вдруг появилась какая-то тётка
и закричала: «Рики! Рики! Сюда!» — и тогда Малышу
стало совершенно ясно, что этот щенок уже никогда не станет его щенком.</p>
 
</div>
 
</div> <!-- slide -->
 
</div>
 
<div class="right">
<i id="arrow_downward" class="material-icons arrow_downward">
arrow_downward
</i>
</div>
 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
* {
  box-sizing: border-box;
}
 
/* 360-30-60 */
 
html{
  font-family: Roboto, sans-serif;
  line-height: 1.6;
  font-size: 15px;
}
 
body{
  padding-top: 25px;
}
 
p{
  margin: 0 0 15px 0;
}
 
.container{
  width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 80px 600px 80px;
  position: relative;
}
 
.menu{
  grid-column-start: 1;
  grid-column-end: 4;
  
}
 
.list{
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  text-align: center;
  font-size: 20px;
  height: calc(100% - 72px);
  left: auto;
  top: 72px;
  bottom: 0;
}
 
.list li {
  margin-bottom: 32px;
}
 
.list a{
  color: darkslateblue;
  text-decoration: none;
}
 
.slides{
  grid-column-start: 2;
  grid-column-end: 3;
}
 
.slideImg{
  display: block;
  width: 100%;
  margin-bottom: 32px;
}
 
.arrow_upward, .material-menu, .arrow_downward, .material-close{
  font-size: 40px;
  line-height: 1;
  color: darkslateblue;
  cursor: pointer;
}
 
.material-menu{
  margin: 0 0 32px 0;
  display: block;
  text-align: center;
}
 
.material-close{
  margin: 0 0 32px 0;
  display: none;
  text-align: center;
}
 
.arrow_upward, .arrow_downward{
  margin-top: 300px;
}
 
.arrow_upward{
  margin-right: 40px;
}
 
.arrow_downward{
  margin-left: 40px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var slide_length  = $('#slides').children().length;
var slide_active = 0;
console.log(slide_length);
$('#slides').children().css('display', 'none');
$('#slides').children().eq(slide_active).css('display', 'block');
 
$('#arrow_downward').click(function(){
  if(slide_active < (slide_length - 1)){
    slide_active += 1;
    $('#slides').children().css('display', 'none');
    $('#slides').children().eq(slide_active).css('display', 'block');
  }
});
 
$('#arrow_upward').click(function(){
  if(slide_active > 0){
    slide_active -= 1;
    $('#slides').children().css('display', 'none');
    $('#slides').children().eq(slide_active).css('display', 'block');
  }
});
 
 
$('#menu_button').click(function(){
    $('#list').css('display','block');
    $('#menu_button').css('display', 'none');
    $('#close_button').css('display','block');
});
 
$('#close_button').click(function(){
  $('#list').css('display','none');
  $('#close_button').css('display', 'none');
  $('#menu_button').css('display', 'block');
});

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@Server043 0 / 0 / 0 Регистрация: 27.12.2016 Сообщений: 11

	Страничка в html 10.04.2019, 11:13. Показов 1482. Ответов 1 Метки нет (Все метки) Помогите перенести страницу в html Миниатюры 0

Страничка в html

Решение