Пару вопросов по верстке

Rubik · April 30, 2012

Здравствуйте, подскажите пожалуйста как выровнять так текст

еще вопросик как сверстать это прозрачный прямоугольник

и как задать шрифт Myriad Pro

mrnobody · April 30, 2012

Здравствуйте, подскажите пожалуйста как выровнять так текст

Вот пример: http://jsfiddle.net/Napy8/ . Тут можете более подробно ознакомится http://htmlbook.ru/css/vertical-align .

HTML+CSS код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	div{
		background-color: #6B8E23;
	}
	.text-2{
		font-size: 1.5em;
		vertical-align: text-top; /*или можно написать "vertical-align: top;"*/
	}

</style>
</head>
<body>
	<div>
		<span>Текст 1</span>
		<span class="text-2">Текст 2</span>
		<span>Текст 3</span>
	</div>
</body>
</html>

По поводу прозрачного прямоугольника.

Вот пример http://jsfiddle.net/eUbhQ/1/ . Тут можно подробнее прочитать про прозрачность.

И еще можно через свойство opacity.

HTML+CSS код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	div.wrap{
		background-color: #E67817;
		width: 300px;
		height: 240px;
		margin: auto;
		position: relative;
		font-family: "Myriad Pro", sans-serif; /*задаём семейство шрифта*/
	}

	div.sqr{
		background-color: rgba(236,154,81,0.5); /*задаем прозрачность*/ 
		width: 200px;
		height: 140px;
		position: absolute;
		top: 10px;

	}
</style>
</head>
<body>
	<div class="wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="sqr">
		</div>
	</div>
</body>
</html>

И по поводу шрифта я его указал во втором примере через свойство font-family.

font-family: "Myriad Pro";

Обратите внимание что имя шрифта заключено в кавычки, т.к. оно (имя шрифта) разделено пробелом.

Edited May 1, 2012 by mrnobody

Sign In

Пару вопросов по верстке

Question

Rubik

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information