КАТЕГОРИИ: Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748) |
Параметри позиціонування в CSS
Параметр 'bottom' Цей параметр визначає нижній край елементу. Примечание: Якщо параметр "position" має значення "static", параметр "bottom" не робить впливу. Приклади: 1. У прикладі показано, як задати нижній край елементу pre на 50 px вище за нижній край вікна: 2. pre 3. { 4. position: absolute; 5. bottom: 50px } 6. У прикладі показано, як задати нижній край елементу pre на 50 px нижче нижнього краю вікна: 7. pre 8. { 9. position: absolute; 10. bottom: - 50px } Може набувати наступних значень:
Параметр 'clip' Цей параметр задає форму елементу. У ситуації якщо, наприклад, зображення більш того елементу в якому розташовується, параметр дозволяє визначити розміри зображення, обрізувати за формою і вивести. Примітка: Цей параметр не можна використати для елементів з параметром "overflow", заданим як "visible". Спадкоємство: немає. Приклад: p { position: absolute; clip: rect(2px 175px 100px 0px) } Може набувати наступних значень:
Параметр 'left' Цей параметр визначає лівий край елементу. Примітка: Якщо параметр "position" має значення "static", параметр "left" не робить впливу. Спадкоємство: немає. Приклади: 1. У прикладі показано, як задати лівий край елементу pre в 50 px праворуч від лівого краю вікна: 2. pre 3. { 4. position: absolute; 5. left: 50px } 6. У прикладі показано, як задати лівий край елементу pre в 50 px зліва від лівого краю вікна:
7. pre 8. { 9. position: absolute; 10. left: - 50px } Може набувати наступних значень:
Параметр 'overflow' Цей параметр визначає, що відбувається, коли вміст елементу переповнює його область. Спадкоємство: немає. Приклад: div { overflow: auto } Може набувати наступних значень:
Параметр 'position' Цей параметр поміщає елемент в статичне, відносне, абсолютне або фіксоване положення. Спадкоємство: немає. Приклад: p { position: static; } Може набувати наступних значень:
Параметр 'right' Цей параметр визначає правий край елементу. Примітка: Якщо параметр "position" має значення "static", то параметр "right" не робить впливу. Спадкоємство: немає. Приклади: 1. У прикладі показано, як задати правий край елементу pre на 50 px ліворуч від правого краю вікна:
2. pre 3. { 4. position: absolute; 5. right: 50px } 6. У прикладі показано, як задати праве поле елементу pre на 50 px вправо від правого краю вікна: 7. pre 8. { 9. position: absolute; 10. right: - 50px } Може набувати наступних значень:
Параметр 'top' Цей параметр визначає верхній край елементу. Примітка: Якщо параметр "position" має значення "static", то параметр "top" не робить впливу. Спадкоємство: немає. Приклади: 1. У прикладі показано, як задати верхній край елементу pre на 50 px нижче верхнього краю вікна: 2. pre 3. { 4. position: absolute; 5. top: 50px } 6. У прикладі показано, як задати верхній край елементу pre на 50 px вище за верхній край вікна: 7. pre 8. { 9. position: absolute; 10. top: - 50px } Може набувати наступних значень:
Параметр 'vertical - align' Цей параметр задає вертикальне вирівнювання елементу. Спадкоємство: немає. Приклади: img { vertical - align: baseline } Може набувати наступних значень:
Параметр 'z - index' Цей параметр задає порядковий номер елементу в стеку. Елемент з великим порядковим номером стека завжди знаходиться перед елементом з меншим порядковим номером стека.
Примітки: 1. Елементи можуть мати негативні порядкові номери стека. 2. Z - index працює тільки з тими елементами, які позиціонувалися не як static(наприклад, position: absolute;)! Спадкоємство: немає. Приклад: img { position: absolute z - index: 1 } Може набувати наступних значень:
Верстка горизонтальними шарами Розглянемо поетапний процес верстання Веб-сторінки відобразивши її стан на першому та останньому етапах. Як засоби горизонтального верстання використаємо властивості ширини – width, висоти - height, фонового кольору - background-color. Підбір кольорів можна здійснювати на основі зразкових Веб-сторінок за допомогою програмного засобу pixie. Вертикальну розбивку здійснюємо за допомогою властивостей обтікання – float, її заборони – clear та роздільників - border-right, border-left. При цьому підбираючи значення висоти стовпчик можна розбивати на під блоки із можливістю їх виходу за межі блоку при заданні від’ємних значень меж (margin). Розташовувати сторінку по ширині екрану можна за рахунок відсутності жорсткого вказання ширини блоку. Цим процесом керують за допомогою властивостей min-width та max-width. Поетапне верстання сторінки розпочнемо із формування фону: div#block {width:750px; margin:0 auto; background-color:#dddddd} Тепер наповнимо фоновий блок верхнім, середнім та нижнім підблоками. div.header {width:750px; height:100px; background-color:#717dc9} Верстка стовпчиками Вертикальна розбивка шарів здійснюється за допомогою параметру обтікання одного блоку іншим, зокрема властивість float:left забезпечує обтікання зліва, а властивість clear:both забезпечує заборону обтікання з обох сторін.
div.left_col {width:148px; height:350px; float:left} Доповнимо горизонтальні блоки роздільниками за допомогою атрибутів border-right та border-left в параметрах яких задамо товщину лінії тип-пунктир (dashed) та колір. div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px} Підблоки можна розбивати на менші частини. При цьому від’ємне значення меж (margin) дозволяє робити виступи в компонуванні блоків.В результаті отримуємо наступний підсумковий код: <html> Остаточний вид сторінки Гнучна верстка сторінки Жорстка верстка сайту не дозволяє адаптувати ширини сторінки до ширини екрану дисплея. Це приводить до неекономного використання площі екрану. Для гнучкої верстки В кожному горизонтальному шарі хоча б один блок має нефіксовану ширину. Таку гнучкість рекомендується обмежувати атрибутами min-width та max-width, оскільки вид сайту може руйнуватися при довільних змінах ширини. Для відступу тексту від лівого краю блоку використовується атрибут padding-left: div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
<style type="text/css"> .s {position:relative;width:350px;height:240px;top:20px;left:90px;overflow:hidden;} .s small {float:left;overflow:hidden;width:200px;height:70px;background:#ffe;} .s b {float:left;padding:3px 0 3px 20px;overflow:hidden;width:200px;margin:-1px;} .sa {border:red 1px solid;} .sb {border:green 1px solid;margin:-12px 0 0 50px;} .sc {border:blue 1px solid;color:blue;margin:-12px 0 0 100px;} .sd {margin:23px 10px 0;} .sa b {border:red 1px solid;background:#fde;} .sb b {border:green 1px solid;background:#dfe;} .sc b {border:blue 1px solid;background:#def;} .sa,.sa a,b {color:red;} .sb,.sb a,b {color:green;} .sc,.sc a,b {color:blue;} small {color:gray;} </style>
<h1>Наложение DIV-блоков</h1> <div class="s"> <small class="sa"> <b><a >Заголовок 1</a></b> <div class="sd"><a >Текст 1</a></div> </small>
<small class="sb"> <b><a >Заголовок 2</a></b> <div class="sd"><a >Текст 2</a></div> </small>
<small class="sc"> <b><a >Заголовок 3</a></b> <div class="sd"><a >Текст 3</a></div> </small> </div>
Дата добавления: 2013-12-12; Просмотров: 801; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |