Сделать заголовки

@PROFII · Регистрация: 19.01.2011

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

Люди добрые подскажите как сделать такие-же заголовки как на картинке с использованием таблицы стилей.

В первом заголовке получите объемный эффект. Для этого:
с помощью свойств margin-top и margin-left сделайте наложение двух строк текста
с помощью свойства font-size установите большой размер строк
с помощью свойства color - сделайте, чтобы вторая строка выглядела тенью
шрифт заголовка - Arial.

Второй заголовок: желтого цвета на зеленом фоне, причем фон лишь немного шире заголовка, но уже основного текста. Буквы заголовка подчеркнуты и надчеркнуты.

Остальное все сделал с заголовками только запарился. Заранее благодарю.

@Герц · 06.03.2012, 17:23

Сделай text-shadow, твой вариант устарел.

@PROFII · 06.03.2012, 18:19 **[ТС]**

В том-то и дело что мне нужно сделать так, как указано в задании. Это контрольная работа, не могу же я в ней задания переделывать. Подскажите кто знает.

@Герц · 06.03.2012, 18:39

Скинь свою страничку со всем сделанным кроме заголовков.

@PROFII · 06.03.2012, 19:08 **[ТС]**

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
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 3.2//RU">
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<title>Контрольная</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head> 
 
<body text="black">
<div class="blue">НЕМНОГО ИСТОРИИ </div> 
<div class="navy"> НЕМНОГО ИСТОРИИ </div>
 
<p class="frame1">
В течение многих лет предпринималось немало попыток разработать концепцию 
универсальной информационной базы данных, в которой можно было бы не только 
получать информацию из любой точки земного шара, но и иметь удобный способ 
связи информационных сегментов друг с другом, так чтобы наиболее важные 
данные могли быть быстро найдены. В 60-е годы исследования в этой области 
породили понятие "информационной Вселенной" (docuniverse = documentation + 
universe), которая преобразила бы всю информационную деятельность. Но только в 
настоящее время появилась технология, воплотившая эту идею и предоставляющая 
возможности ее реализации в масштабах планеты.
</p>
<h1 align="center" class="yellow">WWW - "ВСЕМИРНАЯ ПАУТИНА" </h1>
<p class="frame2">
WWW – это аббревиатура от <sup>"World Wide Web"</sup> <sub>("Всемирная паутина")</sub>. 
Официальное определение World Wide Web звучит как мировая виртуальная 
файловая система – широкомасштабная гипермедиа-среда, ориентированная на 
предоставление универсального доступа к информационным ресурсам. 
Проект WWW возник в начале 1989 года в Европейской Лаборатории физики 
элементарных частиц (CERN) в Женеве (<a href="http://www.cern.ch/">http://www.cern.ch/</a>). Идея проекта состояла в 
создании гипертекстовой системы связи документов в компьютерной сети. Со 
временем World Wide Web (WWW, Web) превратилась в общемировую систему, 
состоящую из программного обеспечения – WWW технологий и связанных между 
собой документов. 
</p>
<p>
Используя специальный программный интерфейс для WWW, изменился процесс 
просмотра и создания информации. Суть в том, что компьютер, подключенный к 
Интернет в режиме on-line, можно преобразовать в Web-сервер и наполнить его 
информацией. По всему миру существуют тысячи информационных серверов, и с 
любого компьютера, имеющего выход в Интернет, можно установить сетевое 
соединение с Web-сервером и смотреть текст, графику, видеоролики, слушать 
аудиоклипы (все это вместе и называется гипермедиа). 
Первый такой сервер был организован в CERN, там же с целью развития и 
поддержки стандартов WWW технологий был создан The World Wide Web 
Consortium, или W3C. Web-сервер Консорциума <a href="http://www.w3.org/pub/WWW/">http://www.w3.org/pub/WWW/ </a> является 
интегрирующим сервером по поддержке WWW технологий в Интернет. 
</p>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
body{background-color:silver; margin-left:5em; margin-right:2em; margin-top:2em; margin-bottom:2em}
 
a:link {color:maroon}
a:visited{color:green}
 
.blue {color:blue; margin-top:50px}
.navy {color:navy}
h1.yellow{ color:yellow; background:green}
p{background-color: #ffffff; font-family:arial;line-height:180%; text-indent:35px;padding-left:50px; padding-right:30 }
.frame1 {border-left:5px solid red}
.frame2{border-right:5px double blue}

@PROFII · 09.03.2012, 06:41 **[ТС]**

Неужели никто подсказать не может???

@Lane · 09.03.2012, 08:34

Второй заголовок можно обернуть дивом, сделать

CSS
1
text-align: center

а у заголовока поставить

CSS
1
hX {display: inline-block; border-bottom: 1px solid; border-top: 1px solid;}

Или подобрать ширину заголовка и сделать

CSS
1
hX {width: xxx; margin: auto;}

@alpex · 13.09.2012, 09:53

зачем вобще учить таким методам

@and_y87 · 13.09.2012, 12:31

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

зачем вобще учить таким методам

Согласне

При устройстве на работу за такое кощунство на вас посмотрят как на врага народа...

если уж и изучать наложение при помощи margin-top, bottom то уж хотя бы на стоящих примерах...
которые пригодятся в дальнейшем...

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@PROFII 0 / 0 / 0 Регистрация: 19.01.2011 Сообщений: 46

	Сделать заголовки 06.03.2012, 15:38. Показов 5825. Ответов 8 Метки нет (Все метки) Люди добрые подскажите как сделать такие-же заголовки как на картинке с использованием таблицы стилей. В первом заголовке получите объемный эффект. Для этого: с помощью свойств margin-top и margin-left сделайте наложение двух строк текста с помощью свойства font-size установите большой размер строк с помощью свойства color - сделайте, чтобы вторая строка выглядела тенью шрифт заголовка - Arial. Второй заголовок: желтого цвета на зеленом фоне, причем фон лишь немного шире заголовка, но уже основного текста. Буквы заголовка подчеркнуты и надчеркнуты. Остальное все сделал с заголовками только запарился. Заранее благодарю. Миниатюры 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	06.03.2012, 17:23
	Сделай text-shadow, твой вариант устарел. 0

@PROFII 0 / 0 / 0 Регистрация: 19.01.2011 Сообщений: 46
	06.03.2012, 18:19 [ТС]
	В том-то и дело что мне нужно сделать так, как указано в задании. Это контрольная работа, не могу же я в ней задания переделывать. Подскажите кто знает. 0

@Герц 545 / 344 / 12 Регистрация: 05.11.2010 Сообщений: 1,076 Записей в блоге: 1
	06.03.2012, 18:39
	Скинь свою страничку со всем сделанным кроме заголовков. 0

@PROFII 0 / 0 / 0 Регистрация: 19.01.2011 Сообщений: 46
	09.03.2012, 06:41 [ТС]
	Неужели никто подсказать не может??? 0

@alpex 603 / 578 / 103 Регистрация: 16.07.2012 Сообщений: 1,762
	13.09.2012, 09:53
	зачем вобще учить таким методам 1