Напоминалка основных рецептов CSS

[amphicoelias]

Выпадающее меню

html

<nav>
	<ul class="ul-main">
		<li><a href="">Home</a></li>
		<li>
			<a href="">Events</a>
			<ul>
				<li><a>Event 1</a></li>
				<li><a>Event JKKJKJK</a></li>
				<li><a>Event 3</a></li>
			</ul>
		</li>
		<li>
			<a href="">Winners</a>
			<ul>
				<li><a>Winner 23333333</a></li>
				<li><a>Winner 2</a></li>
			</ul>
		</li>
		<li><a href="">Submit</a></li>
		<li><a href="">Contact</a></li>
		<li><a href="">Login</a></li>
	</ul>
</nav>

css

li {list-style-type: none;}

.ul-main > li {display: inline-block;}

.ul-main ul{
	position: absolute;
	display: none;
}

.ul-main li:hover ul {display: block;}

Слайдер

html

<div class="slider">
	<div class="control left"><img src="img/left.png" alt=""></div>
	<div class="control right"><img src="img/right.png" alt=""></div>
	<div class="slider--title"><p>Where you choose the winner</p></div>
	<p class="slider--subtitle">Help shape the next awi awards ceremony.  click the icon to tell us which of these creatives you love / don't love.</p>
	<div class="slide-ovh">
		<div class="slides">
			<div class="slide">
				<div class="img"><img src="img/slide.png" alt=""></div>
				<div class="slide-descr">
					<a href="#"><img src="img/love.png" alt=""></a>
					<a href="#"><img src="img/hate.png" alt=""></a>
					<div class="about">					  
						<p class="name">The Huntress</p>
						<p class="author">By <a href="#" class="author--a">Jane Doe</a></p>
						<p class="aboutpic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis alias aliquam repellendus. Voluptate, architecto, accusamus. Tenetur iure impedit quis.</p>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="img"><img src="img/slide.png" alt=""></div>
				<div class="slide-descr">
					<a href="#"><img src="img/love.png" alt=""></a>
					<a href="#"><img src="img/hate.png" alt=""></a>
					<div class="about">					  
						<p class="name">The Huntress</p>
						<p class="author">By <a href="#" class="author--a">Jane Doe</a></p>
						<p class="aboutpic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis alias aliquam repellendus. Voluptate, architecto, accusamus. Tenetur iure impedit quis.</p>
					</div>
				</div>
			</div>
			<div class="slide">
				<div class="img"><img src="img/slide.png" alt=""></div>
				<div class="slide-descr">
					<a href="#"><img src="img/love.png" alt=""></a>
					<a href="#"><img src="img/hate.png" alt=""></a>
					<div class="about">					  
						<p class="name">The Huntress</p>
						<p class="author">By <a href="#" class="author--a">Jane Doe</a></p>
						<p class="aboutpic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis alias aliquam repellendus. Voluptate, architecto, accusamus. Tenetur iure impedit quis.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

css

.slider {position: relative;}

.slide-ovh {
	overflow: hidden;
	width: 940px;
	height:467px;
}

.slides {width: 2820px;}

.slide {
	display: inline-block;
	width: 100%;
	height:100%;
}

.img {
	position: relative;
	z-index: -1;
}

.control {
	position: absolute;
	margin-top: 604px;
}

.left {left:763px;}
.left:hover {cursor: pointer;}

.right {right: 42px;}
.right:hover {cursor: pointer;}

.slide-descr {
	position: absolute;
	width: 215px;
	top:181px;
	right: 48px;
}

.slide-descr img {	margin-right: 14px;}

@темы: верстка, html, css, напоминание

Comments

[RayKL]

Занятно, я не знал
Хотя вообще-то я и не сильно в этом разбираюсь. Из html знаю только азы, а css и подавно не знаю.
Весь мой опыт ограничивается созданием электронного учебника по ОБЖ в виде примитивного веб-сайта, с крайне некрасивым использованием javasсript и формами.

А ты, оказывается, умеешь не только программировать, но еще и в написании веб-страниц разбираешься
А php знаешь?

PS: как меня бесят эти узкие в две строки блоки code
Сам пишу пост с их использованием, сложно читать...

[amphicoelias]

Весь мой опыт ограничивается созданием электронного учебника по ОБЖ в виде примитивного веб-сайта

Хаха. Мы тоже такое делали, только по дискретной математике.

А ты, оказывается, умеешь не только программировать, но еще и в написании веб-страниц разбираешься

Ага. Это называется верстка. =)
Это то, с чего мое более-менее близкое знакомство с компом и началось лет этак в 12 на каких то курсах. Хотя потом был многолетний провал, а в колледже снова начала.
Я сейчас пойду фрилансить как раз на эту тему, так что вспоминаю основные рецепты.
Да и js надо подучить. Я в js разобраться могу. В верстке могу. А вот во взаимодейтсвии js и верстки плаваю пока. =)

А php знаешь?

php не знаю. Да я, если и буду c серверной частью разбираться, то с Ruby on Rails.
На пых как-то поглядывала, но конкретных вещей, что можно было в тот момент сделать не было, так что не копала глубоко.

PS: как меня бесят эти узкие в две строки блоки code

Ага. Ну, их можно растянуть вручную, но бесит, да.

[amphicoelias]

Да и портфолио надо сделать.

[RayKL]

Ага. Это называется верстка. =)

Слышал это слово, но не был уверен в значении

Я сейчас пойду фрилансить как раз на эту тему, так что вспоминаю основные рецепты.

Ого, круто. Ну, удачки тебе

[amphicoelias]

Спасибо =)