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

@Сергей_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,

Не по теме:

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

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

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

	Создайте стилевую таблицу, реализующую следующие установки для сайта: 10.06.2019, 14:28. Показов 3517. Ответов 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