Создайте стилевую таблицу, реализующую следующие установки для сайта:

@Сергей_1981 · Регистрация: 18.02.2019

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

Доброго времени суток, все!
В процессе обучения поставлена задача: "Создайте стилевую таблицу, реализующую следующие установки для сайта:
страница HTML длиной в 1000 пикселей и высотой 800 пикселей;
края левый, правый и верхний должны быть 50 пикселей;
используйте для фона цвета из схемы:

@Сергей_1981 · 10.06.2019, 14:31 **[ТС]**

Вот HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="site.css"/>
<title>Домашнее задание 4</title>
</head>
<body>
<div class="tot">
<div class="meniu">
Верхнее меню
красный
<div class="time">
Время и дата
черный
<div class="content">
Зона содержимого
зеленый
<div class="footer">
Футер
желтый
</div>
</div>
</div>
<div align="center"></div>
</div>
</div>
</body>
</html>

А вот CSS:

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
body{
margin:0px;
}.tot {
width:1000px;
height:800px;
margin:50px 50px 0px 50px;
}
.meniu {
width:600px;
height:200px;
background:red;
}
.time {
width:250px;
height:200px;
background:black;
}
.content {
width:900px;
height:250px;
background:green;
}
.footer {
width:900px;
height:150px;
background:yellow;
}

Добавлено через 1 минуту
Подскажите, пожалуйста, как правильно использовать позиционирование, чтобы отображение было идентичным указанному на фото. Спасибо!

@novichek_1905 · 10.06.2019, 15:32

Высоту уж сами подрегулируйте

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.box{
  display: grid;
  width: 800px;
  margin: 50px auto;
  grid-gap: 15px;
  grid: "nav nav nav  time"
        "content content content  content"
        "footer footer footer  footer";
}
 
.item:nth-child(1){
  grid-area: nav;
  background-color: red;
  height: 200px;
}
 
.item:nth-child(2){
  grid-area: time;
  background-color: black;
}
 
.item:nth-child(3){
  grid-area: content;
  background-color: green;
  height: 250px;
}
 
.item:nth-child(4){
  grid-area: footer;
  background-color: yellow;
  height: 150px;
}
  </style>
</head>
<body>
  <div class="box">
    <div class="item nav"></div>
    <div class="item time"></div>
    <div class="item content"></div>
    <div class="item footer"></div>
  </div>
</body>
</html>

@Сергей_1981 · 10.06.2019, 15:44 **[ТС]**

Вот новый HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="site.css"/>
<title>Домашнее задание 4</title>
</head>
<body>
<div class="tot">
<div class="meniu">
Верхнее меню<br>красный
<div class="time">
Время и дата<br>черный
<div class="content">
Зона содержимого<br>зеленый
<div class="footer">
Футер<br>желтый
</div>
</div>
</div>
<div align="center"></div>
</div>
</div>
</body>
</html>

и CSS:

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
body {
margin:0px;
padding:0px;
font-size: 30pt;
font-weight:300;
}
.tot {
width:1000px;
height:800px;
margin:50px 50px 0px 50px;
}
.meniu {
width:600px;
height:200px;
border:2px solid black;
text-align:center;
background:red;
position:absolute;
top:100px;
left:100px;
}
.time {
width:250px;
height:200px;
color:white;
border:2px solid white;
background:black;
position:absolute;
top:0px;
left:650px;
}
.content {
width:900px;
height:250px;
color:black;
border:2px solid black;
background:green;
position:absolute;
top:250px;
left:-650px;
}
.footer {
width:900px;
height:150px;
color:black;
border:2px solid black;
background:yellow;
position:absolute;
top:300px;
left:0px;
}

@Сергей_1981 · 10.06.2019, 15:49 **[ТС]**

Только выравнивание по вертикали не такое, как в задании:

@novichek_1905 · 10.06.2019, 16:47

Сообщение от Сергей_1981

Только выравнивание по вертикали не такое, как в задании:

Разбирайтесь)

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.box{
  display: grid;
  width: 800px;
  margin: 50px auto;
  grid-gap: 15px;
  grid: "nav nav nav  time"
        "content content content  content"
        "footer footer footer  footer";
}
 
.item{
  padding: 20px;
  text-align: center;
  font: 1rem/24px Arial, sans-serif;
  color: black;
}
 
.item:nth-child(1){
  grid-area: nav;
  background-color: red;
  height: 200px;
}
 
.item:nth-child(2){
  grid-area: time;
  background-color: black;
  color: #fff;
}
 
.item:nth-child(3){
  grid-area: content;
  background-color: green;
  height: 250px;
}
 
.item:nth-child(4){
  grid-area: footer;
  background-color: yellow;
  height: 150px;
}
  </style>
</head>
<body>
  <div class="box">
    <div class="item nav">1</div>
    <div class="item time">2</div>
    <div class="item content">3</div>
    <div class="item footer">4</div>
  </div>
</body>
</html>

@Сергей_1981 · 11.06.2019, 17:00 **[ТС]**

Вот такая была дана оценка: "Код совершенно неверный. Структура неправильная, повсеместное использование абсолютного позиционирования -- так делать в принципе нельзя. По уму надо всю верстку переделывать с нуля."
Кто-нибудь может подсказать, с чего начать "с нуля"?

@novichek_1905 · 11.06.2019, 17:08

Сергей_1981, я же вам предложил вариант основаный на css grid, почему вы его не показали своему проверяльщику?)

@Сергей_1981 · 11.06.2019, 17:14 **[ТС]**

Сообщение от novichek_1905

я же вам предложил вариант основаный на css grid

Элементарно, предложенный Вами вариант не был мною изучен. Более того, на данном этапе его не нашёл и в учебных материалах. Хотя, в этих учебных материалах есть и такие атрибуты, как "hspase" и "vspase".

@Academik · 11.06.2019, 17:20

Сергей_1981, по заданию вам таблицу нужно заверстать либо можно дивами?

@novichek_1905 · 11.06.2019, 17:21

Сообщение от Сергей_1981

Элементарно

Задачу нужно ставить более конкретнее, что бы реализовать эту сетку, можно использовать и table, flex, и float верстку, откуда знать, что написано у вас в учебных материалах?)

@Сергей_1981 · 11.06.2019, 17:24 **[ТС]**

Вот задание:

@Academik · 11.06.2019, 17:26

Сергей_1981, написано "стилевая таблица", верстайте таблицей значит.

@novichek_1905 · 11.06.2019, 17:28

Сообщение от Сергей_1981

Вот задание:

Не по теме:

"длиной в 1000px", боюсь вас научат плохому, какая такая длина... =))

Добавлено через 1 минуту
Academik, Стилевую таблицу) То есть CSS)

Не по теме:

Я думаю, чисто моё предположение, что учителю лет 100, судя по описанию задания...

@Academik · 11.06.2019, 17:46

Сообщение от novichek_1905

Academik, Стилевую таблицу) То есть CSS)

Давно не слышал чтоб таблицу стилей так называли.

Сообщение от Сергей_1981

Вот задание:

Так чем конкретно не устроили варианты, что выше дали?

Добавлено через 1 минуту

Сообщение от Сергей_1981

Код совершенно неверный. Структура неправильная, повсеместное использование абсолютного позиционирования -- так делать в принципе нельзя.

Скиньте сюда вариант, который вы преподу показали.

@novichek_1905 · 11.06.2019, 18:02

Сергей_1981, + вариант)))

PHP/HTML
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
129
130
131
132
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    body {
      font: 16px/24px Arial;
    }
 
    table {
      border-collapse: collapse;
      table-layout: fixed;
      border: none;
      text-align: center;
      width: 100%;
    }
 
    table td div {
      padding: 15px;
      height: 100%;
    }
 
    .table-0 table td {
      padding: 15px;
    }
 
    table td {
      vertical-align: top;
      color: black;
    }
 
    .table-0 {
      width: 1000px;
      margin: 50px auto;
    }
 
    .table-1 td {
      height: 200px;
      width: 625px;
    }
 
    .table-1 td+td {
      width: 375px;
    }
 
    .table-1 td div {
      background-color: red;
    }
 
    .table-1 td+td div {
      background-color: black;
      color: #fff;
    }
 
    .table-2 td {
      height: 250px;
    }
 
    .table-2 td div {
      background-color: green;
    }
 
    .table-3 td {
      height: 150px;
    }
 
    .table-3 td div {
      background-color: yellow;
    }
  </style>
</head>
 
<body>
  <table class="table-0">
    <tbody>
      <tr>
        <td>
          <table class="table-1">
            <tbody>
              <tr>
                <td>
                  <div>1</div>
                </td>
                <td>
                  <div>2</div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table-2">
            <tbody>
              <tr>
                <td>
                  <div>3</div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table-3">
            <tbody>
              <tr>
                <td>
                  <div>4</div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
 
</html>

@Academik · 11.06.2019, 18:21

Сергей_1981, вот мой вариант:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
        body{margin:  50px 50px 0 50px;}
        header, section, footer{display: block;}
        .container{max-width: 1000px; height: 800px; margin: 0 auto;}
 
        header{height: 15%; display: -webkit-flex; display: flex; justify-content: space-between;}
        header *{height: 100%;}
        header nav{width: calc(75% - 10px); background-color: red;}
        header .date{width: calc(25% - 10px); background-color: black}
 
        .content{margin: 20px 0; height: calc(70% - 20px); background-color: green;}
 
        footer{height: 15%; background-color: yellow;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div class="container">
        <header>
            <nav></nav>
            <div class="date"></div>
        </header>
        <section class="content">
 
        </section>
        <footer>
 
        </footer>
    </div>

И страница полностью на всякий случай:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{margin:  50px 50px 0 50px;}
        header, section, footer{display: block;}
        .container{max-width: 1000px; height: 800px; margin: 0 auto;}
 
        header{height: 15%; display: -webkit-flex; display: flex; justify-content: space-between;}
        header *{height: 100%;}
        header nav{width: calc(75% - 10px); background-color: red;}
        header .date{width: calc(25% - 10px); background-color: black}
 
        .content{margin: 20px 0; height: calc(70% - 20px); background-color: green;}
 
        footer{height: 15%; background-color: yellow;}
    </style>
</head>
<body>
    <div class="container">
        <header>
            <nav></nav>
            <div class="date"></div>
        </header>
        <section class="content">
 
        </section>
        <footer>
 
        </footer>
    </div>
</body>
</html>

Добавлено через 5 минут

Сообщение от novichek_1905

Сергей_1981, + вариант)))

Зачем столько вложенных таблиц? Тут если верстать таблицей по сути три строки можно использовать и заверстать одной таблицей.

@novichek_1905 · 11.06.2019, 18:31

Сообщение от Academik

Зачем столько вложенных таблиц?

можно и без вложенных) Но тогда пришлось бы объяснять ТС назначение атрибута colspan="2"...)

@Academik · 11.06.2019, 18:32

Сообщение от novichek_1905

Но тогда пришлось бы объяснять ТС назначение атрибута colspan="2"

Лучше объяснить, чем городить столько кода.

@novichek_1905 · 11.06.2019, 18:33

Academik,

Не по теме:

от слов к делу, оптимизируйте мой вариант)

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? 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 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457

	Создайте стилевую таблицу, реализующую следующие установки для сайта: 10.06.2019, 14:28. Показов 3476. Ответов 26 Метки нет (Все метки) Доброго времени суток, все! В процессе обучения поставлена задача: "Создайте стилевую таблицу, реализующую следующие установки для сайта: страница HTML длиной в 1000 пикселей и высотой 800 пикселей; края левый, правый и верхний должны быть 50 пикселей; используйте для фона цвета из схемы: Миниатюры 0

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	10.06.2019, 15:49 [ТС]
	Только выравнивание по вертикали не такое, как в задании: Миниатюры 0

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	11.06.2019, 17:00 [ТС]
	Вот такая была дана оценка: "Код совершенно неверный. Структура неправильная, повсеместное использование абсолютного позиционирования -- так делать в принципе нельзя. По уму надо всю верстку переделывать с нуля." Кто-нибудь может подсказать, с чего начать "с нуля"? 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	11.06.2019, 17:08
	Сергей_1981, я же вам предложил вариант основаный на css grid, почему вы его не показали своему проверяльщику?) 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	11.06.2019, 17:20
	Сергей_1981, по заданию вам таблицу нужно заверстать либо можно дивами? 0

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	11.06.2019, 17:24 [ТС]
	Вот задание: Миниатюры 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	11.06.2019, 17:26
	Сергей_1981, написано "стилевая таблица", верстайте таблицей значит. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	11.06.2019, 18:33
	Academik, Не по теме: от слов к делу, оптимизируйте мой вариант) 0