Основы гипертекстового представления интернет-контента.-4
.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