Файл: Лабораторна робота №16.pdf

Скачать файл (0,21Мб)

Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 12.06.2024

Просмотров: 13

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Лабораторная работа №16

Верстка страниц с помощью CSS

Жесткая HTML & CSS верстка блоками Пример блочной верстки сайта:

<html>

<head>

<title>Пример блочной верстки</title> <style type="text/css">

div#block {width:600px; margin:0 auto; background-color:#dddddd} div.header {width:600px; height:100px; background-color:#717dc9}

div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9}

div.right_col {width:450px; float:left}

div.footer {width:600px; height:70px; background-color:#717dc9; clear:both} </style>

</head>

<body>

<div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div>

<h2 align="center">CSS верстка сайта</h2>

<h4 align="center">Жесткая верстка блоками</h4> </div>

</body>

</html>

Результат:

Атрибуты и значения

·background-color: – определяет цвет фона.

·margin:0 auto – определяет центрирование блока.

·width: – определяет ширину в пикселях или в процентах.

·height: – определяет высоту.

·float:left – определяет обтекание слева.

·border-right: – определяет свойства правой границы.

·clear:both – отменяет обтекание с обеих сторон.

Обратите внимание на пунктирную границу левой колонки, которая почему-то не доходит до низа. Подобные ньюансы легко устраняются с помощью атрицательного значения атрибута margin. Например, margin- bottom:-15px обрежет лишнее (смотрите следующий пример).

Жесткая HTML & CSS верстка блоками в три колонки Пример жесткой блочной верстки сайта в три колонки:

<html>

<head>

<title>Пример жесткой блочной верстки сайта в три колонки</title> <style type="text/css">

div#block {width:750px; margin:0 auto; background-color:#dddddd} div.header {width:750px; height:100px; background-color:#717dc9}

div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}

div.center_col {width:450px; float:left}

div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}

div.footer {width:750px; height:70px; background-color:#717dc9; clear:both} </style>

</head>

<body>

<div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div>

<h2 align="center">CSS верстка сайта</h2>

<h4 align="center">Жесткая верстка блоками</h4> </div>

</div>

</body>

</html>

Результат:

Блочная верстка предпочтительнее табличной верстки. Верстка сайта блоками предоставляет больше возможностей для форматирования и дизайна. Верстка блоками требует умения работать с атрибутами margin, padding, float, clear.

Например, атрибут float позволяет расположить несколько, следующих друг за другом, блоков по горизонтали, чтобы разделить web-страницу по вертикали.

Резиновая HTML & CSS верстка блоками

Пример резиновой верстки сайта с помощь блоков:

<html>

<head>

<title>Пример резиновой верстки сайта с помощь блоков</title> <style type="text/css">

div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}

div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left}

div.right_col {background-color:#dddddd; height:400px; min-width:380px; maxwidth:3800px; margin-left:200px; padding-left:20px}

</style>

</head>

<body>

<div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div>

<div class="right_col"> <h2>CSS верстка сайта</h2>

<h4>Резиновая верстка блоками</h4> </div>

</body>

</html>

Результат:

Мы видим, что правая колонка сползла вниз добавим к селектору div.right_col параметр margin- top:-20px.

Атрибуты и значения

·padding-left: – определяет внутренний отступ слева.

·margin-top: – определяет внешний отступ сверху.

·margin-left: – определяет внешний отступ слева.

·min-width: – определяет минимальную ширину.

·max-width: – определяет максимальную ширину.

Левая колонка с параметром float:left фактически накрывает собой правую, так как правая не содержит атрибут обтекания. В свою очередь, параметр margin-left:200px определяет отступ правой колонки, поэтому она не перекрывается. Мы не можем задать обтекание для правой колонки, потому что в таком случае будут недействительны min-width и max-width.

Обратите внимание на значение padding, на ширину пунктирной границы, на размеры.

Резиновая + жесткая HTML & CSS верстка блоками Пример блочной CSS верстки сайта:

<html>

<head>

<title>Пример блочной CSS верстки сайта</title> <style type="text/css">

div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}

div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}

div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }

div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}

</style>

</head>

<body>

<div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div>

<div class="right_col"> <h2>CSS верстка сайта</h2>

<h4>Резиновая верстка блоками</h4> </div>

</html>

Результат: Поместим левую и правую колонку в контейнер<div id="block"> </div>. Отцентрируем его с помощью margin:0 auto. Уберем пространство внизу блока параметром margin-bottom:-16px.

<html>

<head>

<title>Пример блочной CSS верстки</title> <style type="text/css">

#block {width:740px; height:420px; margin:0 auto; margin-bottom:-16px} div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}

div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}

div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }

div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}

</style>

</head>

<body>

<div class="header"><h1 align="center">Верстка сайта</h1></div> <div id="block">

<h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div>

</div>

</html>

Результат:

Параметр padding:10px прибавляет по 10 пикселей к каждой из сторон, поэтому контейнеру <div id="block"> </div> была задана высота в 420 пикселей, а затем его низ был обрезан на 16 пикселей. Оказывается не так все и сложно. Идем дальше...

Жесткая HTML & CSS верстка таблицами

Пример жесткой CSS верстки сайта с помощью таблицы:

<head>

<title>Пример жесткой CSS верстки с помощью таблицы</title> <style type="text/css">

.header {width:100%; height:60px; background-color:#717dc9; padding:20px; textalign:center}

.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}

.center_col {width:500px; background-color:#ffffff; padding:15px; verticalalign:top}

.right_col {width:120px; background-color:#dddddd; padding:15px; verticalalign:top}

.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; fontsize:13px}

</style>

</head>

<body>

<tr>

<tr>

<td class="center_col">Содержание</td> <td class="right_col">Ссылки</td> </tr>

<tr>

</table>

</body>

Результат:

vertical-align выравнивает содержимое ячейки по верху, применяется только для ячеек.

Резиновая HTML & CSS верстка таблицами

Пример резиновой CSS верстки сайта с помощью таблицы:

<head>

<title>Пример резиновой CSS верстки с помощью таблицы</title> <style type="text/css">

.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}

.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}

.center_col {background-color:#ffffff; padding:15px; vertical-align:top}

.right_col {width:120px; background-color:#dddddd; padding:15px; verticalalign:top}

.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px} </style>

</head>

<body>

<tr>

<td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td>

<td class="right_col">Ссылки</td> </tr>

<tr>

</table>

</body>

Результат:

Сегодня блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов.

Скруглене углов различными способами Скругленные углы в CSS, пример 1:

<title>Скругление углов CSS методами</title>

border: 1px solid #434343; padding: 10px; background: #e3e3e3; border-radius: 10px; width: 500px

}

</style>

</head>

<body>

<div>

Блок будет иметь скругленные углы, если страницу рассматривать в браузерах

Firefox, Chrome. </div>

</body>

Результат:

Скругленные углы в CSS, пример 2:

<title>Углы, скругленные CSS атрибутами</title>

border: 2px solid #434343; padding: 47px; background: #e3e3e3; border-radius: 120px; width: 132px

}

</style>

</head>

<body>

<div>

Блок будет иметь скругленные углы</div> </body>

Результат:

Если вам нужно скруглить только левы углы или только правые углы, или соответственно верхние и нижние, то действительна следующая запись:

·border-radius-bottomleft: 3px – скругление нижнего левого угла радиусом в 3

пикселя .

·border-radius-bottomright: 3px – скругление нижнего правого угла радиусом в 3

пикселя.

Вертикальное выпадающее меню

Код меню

<html>

<head>

padding: 0; margin: 0;

}

/*стили всего блока меню, пунктов и ссылок*/

.vertical-menu { display: block; background: #3D0066;

border: solid 1px #B84DFF; border-radius: 5px; padding: 0;

margin: 0;

width: 200px; /*ширина меню и выпадающих блоков*/

}

.vertical-menu li { position: relative; list-style: none; outline: none; background: #7339BA;

background: -moz-linear-gradient(top, #6323b2 0%, #b685f7 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6323b2), colorstop(100%,#b685f7));

background: -webkit-linear-gradient(top, #6323b2 0%,#b685f7 100%); background: -o-linear-gradient(top, #6323b2 0%,#b685f7 100%); background: -ms-linear-gradient(top, #6323b2 0%,#b685f7 100%); background: linear-gradient(to bottom, #6323b2 0%,#b685f7 100%); border: solid 1px #D6C2FF;

border-radius: 5px; padding: 0; margin: 2px;

/*анимация для пунктов*/

-webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease; -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease; -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease; transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;

}

.vertical-menu li:hover { background: #ccf;

border: solid 1px transparent; border-radius: 5px; box-shadow: inset 0 0 8px #fff; margin: 2px 10px;

}

.vertical-menu a { display: block; text-decoration: none; text-align: left;

font: normal normal 14px Verdana; /*шрифт всех пунктов*/ color: #E6E6FF;

text-shadow: 1px 0 4px #000, 2px 0 7px #d91cd9; box-shadow: none;

padding: 7px; /*регулируем выоту всех кнопок меню*/ margin: 0;

}

.vertical-menu a:hover { color: #3D1F4C;

text-shadow: 1px 0 4px #fff, 2px 0 7px #290052;

}

/*стиль пункта с подменю*/

.drop-link > a { margin: 0;

-webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; transition: margin 0.5s ease;

}

.drop-link > a:hover { margin: 0 0 0 10px;

}

.drop-link:hover {

background: #ccf; /*выделяем ссылку родитель выпадающего блока*/

}

/*стили для уголков*/

.drop-link:after,

.drop-link:before { content: ''; position: absolute; right: 0;

top: 0; padding: 0; margin: 0;

}

.drop-link:before { border: solid 14px;

border-color: #D6ADFF transparent transparent transparent; margin: 0 12px 0 0;

}

.drop-link:after { border: solid 10px;

border-color: #4C1A80 transparent transparent transparent; margin: 0 15px 0 0;

}

.drop-link:hover:before { border: solid 16px;

border-color: transparent #6323b2 transparent transparent;

Смотрите также файлы

Лабораторна робота №21.doc

Лабораторна робота №1.doc

Лабораторна робота №21.pdf

Домашнє завдання CSS+FP.doc

04 Л_р_к Робота з обєктами Active Directory.doc

Файл: Лабораторна робота №16.pdf

Лабораторная работа №16

Верстка страниц с помощью CSS

Резиновая HTML & CSS верстка блоками

Смотрите также файлы

Информация

Списки файлов

Дополнительно