Download
1 / 23
250 likes | 433 Views
Технология сетевого дизайна и ее программное обеспечение. Лекция 1. Лекция 4. Позиционирование элементов. Свойство CSS position. <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <title>position</title> <style> .layer1 {
E N D
Технология сетевого дизайна и ее программное обеспечение Лекция 1 Лекция 4
Позиционирование элементов. Свойство CSS position <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>position</title> <style> .layer1 { position: relative; /* Относительное позиционирование */ background: #f0f0f0; /* Цвет фона */ height: 200px; /* Высота блока */ } .layer2 { position: absolute; /* Абсолютное позиционирование */ bottom: 15px; /* Положение от нижнего края */ right: 15px; /* Положение от правого края */ line-height: 1px; } </style> </head>
Позиционирование элементов. Свойство CSS position .layer1 { position: relative; /* Относительное позиционирование */ background: #f0f0f0; /* Цвет фона */ height: 200px; /* Высота блока */ } .layer2 { position: absolute; /* Абсолютное позиционирование */ bottom: 15px; /* Положение от нижнего края */ right: 15px; /* Положение от правого края */ line-height: 1px; }
<body> <div class="layer1"> <div class="layer2"> <imgsrc="images/girl.jpg" alt="Девочка" /> </div> </div> </body> </html>
HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое. http://htmlbook.ru/html5
Различия в разметке веб-страниц Декларация о типе документа для браузера HTML4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!doctype html>
Различия в разметке веб-страниц Указание языка страницы HTML5 <html lang="ru"> </html>
Различия в разметке веб-страниц Указание кодировки документа HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset="utf-8">
Различия в разметке веб-страниц Подключения JavaScriptа HTML4 <script src="js/scripts.js" type="text/javascript"></script> HTML5 <script src="js/scripts.js"></script>
Разметка веб-страницыHTML5 <body> <header>...</header> <nav>...</nav> <article> <section>...</section> </article> <aside>...</aside> <footer>...</footer> </body>
Новые элементы разметки HTML5 <header> представляют собой заголовки разделов. Они могут состоять из нескольких частей – например, было бы оправданно разделять блок заголовка на подзаголовки, историю версий или указание авторства. <footer> определяет нижнюю часть раздела, к которому он относится. Обычно он содержит информацию о разделе – например, имя автора, ссылки на похожие документы, копирайт и т.п. <nav> содержит список ссылок для навигации. Подходит, например, для навигации по сайту или для содержания.
Новые элементы разметки HTML5 <aside> подходит для размещения содержимого каким-либо образом родственного основному контенту. В обычном случае будет полезен для разметки боковой колонки. <section> представляет общий раздел документа или приложения. <article> отмечает независимый раздел документа, страницы или сайта. Применим для такого содержимого как новости, записи блога, сообщения в форуме или комментарии пользователей.
Страница в Dreamveawer HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> </body> </html>
Страница в Dreamveawer HTML5 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5</title> <link rel="stylesheet" href="html5.css"> </head> <body> <header> <h1>Header</h1> <h2>Subtitle</h2> <h4>HTML5 Rocks!</h4> </header>
<div id="container"> <nav> <h3>Nav</h3> <a href="">Link 1</a> <a href="">Link 2</a> <a href="">Link 3</a> </nav> <section> <article> <header> <h1>Article Header</h1> </header> <p>Loremipsum dolor HTML5 nuncautnunquam sit amet, consecteturadipiscingelit. Vivamus at esteros, velfringillaurna.</p> <p>Per inceptoshimenaeos. Quisquefeugiat, justo at vehiculapellentesque, turpislorem dictum nunc.</p>
<footer> <h2>Article Footer</h2> </footer> </article> <article> <header> <h1>Article Header</h1> </header> <p>HTML5: "Loremipsum dolor nuncautnunquam sit amet, consecteturadipiscingelit. Vivamus at esteros, velfringillaurna. Pellentesqueodio</p> <footer> <h2>Article Footer</h2> </footer> </article> </section>
<aside> <h3>Aside</h3> <p>HTML5: "Loremipsum dolor nuncautnunquam sit amet, consecteturadipiscingelit. Vivamus at esteros, velfringillaurna. Pellentesqueodiorhoncus</p> </aside> <footer> <h2>Footer</h2> </footer> </div> </body> </html>
article { background-color: #eee; display:block; margin: 10px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} article header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;} article footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;} CSS файл фрагмент
