Nessa vídeo aula passamos a configuração do menu (layout) da minha loja, para a aba sobre. Revendo assim a importância do de criar um documento padrão para configurações feitas em mais de uma aba ao mesmo tempo, nesse caso, todas as abas ao mesmo tempo.
Código fonte (sobre.html):
<!DOCTYPE html>
<html>
<head>
<title>Sobre</title>
<meta encoding="utf-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/roca.css">
<link rel="stylesheet" href="css/padrao.css">
<link rel="stylesheet" href="css/sobre.css">
</head>
<body>
<header>
<nav class="cabecalho">
<ul>
<li><a href="index.html">home</a></li>
<li>/</li>
<li><a href="ajuda.html">ajuda</a></li>
<li>/</li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</header>
<section>
<div class="transform">
<ul>
<h3></h3>
<li class="uppercase">uppercase</li>
<h3></h3>
<li class="lowercase">LOWERCASE</li>
<h3></h3>
<li class="capitalize">capitalize</li>
<h3></h3>
</ul>
</div>
</section>
<section>
<div class="decoration">
<ul>
<h3></h3>
<li class="overline">overline</li>
<h3></h3>
<li class="underline">underline</li>
<h3></h3>
<li class="line-through">line-through</li>
<h3></h3>
</ul>
</div>
</section>
<section class="paragrafos">
<p>Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.</p>
<p>O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visivel do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemnto pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.</p>
</section>
<footer id="rodape">
<img src="css/img/001.png">
© Todos direitos reservados Alam Maia
</footer>
</body>
</html>
Código fonte (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta encoding="utf-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/roca.css">
<link rel="stylesheet" href="css/padrao.css">
<link rel="stylesheet" href="css/loja.css">
</head>
<body>
<header>
<nav class="cabecalho">
<ul>
<li><a href="index.html">home</a></li>
<li>/</li>
<li><a href="ajuda.html">ajuda</a></li>
<li>/</li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</header>
<section>
<h1>Menu loja</h1>
<nav class="loja">
<ul>
<h3></h3>
<li><a href="#">Canecas</a></li>
<h3></h3>
<li><a href="#">Camisas</a></li>
<h3></h3>
<li><a href="#">Bermudas</a></li>
<h3></h3>
</ul>
</nav>
</section>
<footer id="rodape">
<img src="css/img/001.png">
© Todos direitos reservados Alam Maia
</footer>
</body>
</html>
Código fonte (padrao.css):
body {
margin-left: 30px;
margin-right: 30px;
}
body {
background-color: #363636;
font-family: Trebuchet, Verdana, sans-serif;
}
header, section, footer, a, li {
color: #f0ffff;
}
section {
margin: 10px;
letter-spacing: 2px; /*espaço entre letras*/
line-height: 20px; /*altura da linha*/
word-spacing: 2px; /*espaço entre palavras*/
text-indent:10px; /*margem da 1ª palavra*/
}
.loja, .transform, .decoration {
text-transform: uppercase;
width: 160px;
font-size: 15px;
}
.loja li, .transform li, .decoration li {
background-color: #363036;
padding: 1px 5px;
}
.loja h3, .transform h3, .decoration h3 {
border-bottom: 5px solid #363636;
}
Código fonte (sobre.css):
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.overline {
text-decoration: overline;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.paragrafos {
text-align: justify;
font-size: 10px;
font-weight: bold;
}
.transform {
float: right;
margin-bottom: 10px;
}
.decoration {
float: right;
clear: right;
}
Código fonte (loja.css):
.loja a {
text-decoration: none;
}
.loja {
float: left;
clear: left;
}
Nenhum comentário:
Postar um comentário