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

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

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

@Academik · 11.06.2019, 20:47

novichek_1905, раз пошел троллинг, придется вам показать как надо верстать таблицами)

CSS
1
2
3
4
5
6
7
8
9
10
11
body{font: 17px Arial; margin: 45px 45px 0 45px;}
.wrapper{max-width: 1000px; height: 800px; margin: 0 auto;}
 
.layer{color: #fff; text-align: center; width: 100%; height: 100%; border-spacing: separate; border-spacing: 5px;}
.layer td{border: 5px solid #fff;}
 
.nav{width: 80%; height: 15%; background-color: #cc0000;}
.date{width: 20%; height: 15%; background-color: #000;}
 
.content{height: 70%; background-color: #228b22;}
.footer{color: #000; height: 15%; background-color: #ffff00;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
    <table class="layer">
        <tr>
            <td class="nav">Верхнее меню</td>
            <td class="date">Время и дата</td>
        </tr>
        <tr>
            <td class="content" colspan="2">Зона содержимого</td>
        </tr>
        <tr>
            <td class="footer" colspan="2">Футер</td>
        </tr>
    </table>
</div>

Изучайте

@novichek_1905 · 11.06.2019, 22:03

Не по теме:

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

придется вам показать как надо верстать таблицами)

Вы просто гуру оптимизации, и знаете как работает colspan="2") Снимаю шляпу 8-)
В школьном задании это действительно важно)

@Сергей_1981 · 12.06.2019, 09:21 **[ТС]**

Спасибо за Ваши ответы! Есть над чем работать. Учебным материалам 5 лет. Верстать таблицами по материалам и учат, хотя изучение материалов в сети показывает, что на смену вёрстке таблицами пришли div'ы. Вот что я отправил на проверку:
1. 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="menu">
Верхнее меню<br>красный
<div class="time">
Время и дата<br>черный
<div class="content">
Зона содержимого<br>зеленый
<div class="footer">
Футер<br>желтый
</div>
</div>
</div>
<div align="center"></div>
</div>
</div>
</body>
</html>

2. 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;
}
.menu {
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;
}

3. Вот как это выглядит в Adobe Dreamweaver CS6:

@Сергей_1981 · 12.06.2019, 09:38 **[ТС]**

Academik, Вам отдельное огромное спасибо! Ваш ответ и прост, и доступен (даже мне), и код короткий, и вообще!

Вот что я получил после непродолжительных манипуляций с Вашим кодом:
1. 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
<!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="wrapper">
    <table class="layer">
        <tr>
            <td class="nav">Верхнее меню</td>
            <td class="date">Время и дата</td>
        </tr>
        <tr>
            <td class="content" colspan="2">Зона содержимого</td>
        </tr>
        <tr>
            <td class="footer" colspan="2">Футер</td>
        </tr>
    </table>
</div>
</body>
</html>

2. CSS:

CSS
1
2
3
4
5
6
7
8
body{font: 40px Arial; margin: 50px 50px 0 50px;}
.wrapper{max-width: 1000px; height: 800px; margin: 0 auto;}
.layer{color:black; text-align: center; width: 100%; height: 100%; border-spacing: separate; border-spacing: 5px;}
.layer td{border: 5px solid #fff;}
.nav{width: 80%; height: 15%; background-color:red;}
.date{color:white; width: 20%; height: 15%; background-color:black;}
.content{height: 70%; background-color:green;}
.footer{color: #000; height: 15%; background-color:yellow;}

3. Результат в Adobe Dreamweaver CS6:

@Academik · 12.06.2019, 20:56

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

3. Результат в Adobe Dreamweaver CS6:

Какой-то результат неожиданный получился в дримвивере: шапка слишком высокая, контентная часть наоборот меньшей высоты. Лучше код запускайте прям в браузере, так сказать в боевом режиме, а верстайте к примеру в sublime text 3.

@Сергей_1981 · 13.06.2019, 09:20 **[ТС]**

Вот скрин запущенного в браузере кода:

@Сергей_1981 · 13.06.2019, 09:24 **[ТС]**

А для вёрстки лично мне (лузеру, чайнику и пр.) удобнее использовать редактор WYSIWYG. Лично Вам ещё раз огромное спасибо за то, что не остаётесь безучастными к попыткам моим познать воистину волшебный мир кода! Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .	21 мат мед. Планы на развитие модели здравоСохранения anaschu 01.06.2026 AnyLogic: план развития симуляционной модели рабочего коллектива — динамический абсентеизм, реальные данные, три сценария сравнения Продолжаю серию постов о дискретно-событийной модели рабочего. . .	20. Мат мед. Абсентеизм как отдельный тип простоя anaschu 29.05.2026 Апдейт модели: исправленные баги, абсентеизм и новые механизмы Продолжаю развивать ранее описанную модель рабочего коллектива на AnyLogic. За последние несколько дней был проведён серьёзный. . .
19. здоровье, усталость и психотип работника влияют на производительность предприятия, и наоборот, производительность на здоровье, усталось и психотип anaschu 28.05.2026 Дискретно-событийная модель рабочего коллектива на AnyLogic: здоровье, выгорание, психотипы и микростимуляция Привет, коллеги. Хочу поделиться итогами нескольких недель работы над симуляционной. . .	"Прокси" для последовательного порта Eddy_Em 28.05.2026 Эту штуку написал я достаточно давно. Но сейчас вот понадобилось настроить датчик грозы, но при этом не отключать его от "метеодемона". Соответственно, надо запустить этот "прокси": метеодемон будет. . .	Рефакторинг программы уравнивания. Massaraksh7 26.05.2026 Пример по предыдущей записи в блоге. Но, надо заметить, что, во-первых, там оптимизация не только математики, но и работы с базой данных, и с графами, а во-вторых, это ещё не всё.	Использование TThread в Lazarus для математических вычислений. Massaraksh7 25.05.2026 Производя рефакторинг своих программ на предмет ускорения их работы, обратил внимание на такой аспект, как сокращение времени матвычислений. Дело в том, что приходится работать с большими матрицами. . .

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

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

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	13.06.2019, 09:20 [ТС]
	Вот скрин запущенного в браузере кода: Миниатюры 0

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	13.06.2019, 09:24 [ТС]
	А для вёрстки лично мне (лузеру, чайнику и пр.) удобнее использовать редактор WYSIWYG. Лично Вам ещё раз огромное спасибо за то, что не остаётесь безучастными к попыткам моим познать воистину волшебный мир кода! Спасибо! 0

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

Решение