Киприот
Member
- Регистрация
- 29.06.2013
- Сообщения
- 12
Здравствуйте, уважаемые форумчане! Я сверстал главную страницу сайта и прошу вас указать на мои ошибки и оценить вообще мой уровень как верстальщика. Я понимаю что до идеальной верстки мне далеко, но на сколько далеко не знаю. Это моя пятая работа с блочной версткой и CSS.
Интересно, можно ли мне претендовать на вакансию верстальщика, пусть даже самую низкооплачиваемую для начала? Или еще посоветуете нарабатывать опыт?
Большое спасибо всем откликнувшимся!
index.html
style.css
Интересно, можно ли мне претендовать на вакансию верстальщика, пусть даже самую низкооплачиваемую для начала? Или еще посоветуете нарабатывать опыт?
Большое спасибо всем откликнувшимся!
index.html
Код:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Название сайта</title>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="header_content">
<form id="search">
<input type="text" class="find" />
<a href="#"><div id="search_button"></div></a>
</form>
<div id="phone">+00 (000) 000-00-00</div>
<div id="skype">
<img src="images/skype.png" alt="skype"/>
<div id="skype_cont">xxxxxxx</div>
</div>
<div id="icq">
<img src="images/icq.png" alt="icq" />
<div id="icq_cont">000-000-000</div>
</div>
</div>
</div>
<div id="top"></div>
<div id="middle">
<div id="nav">
<a href="#" class="nav_link"><span class="but">Пункт меню 1</span></a>
<a href="#" class="nav_link"><span class="but">Пункт меню 2</span></a>
<a href="#" class="nav_link"><span class="but">Пункт меню 3</span></a>
<a href="#" class="nav_link"><span class="but">Пункт меню 4</span></a>
<a href="#" class="nav_link"><span class="but">Пункт меню 5</span></a>
<a href="#" class="nav_link"><span class="but">Пункт меню 6</span></a>
</div>
<div id="logo"></div>
<div id="slider">
<img alt="" src="images/slider/11.jpg" />
<img alt="" src="images/slider/21.jpg" />
<img alt="" src="images/slider/31.jpg" />
<img alt="" src="images/slider/41.jpg" />
<img alt="" src="images/slider/51.jpg" />
<img alt="" src="images/slider/61.jpg" />
</div>
<div id="content">
<div id="left">
<a href="#" class="nav2_link"><div class="nav2">Ссылка 1</div></a>
<a href="#" class="nav2_link"><div class="nav2">Ссылка 2</div></a>
<a href="#" class="nav2_link"><div class="nav2">Ссылка 3</div></a>
<a href="#" class="nav2_link"><div class="nav2">Ссылка 4</div></a>
</div>
<div id="right">
<div id="new"></div>
<div id="new2"></div>
<div id="product_line_1">
<div class="product">
<img src="images/products/1.jpg" alt="" />
<div class="buy">
Цена: <span class="price">1000 $</span>
<a href="#" class="button"><img src="images/button.png" alt="" /></a>
</div>
</div>
<div class="product">
<img src="images/products/2.jpg" alt="" />
<div class="buy">
Цена: <span class="price">1000 $</span>
<a href="#" class="button"><img src="images/button.png" alt="" /></a>
</div>
</div>
<div class="product">
<img src="images/products/3.jpg" alt="" />
<div class="buy">
Цена: <span class="price">1000 $</span>
<a href="#" class="button"><img src="images/button.png" alt="" /></a>
</div>
</div>
<div class="clear"></div>
</div>
<div id="product_line_2">
<div class="product">
<img src="images/products/4.jpg" alt="" />
<div class="buy">
Цена: <span class="price">1000 $</span>
<a href="#" class="button"><img src="images/button.png" alt="" /></a>
</div>
</div>
<div class="product">
<img src="images/products/5.jpg" alt="" />
<div class="buy">
Цена: <span class="price">1000 $</span>
<a href="#" class="button"><img src="images/button.png" alt="" /></a>
</div>
</div>
<div class="product">
<img src="images/products/6.jpg" alt="" />
<div class="buy">
Цена: <span class="price">1000 $</span>
<a href="#" class="button"><img src="images/button.png" alt="" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="bottom">
<div id="content_footer">
<a href="#" class="footer_link"><span class="but2">Ссылка 1</span></a>
<a href="#" class="footer_link"><span class="but2">Ссылка 2</span></a>
<a href="#" class="footer_link"><span class="but2">Ссылка 3</span></a>
<a href="#" class="footer_link"><span class="but2">Ссылка 4</span></a>
<a href="#" class="footer_link"><span class="but2">Ссылка 5</span></a>
<a href="#" class="footer_link"><span class="but2">Ссылка 6</span></a>
<span id="copy">xxxxxxx © 2013</span>
<a href="#" title="Разработка сайтов" target="_blank"><div id="devel"></div></a>
</div>
<div id="networks">
<a href="#" target="_blank"><img src="images/vc.png" alt="Вконтакте" /></a>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Код:
body, html{
background-image: url(images/fon.jpg);
margin: 0px;
text-align: center;
height: 100%;
}
#container{
min-height: 100%;
margin-bottom: -178px;
position: relative;
z-index: 1;
}
#header{
width: 100%;
height: 177px;
background-image: url(images/header.jpg);
position: relative;
margin: 0;
}
#header_content{
left: -512px;
margin: 0 50%;
}
#top{
width: 1024px;
height: 29px;
background-image: url(images/top.png);
position: relative;
left: -512px;
margin: -100px 50%;
}
#middle{
width: 1024px;
height: auto;
min-height: 680px;
background-image: url(images/middle.png);
position: relative;
left: -512px;
margin: 100px 50%;
}
#bottom{
width: 1024px;
height: 16px;
background-image: url(images/bottom.png);
position: absolute;
left: -512px;
margin: -100px 50%;
}
#footer{
width: 100%;
height: 177px;
background-image: url(images/footer.jpg);
position: absolute;
margin: -20px 0;
clear: both;
}
.buy{
margin: 10px 0px;
}
#nav{
font-family: "courier new", arial, sans-serif;
font-weight: bold;
font-size: 20px;
margin: 50px 2px 0;
position: relative;
width: 1000px;
}
.but{
padding: 0px 15px;
}
.but2{
margin: 10px 8px;
}
#slides{
width: 1024px;
height: 246px;
background-image: url(images/1.jpg);
margin-top: 20px;
}
#content_footer{
width: 100%;
position: absolute;
left: -512px;
margin: 18px 50%;
font-family: Regular, arial, sans-serif;
font-size: 15px;
}
#content{
margin: 30px 0px;
}
#left{
width: 255px;
margin: -30px 38px;
text-align: left;
float: left;
}
.nav2{
margin-top: 30px;
font-family: Calibri, arial, sans-serif;
font-size: 20px;
font-weight: bold;
}
#right{
text-align: left;
}
.clear{
clear: both;
}
.product{
margin: 0 10px 20px 0;
float: left;
color: #3a312a;
font-size: 18px;
}
.price{
font-weight: bold;
padding-right: 10px;
}
img{
border: 0;
}
.button{
position: absolute;
}
#product_line_1{
margin: 30px 0 0 0;
}
#product_line_2{
margin-left: 331px;
}
#networks{
position: absolute;
margin: -20px 10px;
}
#new{
width: 79px;
height: 87px;
background-image: url(images/new.png);
position: absolute;
margin: -8px 327px;
}
#new2{
width: 79px;
height: 87px;
background-image: url(images/new.png);
position: absolute;
margin: 314px 543px;
}
#search{
position: absolute;
left: -512px;
margin: 25px 50%;
}
#copy{
width: 150px;
color: #ffffff;
margin: 12px 450px;
float: left;
}
.dew{
width: 300px;
margin: 30px -15px;
position: absolute;
font-size: inherit;
}
#devel{
width: 32px;
height: 38px;
background-image: url(images/devel.png);
position: absolute;
margin: -10px 985px;
}
#devel:hover{
width: 51px;
height: 50px;
background: url(images/devell.png) no-repeat;
position: absolute;
margin: -17px 975px;
}
input.find{
width: 270px;
height: 20px;
line-height: 19px;
border:2px outset #89786e;
background-image: url(images/fon.jpg);
}
#search_button{
position: absolute;
margin: -28px 280px;
width: 35px;
height: 31px;
background-image: url(images/search.png);
}
#phone{
font-family: "Simplified Arabic", arial, sans-serif;
font-size: 23px;
font-weight: bold;
position: absolute;
margin: 18px -140px;
width: 280px;
color: #ffffff;
text-shadow: 2px 2px 2px black, 0 0 1em #ffffff;
}
#skype{
margin: 26px 200px;
width: 150px;
position: absolute;
font-family: "Simplified Arabic", arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-shadow: 2px 2px 2px #000000;
z-index: 1;
}
#icq{
margin: 26px 310px;
width: 150px;
position: absolute;
font-family: "Simplified Arabic", arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-shadow: 2px 2px 2px #000000;
}
#skype_cont{
margin: -38px 90px;
}
#icq_cont{
margin: -38px 68px;
width: 150px;
}
#logo{
width: 316px;
height: 291px;
background-image: url(images/logo.png);
position: absolute;
margin: 91px 131px;
z-index: 100;
}
/* Стили ссылок */
a.nav_link:link{color: #3a312a; text-decoration: none;}
a.nav_link:visited{color: #3a312a; text-decoration: none;}
a.nav_link:hover{color: #ffffff; text-decoration: none;}
a.nav_link:activ{color: #3a312a; text-decoration: none;}
a.nav2_link:link{color: #3a312a; text-decoration: none;}
a.nav2_link:visited{color: #3a312a; text-decoration: none;}
a.nav2_link:hover{color: #ffffff; text-decoration: none;}
a.nav2_link:activ{color: #3a312a; text-decoration: none;}
a.footer_link:link{color: #ffffff; text-decoration: none;}
a.footer_link:visited{color: #ffffff; text-decoration: none;}
a.footer_link:hover{color: #ffffff; text-decoration: underline;}
a.footer_link:activ{color: #ffffff; text-decoration: none;}
