HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Slide Show</title>
<link href="estilos.css"
rel="stylesheet" type="text/css">
</head>
<body>
<section class="slideshow">
<nav>
<ul>
<li><a
href="#img01">1</a></li>
<li><a
href="#img02">2</a></li>
<li><a
href="#img03">3</a></li>
<li><a
href="#img04">4</a></li>
<li><a
href="#img05">5</a></li>
</ul>
</nav>
<article
id="img01" class="target">
<figure>
<img
src="01.jpg" alt="paisagem 1">
</figure>
</article>
<article
id="img02" class="target">
<figure>
<img
src="02.jpg" alt="paisagem 2">
</figure>
</article>
<article
id="img03" class="target">
<figure>
<img
src="03.jpg" alt="paisagem 3">
</figure>
</article>
<article
id="img04" class="target">
<figure>
<img
src="04.jpg" alt="paisagem 4">
</figure>
</article>
<article
id="img05" class="target">
<figure>
<img
src="05.jpg" alt="paisagem 5">
</figure>
</article>
</section>
</body>
</html>
CSS
@charset "utf-8";
body{
margin:auto;
text-align:center;
}
nav {
margin-op:60px;
left:0;
right:0;
z-index: 20;
background: #FF0;
position:
absolute;
}
nav li {
display: inline;
padding-right:
1em;
}
nav a {
background:#009;
padding: 15px
20px;
border-radius:
13px;
color: #F0F;
font-weight: bold;
text-decoration:
none;
}
nav a:hover{
background: #C00;
}
.slideshow {
margin:auto;
padding-top:160px;
position:
relative;
height: 333px;
width: 500px;
overflow: hidden;
}
.target {
position: absolute;
top: 160px;
right:500px;
height: 333px;
width: 500px;
overflow: hidden;
}
.target:target {
left:-20px;
}
<link href="estilos.css"
rel="stylesheet" type="text/css">
Nenhum comentário:
Postar um comentário