Основы гипертекстового представления интернет-контента.-2
.pdf
Рисунок2 |
– Вариантыпредставления |
HTML-кода |
Сущнеспособовколькотвуетуправлятьитокстрсеткио: мить
1.float;
2.inline-block;
3.табличная вёрстка;
4.flexbox.
Табличнаявёрст ка — самыйпростойдляпониманияспособ пострсет.Нонсчитаетсяениякустаревшимиспользоватьегоне рекомендуется.
Флексбоксы — этон иоченьваямощнаятехнологиядляпостроения сет.Кожалениюк,еёподдержкабраузерамиещёдостаточнослабая.
Флоатыиинлайн -блокинаиболеераспространенные поддерживспособысоздсеток.анияемые
2.4. Лабораторнаяработа« |
Созданиедекоративныхэл вебментов |
- |
страниц» |
|
|
Цель работы |
|
|
Создатьдекоративныйэлементдлявеб |
-страницы. |
|
Порядвыполненияк |
лабораторнойработы |
|
Создадимпростуюкнопку,ис ользуясевдо |
-клаипссыевдо |
- |
элементы. |
|
|
|
11 |
|
Стидляк ассаиbutton,котсокругздаютрыескрасным
градиентом:
.button { height: 100px; width: 100px;
position: relative; margin: 50px; color: white; text-align: center; line-height: 100px;
/*закругленные углы и тень*/ -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4); -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4); box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
/*градиент*/ background:длястарыхбраузеров*/#e51d16; /*
background: -moz-linear-gradient(top, #e51d16 0%, #b21203 100%); /* для FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, colorstop(0%,#e51d16), color-stop(100%,#b21203)); /* для Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e51d16 0%,#b21203 100%); /* для Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e51d16 0%,#b21203 100%); /* для Opera 11.10+ */
background: -ms-linear-gradient(top, #e51d16 0%,#b21203 100%); /* для IE10+ */
12
background: linear-gradient(top, #e51d16 0%,#b21203 100%); /* W3C
*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51d16', endColorstr='#b21203',GradientType=0); /* IE6-9 */ }
Весьэткоприветдксоздовольноетаниюпрост,круглойй кнопкиРисунок( 3).
Рисунок3 – Краскруглаякнопка
Добавимзатемненнуюобластьпределамикнопкипридатьей внутреннюютень.Вместодобавленияполнительнойразметки,будем использоватьпустойпсевдо -элемент.
.button:before { content:"";
}
Сделасамоетожещераз.Этожносуществитьиспользуя псевдо-элемент:afterиповторитьпроцесс.
.button:after { content:"";
}
13
2.5. Лабораторнаяработа« |
Каскадныетаблстилейцы |
» |
Цель работы |
|
|
Создатьнаборправил |
CSS дляподготовленнойпредыдущих |
|
лабораработс раницыор. хых |
|
|
Порядвыполненияк |
лабораторнойработы |
|
НаборправилсостоселектораCSSиз иблоде . рации |
|
|
Декларацияпредстизсебянаборпарвляетавило |
|
-значение. |
Рисунок4 – Нагляпредправилноеставление |
CSS |
СелекторуказываетнаHTMLэлемент,которыйнужнос илизовать. Блокде состоитларацииизодногоилинесколькихзначений, разделенныхточкойсзапятой.Каждаядекларациявключаетсебяимя
CSS-свойстваизначение ,разделво.Декларациянныеточиемвс гда заканточкойсзапятойивается,блокобъокруженвленияфигурными скобками.
p {
color: red; text-align: center;
}
СелекторывCSSисподтого,чтобыяьзуюнайили(выбраться)
HTML-элементыпоиден, пу тификатору,классу,атрилибх ту комбинаций.
Селекттипаоснназванорванныетега.Впрнижестилимере будутпримененыковст <p></p>:гам
14
p {
text-align: center; color: red;
} |
|
|
СелекторидентификатораиспользуетатрибутдляIDвыбора |
|
|
конкретногоэлемента. IDдолженбыуникальнымть |
|
|
странице,поэстилинаписанныеомудляселекторпоприменятсяID |
|
|
одноэле.Длямвыбораентуэлементасначалапишетсясимволхэш(#), |
|
|
азатемзн чениетрибутаID. |
|
|
#para1 { |
|
|
text-align: center; |
|
|
color: red; |
|
|
} |
|
|
ВпримеревыбираетсяHTML |
-элементс |
id=”para1”.Названиенеid |
можетначинатьсяцифры! |
|
|
Селекторклассанаиболееч используемыйстоселект.Спомощьюр |
|
|
этогоселектовыбивсеэлементырасопределютсязначеннымием |
|
|
атрибутаclass. |
|
|
Выборэле ментовчерезкласспроизводспомощьюзапитсяси назвклиаточкинияссаперед. м
Впримерениже,всеэлементысклассом“center”будуткрасными выравпоце.неннытру
.center {
text-align: center; color: red;
}
Выможететакжеуказатьконкретныете гиснужнымклассом.В примеренижесвойствавыбравсе<p>созначениемклассаы= “center”:
15
p.center {
text-align: center; color: red;
}
HTML-элементможетбытьстилизованнесклассамиолькими.Имя классанеможетн чинатьсяцифры!
Группыселектор ов Еслиувасе тьелекторысодинастилями, здесьаковыми
h1 {
text-align: center; color: red;
}
h2 {
text-align: center; color: red;
}
p {
text-align: center; color: red;
}
толучшевсеихгоруппир,дляминимизациико. вд ть
Длягруппи ровкиселекторыпростозаписывчереззапятую,к ютсяк впримерениже:
16
h1, h2, p {
text-align: center; color: red;
} |
|
Вескаскада |
|
Очастоеньвозникситу,когаетцияднаомужет гу |
|
применяетсянесколькоконфликдругдругомстующихил |
ей.Идля |
того,чтобыэток нфликтыразрешитьприменяетсясвойка кадноститво |
|
ивес. |
|
Еслиникакихстидлятеганеейзписано,топриментаблицатся |
|
стилейбраузера,вкотооп свойеделдлястетва.Еслиныхговже |
|
стилизап,ониимеютсаныравный |
вес,топрименяетсятоправило, |
котороезапнижепокодусано. |
|
Какжерассчитываетсявесселектора? |
|
Предвоколонокставимемь: 0 |
-0-0-0-0-0-0-0 |
Селекторипамеетсамыйнизкийвес,поэтомузакаждыйтегв |
|
записиможноприбавитьсамыйправыйстолбецедин |
ицу: |
div a - 0-0-0-0-0-0-0-2 |
|
div - 0-0-0-0-0-0-0-1 |
|
Каждыйклаип( ссевдокласправа)добаединицувторойляет |
|
столбец.Сюдажедобавляетедиселекторницуатрибутов: |
|
.head .logo – 0-0-0-0-0-0-2-0
.logo.big – 0-0-0-0-0-0-2-0 div:first-child – 0-0-0-0-0-0-1-1
.logog > .big - 0-0-0-0-0-0-2-0
КаждыйIDвтретий+1справа:
#header - 0-0-0-0-0-1-0-0 #header nav 0-0-0-0-0-1-1-0
17
2.6. Лабораторнаяработа« |
ВведениеJava |
-script» |
Цель работы
Создатьскриптплавногоперемещениятекстаслеванаправо.
Порядоквыполнения лабораторнойработы
Создадимпростейшийскриптплавногоперемещениятекстаслева
направо.
Сначаласледуетввеститексттэге<div>,ограничивающемтекст, добавииденidтьификатор.
<html>
<head>
<title>Простая страница</title> </head> <body>
<div id="anim">
Текст,шагоммарш! </div> 41 </body> </html>
ЗатемвоспользуемчтобыCSS,помтекначальноеститья
положение:
<html> <head>
<title>Простая страница</title> </head>
<body>
<div id="anim" style="position:absolute; left:10; top:10"> Текст,
шагом марш! </div> </body>
18
</html>
ДалееначиработатьнасценариемдJavaScriptПосколькуне . нужно,чтобытекствечнодвигалсявправо,надопредусмотреть возмконтржнэтогопрстьлир.Чтцесзапуститьованиябыценарий навыполне ниетолькоприусловнаходится,еслтекст,например, менеечемв пиксел500отлевойгрэкрананицых,удобнеевсего воспользоватьсяопераДляifэто.понадобитсярг атрибутмCSS pixelLeft.
<html>
<head> <title>Простаястраница</title>
<script language="JavaScript"> function moveTxt()
{
if (anim.style.pixelLeft < 500)
{
}
}
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст,шагоммарш! </div> </body> </html>
Теперьрассмотоператоры,упримнимациейвляющие. |
Прежде |
всегонужнозадатьскачок.Каждыйразтекстбудетперемещатьсявправо |
|
напикселей50.АтрибутpixelLeftиспользуетсянетолькодля |
|
определенположениятекста,нодляизмененияположенияна50 |
|
пикселей: |
|
|
19 |
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function moveTxt()
{
if (anim.style.pixelLeft < 500)
{
anim.style.pixelLeft +=50;
}
}
</script>
</head>
<body>
<div id="anim" style="position:absolute; left:10; top:10">
Текст,шагоммарш! </div> </body>
Далееречьпо йдетобинтерв.Онзадспоаетсялемощьюетода setTimeout,позволяющегоновьзапустфункциюпосттьлечения определенногопромвр.Давайтежмениустаткаиндотерваловим повторногозапфусканкцииmoveTxt(),равным5000мс:
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> <!-- Маскируемся!
function moveTxt()
{
if (anim.style.pixelLeft < 500)
{
anim.style.pixelLeft +=50;
20