@Kostylev2021

Насколько плохо я верстаю?

Верстаю в первые макет psd
Не учитывайте черный фон вместо картинки .
Насколько плохо я это делаю и что не правильно ?
Текст по середине почему то немного ниже расположен .Хотя вроде должен быть расположен одинаково по высоте.
Сам макет https //camouf.ru/designes/ready-psd-layouts-for-saito/7836.html
<!doctype html>
<html>
<head>
     <meta charset="UTF-8">
	 <link rel="stylesheet" href="style.css">
	 
</head>
    <body>
     <div class="wrap" > 
	   <div class="logo"> 
	   <p>Your Logo</p>   
	   </div>
	   <div class="menu">
	 <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Servicing</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>

</ul>
	   </div>
	   <div class="clear">
	   </div>
	   <div class="photo"> 
	   <div class="writing">
	   <h1>Web develepten project</h1>
	   <h5>Very suitable to support all web development projects</h5>
	   </div>
	   </div>
     </div>	
    </body>
</html>

body{
	height:100%;
	background-color:gray;
	margin:0;
}
html{
	height:100%;
	margin:0;
}
.wrap{
	margin: 0 auto;
	min-height:100%;
	width:1400px;
	background-color:white;
}
.logo{
	width:130px;
	height:30px;
	margin-left:110px;
	margin-top:45px;
	float:left;
	
}
p{
 font:bold 15pt sans-serif;
 margin:0;
}
ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
}
a {
 color:black;
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
	
	font:bold 12pt sans-serif;
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:45px; /*Добавляем отступ у пунктов меню*/
}
.menu{
	
	float:right;
	margin-top:50px;
	margin-bottom:55px;
	color:black;
}
.photo{
	width:1400px;
	height:655px;
	background-color:black;
	position: relative 
	
}
.clear{
	clear:both;
}
.writing{
	
   
	margin: auto;
	color:white;
	width:850px;
	height:340px;
	text-align:center;
position: absolute;               /* 2 */
   top: 50%;
   left:50%;
   transform: translate(-50%, -50%);
   
}
h1{
	margin-bottom:0;
	display: inline-block;
	font:bold 44px sans-serif;
	margin-top:150px ;
	
vertical-align:middle;
}
h5{
	font:bold 15px sans-serif;
	margin:0;
margin-top:40px;	
}
  • Вопрос задан
  • 212 просмотров
Пригласить эксперта
Ответы на вопрос 2
yupiter7575
@yupiter7575
Python программист
Честно? Я верстки не увидел. Где здесь верстка? правильный font-family выбрать и посредине хедера разместить? Зеленое еще. Почитайте про флексы, гриды, про адаптивную верстку. А так это можно максимум макетом назвать
Ответ написан
Комментировать
@TOPCHIKPROMMER_109
1.Высота процентами не указываеться
2.Слишком много флоатов используй флекс верстку
2.Используй семантику типо хеадеров и мэйн
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы