Легенький макет поверстать для "зеленого" новичка

art-ajn · June 16, 2013

Подскажите где найти или скиньке кто-то легенькие макеты для "зеленого" новичка поверстать. Я только начал изучать верстку и еще не чего толкового не верстал. Очень уж хочется все это осилить)))

mrnobody · June 16, 2013

http://divhack.com/

June 16, 2013

http://zalil.ru/34585720 сначало мой Edited June 16, 2013 by 121990

art-ajn · June 16, 2013

Пасиб всем )))

http://zalil.ru/34585720 сначало мой

Этот уж слишком простенький )))

June 16, 2013

Этот уж слишком простенький )))

Для тебя зеленого ничего простого нет!

art-ajn · June 16, 2013

Этот уж слишком простенький )))
Для тебя зеленого ничего простого нет!

Ну такое я уже верстал))) Хочется что-то немного потруднее)))

June 16, 2013

Закинь на любой бесплатный хостинг верстку. Посмотрим как ты это сверстал. Только тему новую не создавай.

art-ajn · June 16, 2013

Закинь на любой бесплатный хостинг верстку. Посмотрим как ты это сверстал. Только тему новую не создавай.

Я закину то что верстал, подобное. ОК)))

Я вот только не знаю как закидывать???

June 16, 2013

Ладно, давай до свидания)))

art-ajn · June 16, 2013

Вот подобное что верстал))

Вот код html

<head>

</head>

<body>

<div id="dnepr1"><a href="http://www.skyscrapercity.com/showthread.php?t=832666&page=3" target="*blank">Panoramu</a></div>

<div id="dnepr2">Dnepr2</div>

<div id="dnepr3"> «Перекресток» состоит из 2-х объединенных зданий:

- 20-ти этажное здание (включает в себя два торговых этажа, 3-4 этажи - «лаунж» зона, с 5-го по 20-й - офисные помещения класса «А»);

- 5-ти этажное здание с цокольным этажом (цоколь, 1 и 2 этажи - торговые площади, 3-4 этажи - объединенное двухсветное пространство для «сухого фитнеса», 5-й этаж - офисные помещения класса «А»).

Здание будет оснащено самыми современными инженерными и технологическими системами:

автономная централизованная система отопления;

централизованная система кондиционирования и вентиляции;

два скоростных лифта фирмы «Thyssen Krupp»;

система охранной сигнализации и видеонаблюдения;

выделенные линии Интернет и телекоммуникаций;

качественный сервис службы «property-менеджмент». </div>

<div id="dnepr4">DNEPR 4</div>

<div id="dnepr6"> DNEPR 6</div>

</body>

</html>

CSS

body{background-color:#FFE4C4}

#dnepr1{float:left; margin-top:5px; background:red; padding:10px; width:100px;height:325px;}

#dnepr2{float:right; margin-top:5px; background:blue; padding:10px; width:100px; height:325px;}

#dnepr3{margin:15 125 5 125px; background:green; padding:5px; height:300px;}

#dnepr4{float:left; margin:0 1 5 5px; background:gold; padding:10px; width:355px;}

#dnepr5{clear:both; margin:5 5 5 5px; background:yellow; padding:10px; width:970px;}

#dnepr6{float:right;margin:0 5 5 1px; background:red; padding:10px; width:355px;}

swandev · June 16, 2013

http://g.zeos.in/?q=free%20psd%20website%20templates

art-ajn · June 17, 2013

http://g.zeos.in/?q=...bsite templates

Пасиб))) Извиняйте что всех напрягаю очень еще просто не освоился в этом.

art-ajn · June 17, 2013

Закинь на любой бесплатный хостинг верстку. Посмотрим как ты это сверстал. Только тему новую не создавай.

Сделал я тот макет что ты скидывал

HTML

<head>

</head>

<body>

<div id="banner">Banner</div>

</body>

</html>

CSS

body{background-color:#FFE4C4}

#banner{background:red; width:990px; height:70px;}

#M1{float:left; margin-top:5px; background:red; padding:10px; width:100px;height:325px;}

#M2{float:right; margin-top:5px; background:blue; padding:10px; width:100px; height:325px;}

#M3{ margin: 5 125 5 125; background:green; padding:5px; height:335px; }

#flop{background:black; width:990px; height:70px;}

Правильно я делал или что-то не так???

swandev · June 17, 2013


<head>
<link rel="stylesheet" type="text/css" href="style 1.css"/>
</head>
<div id="banner">Banner</div>
<div id="M1">Menu</div>
<div id="M2">Menu</div>
<div id="M3">text</div>
<div id="flop">flop</div>

Правильно я делал или что-то не так???

Добавь между head


<meta charset="utf-8">

Достаточно этого


<link rel="stylesheet" href="style 1.css">

В данном случае id не нужны, лучше заменить на классы.

Edited June 17, 2013 by ALEEX SWN

art-ajn · June 17, 2013

<head>
<link rel="stylesheet" type="text/css" href="style 1.css"/>
</head>
<div id="banner">Banner</div>
<div id="M1">Menu</div>
<div id="M2">Menu</div>
<div id="M3">text</div>
<div id="flop">flop</div>
Правильно я делал или что-то не так???
Добавь между head
<meta charset="utf-8">
Достаточно этого
<link rel="stylesheet" href="style 1.css">
В данном случае id не нужны, лучше заменить на классы.

когда я добавляю вот это


<meta charset="utf-8">

то у меня весь текст в знаках вопроса(( в чем причина???

Спасибо за подсказку на счет классов)))

swandev · June 17, 2013

когда я добавляю вот это
<meta charset="utf-8">
то у меня весь текст в знаках вопроса(( в чем причина???

ммм, у меня все хорошо. Может в браузере кодировка сбилась? Или в самой ОС..

Edited June 17, 2013 by ALEEX SWN

art-ajn · June 17, 2013

когда я добавляю вот это
<meta charset="utf-8">
то у меня весь текст в знаках вопроса(( в чем причина???
ммм, у меня все хорошо. Может в браузере кодировка сбилась? Или в самой ОС..

А какая должна кодировка стоять в браузере ???

Int · June 17, 2013

А какая должна кодировка стоять в браузере ???

Браузер ставит ту кодировку, которую укажешь в <meta>, а вот у самого файла тоже должна быть эта кодировка.

art-ajn · June 17, 2013

А какая должна кодировка стоять в браузере ???
Браузер ставит ту кодировку, которую укажешь в <meta>, а вот у самого файла тоже должна быть эта кодировка.

А где это посмотреть???

swandev · June 17, 2013

А какая должна кодировка стоять в браузере ???
Браузер ставит ту кодировку, которую укажешь в <meta>, а вот у самого файла тоже должна быть эта кодировка.
А где это посмотреть???

открой файл в каком нибудь блокноте и сохрани с выбором кодировки

art-ajn · June 17, 2013

А какая должна кодировка стоять в браузере ???
Браузер ставит ту кодировку, которую укажешь в <meta>, а вот у самого файла тоже должна быть эта кодировка.
А где это посмотреть???
открой файл в каком нибудь блокноте и сохрани с выбором кодировки

Огромное псиб ))))))))))

Daiver · June 17, 2013

Вот тут есть макеты с решениями. Верстаешь макет сам, потом сравниваешь свой результат с примером.

art-ajn · June 17, 2013

Вот тут есть макеты с решениями. Верстаешь макет сам, потом сравниваешь свой результат с примером.

пасиб )))

art-ajn · July 29, 2013

Вот сверстал макетик тот что мне скидывали )))

Верстал вот этот макет

Скажите что правильно, а что нет ???

HTML

<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

<div id="header">
<div id="logo"><a href=""><img src="img/logo.gif";/></a>

</div>

<div id="polosa">
<div>

<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Become a member</a></li>
<li><a href="">Partners</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contacts</a></li>
</ul>
</div><!——--gor menu————>
</div><!——--polosa————-->
</div>

<div id="content">
<h1>Heading</h1>
<div id="text"><img src="img/text.gif"/>

</div>

</div>

</div>

<div id="footer"><img src="img/logo-futer.gif"/>

</div>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22>"]http://www.w3.org/TR...l1-strict.dtd">[/url]
CSS

margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-color:#FFF;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

/* Header
—————————————————————————--*/
#header {
height: 150px;
background: #FFF;
}

/* Middle
—————————————————————————--*/
#content {
margin-top:-30px;

}

#content h1 {
padding-left:40px;
padding-top:1px;
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
color:#b8b8b8;
}

/* Footer
—————————————————————————--*/
#footer {
width: 960px;
margin: 15px auto 0;
height: 50px;
position: relative;
}

/*———————————--moe————————————--*/

#logo {
width:37px;
margin:10px;
}

#polosa{
with:960px;
height:42px;
background-image:url(img/polosa.gif);
}

#polosa li {
display:inline;
margin-right:20px;
padding-left:55px;
font-size:15px;

}

#polosa ul {
margin-left:20px;
padding-top:10px;
}

#polosa a {
color:#FFF;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#text {
width:774px;
height:395px;
padding-top:20px;
padding-left:40px;

}
* {

Int · July 30, 2013

Ну зачем же ты тут-то разместил? Закинь хотя бы на codepen.io или jsfiddle.net

swandev · July 30, 2013

Вот сверстал макетик тот что мне скидывали )))
Верстал вот этот макет
Скажите что правильно, а что нет ???
HTML

<html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

<div id="header">
<div id="logo"><a href=""><img src="img/logo.gif";/></a>

</div>

<div id="polosa">
<div>

<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Become a member</a></li>
<li><a href="">Partners</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contacts</a></li>
</ul>
</div><!——--gor menu————>
</div><!——--polosa————-->
</div>

<div id="content">
<h1>Heading</h1>
<div id="text"><img src="img/text.gif"/>

</div>

</div>

</div>

<div id="footer"><img src="img/logo-futer.gif"/>

</div>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22>"]http://www.w3.org/TR...l1-strict.dtd">[/url]
CSS

margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-color:#FFF;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

/* Header
—————————————————————————--*/
#header {
height: 150px;
background: #FFF;
}

/* Middle
—————————————————————————--*/
#content {
margin-top:-30px;

}

#content h1 {
padding-left:40px;
padding-top:1px;
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
color:#b8b8b8;
}

/* Footer
—————————————————————————--*/
#footer {
width: 960px;
margin: 15px auto 0;
height: 50px;
position: relative;
}

/*———————————--moe————————————--*/

#logo {
width:37px;
margin:10px;
}

#polosa{
with:960px;
height:42px;
background-image:url(img/polosa.gif);
}

#polosa li {
display:inline;
margin-right:20px;
padding-left:55px;
font-size:15px;

}

#polosa ul {
margin-left:20px;
padding-top:10px;
}

#polosa a {
color:#FFF;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#text {
width:774px;
height:395px;
padding-top:20px;
padding-left:40px;

}
* {

Раз уж верстаете, то найдите себе бесплатный хостинг и выкладывайте все там. Я например при просмотре кода пользуюсь "инструментами разработчика"

1. Доктайп делайте таким

<!doctype html>

2. id не нужны

3.


id="text"

Это что такое?)

css Не смотрел, проще будет когда выложите на хостинг

Edited July 30, 2013 by ALEEX SWN

Sign In

Легенький макет поверстать для "зеленого" новичка

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information