Задать вопрос
alleroy
@alleroy
Изучаю фреймворк laravel
php

Kак мне сверстать сайт?

Как мне сверстать точно как здесь? у меня не как не получаеться....

5dc49aa67aea483f9f80c39b714e4466.jpg
  • Вопрос задан
  • 2770 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 4
reskwer
@reskwer
front-end developer
Верстка без PSD и Не имея шрифтов.. codepen.io/reskwer/pen/JoEXWP
Что получилось :)
1fc8f66c9a8c4d7db33edac04b94cca7.jpg
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="reskwer">
	<title>Что-то на CodePen</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="block">
		<span>News</span><span>|</span><span>15 october 2011 - 18:32</span>
		<h1>Lorem ipsum dolor.</h1>
		<img src="http://placehold.it/250x150" alt="img">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus dicta, neque suscipit amet ipsa, quidem, nisi ratione non ex magni et excepturi quaerat atque facere ad facilis, explicabo accusantium magnam.</p>
		<a href="#">read more</a>
	</div>
</body>
</html>

style.css
body{
	font-family: tahoma,verdana,arial;
	padding: 25px;
}
.block{
	width: 600px;
	height: 250px;
	border-bottom: 2px dotted #ccc;
	position: relative;
}
.block img{
	float: left;
	margin: 0 8% 0 1%;
	border: 3px solid #000;
	border-radius: 3px;
}
.block span:nth-child(1){
	font: italic 120% tahoma;
}
.block span:nth-child(2){
	color: #ccc;
	display: inline-block;
	padding: 0 15px;
}
.block span:nth-child(3){
	font-size: 80%;
	color: #ccc;
}
.block h1{
	font-size: 140%;
}
.block a{
	display: block;
	background: #eee;
	color: black;
	font-style: italic;
	width: 100px;
	height: 22px;
	position: absolute;
	right: 20px;
	text-align: center;
	text-decoration: none;
}
Ответ написан
2 комментария
2 комментария
@l2p
Попробую немного объяснить, где какие блоки использовать (в ответ на коммент).
News | 15 October, 2011 - 18:32 - это div, в котором цвет, шрифт меняется за счет span-ов или ссылок, то есть можно сделать так:

<div class="info"><a href="/">News</a><span> | 15 October, 2011 - 18:32</span></div>

Получается, что стили можно сделать так:

.info { тут отступы у блока }
.info a { тут стили категории }
.info span { тут серый стиль даты добавления }

Можно сделать по-другому, это всего лишь вариант.
Весь новостной блок также нужно обернуть в div, который будет иметь border-bottom.
Теперь, что касается самой новости. Заголовок нужно верстать, как h1, если новость полная. Если нет, то можно сделать через h(2,3,...), а можно через div.
Картинка слева, текста справа. Можно сделать так:

<div class="left">тут как бы картинка</div>
<div class="right">тут текст<div class="button"><a href="/">read more</a></div></div>

Но это будет правильно, если текст не должен обтекать картинку. И .left, и .right - это блоки с определенной шириной и float: left(один из вариантов) С кнопкой "Читать далее" думаю все понятно - div с text-align:right и width: 100% и просто стилизуем ссылку.

Вроде бы объяснил, какие теги как использовать. Если будут вопросы, то пишите.
Ответ написан
3 комментария
3 комментария
Libris
@Libris
Могли бы сразу написать как мне сверстать сайт... Что именно вызывает затруднение?
Ответ написан
5 комментариев
5 комментариев
Lumore
@Lumore
Front-end developer 
<style>
.block .image, .block .text {
width: 50%;
display: inline-block;
}
</style>
<div class="block">

<div class="block-title">Заголовок</div>
<div class="block-contnet">
<div class="image"></div>
<div class="text"></div>
</div>

</div>
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
PHP разработчик
Lachestry • Таганрог
от 170 000 до 200 000 ₽
Backend-разработчик PHP
Wanted. • Москва
До 160 000 ₽
Senior PHP Developer
Wisebits
от 4 000 €
Ещё вакансии
Заказы с Хабр Фриланса
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Парсер-бот
22 дек. 2024, в 20:12
10000 руб./за проект
Ещё заказы