|
|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail | |||||||
| Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
||||
 |
|
|
Опции темы | Поиск в этой теме |
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 |
