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

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

Не по теме:

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

Новые блоги и статьи Все статьи Все блоги /
Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .

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

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