|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
04.01.2012, 07:34 | #1 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
блоки css
здравствуйте, не как не получается заверстать блоками,
пример как должно быть во вкладке. изображения могут быть любыми. заранее спасибо. |
04.01.2012, 11:59 | #2 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
почти первую часть сделал только не получается сделать так чтоб 3 блока были под одним .:
Код HTML Код HTML:
<html> <head> <link rel="stylesheet" type="text/css" href="style1.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="body"> Collections of the week </div> <div id="wrapper"> </div> <div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div> </div> </body> </html> Код CSS: Код HTML:
#body{ padding:0; margin:30; font:bold 25px Verdana, Times New Roman; /*свойства шрифта*/ color:green; /*цвет текста*/ /*центрирование текста по-центру*/ } #wrapper { width:330px; /*ширина блока*/ padding:10px; /*внутренние отступы с четырёх сторон равны 10px*/ border:1px solid #a4ce60; /*граница блока, бордюр*/ height:300px; /*фиксированная высота блока*/ margin:50px 0px 5px 0; /*внешние отступы блока, в данном случае сверху и снизу*/ text-align:center; background:#bdda7e; /*цвет фона*/ } #header { width:100px; /*ширина блока*/ padding:10px; /*внутренние отступы с четырёх сторон равны 10px*/ border:1px solid #a4ce60; /*граница блока, бордюр*/ height:100px; /*фиксированная высота блока*/ margin:10px 0 5px 0; /*внешние отступы блока, в данном случае сверху и снизу*/ background:#bdda7e; /*цвет фона*/ line-height:100px; /*расстояние между строк*/ } #content { width:100px; border:1px solid #d2d2d2; background:#e6e6e6; margin:0 0 5px 0; padding:10px; height:100px; line-height:50px; } #footer { width:100px; border:1px solid #bed63a; background:#e1edbf; margin:0 0 10px 0; padding:10px; height:100px; } |
04.01.2012, 13:48 | #3 |
Форумчанин
Регистрация: 06.12.2010
Сообщений: 117
|
что в итоге получилось, осталось только добить картинками. тень: box-shadow: 0px 0px 10px #000;
test.html: Код HTML:
<html> <head> <link rel="stylesheet" type="text/css" href="style1.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="body"> Collections of the week </div> <div id="wrapper"> wrapper </div> <div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div> <div id="wrapper1"> wrapper1 </div> <div id="header1"> Header1 </div> <div id="content1"> Content1 </div> <div id="footer1"> Footer1 </div> <div id="wrapper2"> wrapper2 </div> <div id="header2"> Header2 </div> <div id="content2"> Content2 </div> <div id="footer2"> Footer2 </div> <div id="wrapper3"> wrapper3 </div> <div id="header3"> Header3 </div> <div id="content3"> Content3 </div> <div id="footer3"> Footer3 </div> </body> </html> Код HTML:
#body{ padding:0; margin:30; font:bold 35px Verdana, Times New Roman; color:green; } #wrapper { width:210px; padding:10px; border:1px solid #a4ce60; height:150px; text-align:center; background:#bdda7e; position:absolute; top: 330px; left: 20px; } #header { width:50px; padding:10px; border:1px solid #a4ce60; height:40px; background:#bdda7e; line-height:100px; position:absolute; top: 515px; left: 20px; } #content { width:50px; border:1px solid #d2d2d2; background:#e6e6e6; padding:10px; height:40px; line-height:50px; position:absolute; top: 515px; left: 100px; } #footer { width:50px; border:1px solid #bed63a; background:#e1edbf; padding:10px; height:40px; position:absolute; top: 515px; left: 180px; } #name { font:bold 35px Verdana, Times New Roman; color:green; text-align: left; } #wrapper1 { width:210px; padding:10px; border:1px solid #a4ce60; height:150px; text-align:center; background:#bdda7e; position:absolute; top: 330px; left: 270px; } #header1 { width:50px; padding:10px; border:1px solid #a4ce60; height:40px; background:#bdda7e; line-height:100px; position:absolute; top: 515px; left: 270px; } #content1 { width:50px; border:1px solid #d2d2d2; background:#e6e6e6; padding:10px; height:40px; line-height:50px; position:absolute; top: 515px; left: 350px; } #footer1 { width:50px; border:1px solid #bed63a; background:#e1edbf; padding:10px; height:40px; position:absolute; top: 515px; left: 430px; } #wrapper2 { width:210px; padding:10px; border:1px solid #a4ce60; height:150px; text-align:center; background:#bdda7e; position:absolute; top: 330px; left: 520px; } #header2 { width:50px; padding:10px; border:1px solid #a4ce60; height:40px; background:#bdda7e; line-height:100px; position:absolute; top: 515px; left: 520px; } #content2 { width:50px; border:1px solid #d2d2d2; background:#e6e6e6; padding:10px; height:40px; line-height:50px; position:absolute; top: 515px; left: 600px; } #footer2 { width:50px; border:1px solid #bed63a; background:#e1edbf; padding:10px; height:40px; position:absolute; top: 515px; left: 680px; } #wrapper3 { width:210px; padding:10px; border:1px solid #a4ce60; height:150px; text-align:center; background:#bdda7e; position:absolute; top: 330px; left: 770px; } #header3 { width:50px; padding:10px; border:1px solid #a4ce60; height:40px; background:#bdda7e; line-height:100px; position:absolute; top: 515px; left: 770px; } #content3 { width:50px; border:1px solid #d2d2d2; background:#e6e6e6; padding:10px; height:40px; line-height:50px; position:absolute; top: 515px; left: 850px; } #footer3 { width:50px; border:1px solid #bed63a; background:#e1edbf; padding:10px; height:40px; position:absolute; top: 515px; left: 930px; } Последний раз редактировалось Ast; 04.01.2012 в 14:31. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как верстать блоки? | Aleskandr | HTML и CSS | 3 | 23.12.2011 18:06 |
Блоки в CSS | WindWdM | Помощь студентам | 0 | 24.11.2011 15:03 |
Сайт сделан полностью на css и призаливке его на сервер никакие блоки не отображаются? Что делать? | bombombom | HTML и CSS | 3 | 20.07.2009 22:01 |