alleroy
@alleroy
Изучаю фреймворк laravel

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

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

5dc49aa67aea483f9f80c39b714e4466.jpg
  • Вопрос задан
  • 2726 просмотров
Решения вопроса 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;
}
Ответ написан
@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% и просто стилизуем ссылку.

Вроде бы объяснил, какие теги как использовать. Если будут вопросы, то пишите.
Ответ написан
Могли бы сразу написать как мне сверстать сайт... Что именно вызывает затруднение?
Ответ написан
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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы