- •Макет сайта Изобразим самый стандартный макет двухколоночного сайта.
- •Итак, как же будет выглядеть html и css-код для данного макета:
- •Д.З: Наполнить этот макет объектами и текстом. Поиграйтесь с позиционированием и прозрачностью элементов. Css-шпаргалка в помощь! а также к следующему занятию (03.10) сделать трёхколоночный макет.
- •Html и css-код для данного макета:
- •Ниже, всё что выделено цветом – это еще один пример создания двухколоночного макета. Обсудим на следующем занятии. И материал, который идёт далее также для следующего занятия.
- •Перейдём к css-файлу.
- •Позиционирование элементов
- •Статическое позиционирование
- •Фиксированное позиционирование
- •Относительное позиционирование
- •Абсолютное позиционирование
- •Перекрывание элементов
- •Горизонтальное меню
- •Горизонтальное меню с выпадающим списком
Макет сайта Изобразим самый стандартный макет двухколоночного сайта.
header |
|
mainmenu |
|
leftmenu |
content |
footer |
|
Итак, как же будет выглядеть html и css-код для данного макета:
HTML |
CSS |
<html> <head> <title>макет</title> <meta charset=utf-8> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="header"></div> <div class="mainmenu"></div> <div class="conteiner"> <div class="leftmenu"></div> <div class="content"></div> </div> <div class="footer"></div> </div> </body> </html> |
body{ margin:0; padding:0; } .wrapper{ margin:0 auto; width:960px; background-color:…; } .header{ height:150px; background-color:…; } .mainmenu{ height:40px; background-color:…; } .conteiner{ height:700px; background-color:…; } .leftmenu{ float:left; width:300px; height:700px; background-color:…; } .content{ float:right; width:660px; height:700px; background-color:…; } .footer{ height:100px; background-color:…; } |
Д.З: Наполнить этот макет объектами и текстом. Поиграйтесь с позиционированием и прозрачностью элементов. Css-шпаргалка в помощь! а также к следующему занятию (03.10) сделать трёхколоночный макет.
header |
||
mainmenu |
||
leftbar |
content |
rightbar |
footer |
||
Html и css-код для данного макета:
HTML |
CSS |
<html> <head> <title>макет</title> <meta charset=utf-8> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="header"></div> <div class="mainmenu"></div> <div class="conteiner"> <div class="leftbar"></div> <div class="rightbar"></div> <div class="content"></div> </div> <div class="footer"></div> </div> </body> </html> |
body{ margin:0; padding:0; } .wrapper{ margin:0 auto; width:960px; background-color:…; } .header{ height:150px; background-color:…; } .mainmenu{ height:40px; background-color:…; } .conteiner{ height:700px; background-color:…; } .leftbar{ float:left; width:300px; height:700px; background-color:…; } .rightbar{ float:right; width:300px; height:700px; background-color:…; } .content{ margin-left:300px; margin-right:300px; height:700px; background-color:…; } .footer{ height:100px; background-color:…; } |