Tutorial básico CSS

Modelo de caixa CSS

CSS3Manual Básico

Manual de referência CSS

Regras CSS @ (RULES)

Manual de Exemplos Completo do CSS Contador do CSS (Contador)

Layout da Página do CSS (Layout da Página)

Alinhamento CSSFacil de projetar. Podemos usar o alinhamento CSS para projetar nossas páginas da web, por exemplo, página inicial, contate-nos, sobre nós, etc.

Existem três métodos para projetar layouts de páginas da web:

Div HTML+Alinhamento CSS：Agora é amplamente utilizada.
Tabela HTML：Mais lento, menos popular.
Frameword HTML：Descontinuado.

O layout CSS pode incluir cabeçalho, rodapé, painel esquerdo, painel direito e parte do corpo do texto. Vamos ver um exemplo simples de layout CSS.

Exemplo de Layout CSS

Exemplo

!DOCTYPE html　　
<html>　　
<head>　　
<style>　　
.header{margem:-8px　-8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);cor:branco;text-alinhamento:centro;espaçamento:10px;}　　
.container{largura:100%}　　
.left{largura:15%;flutuante:left;}　　
.body{largura:65%;flutuante:left;background-cor:pink;espaçamento:5px;}　　
.right{largura:15%;flutuante:left;}　　
.footer{margem:-8px;limpar:tanto;background-image:linear-gradient(145deg,#7379ff,#b524ef);cor:branco;text-alinhamento:centro;espaçamento:10px;}　　
</style>　　
</head>　　
<body>　　
<div class="header"><h2>Tutorial Básico oldtoolbag.com</h2></div>　　
　　
<div class="container">　　
<div class="left">　　
<p>Barra Lateral Esquerda</p>　　
</div>　　
<div class="body">　　
<h1>Corpo do Texto</h1>　　
<p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p>　　
<p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p>　　
<p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p>　　
<p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p><p>Conteúdo da Página Aqui</p>　　
<p>Conteúdo da Página Aqui</p>　　
</div>　　
<div class="right">　　
<p>Barra Lateral Direita</p>　　
</div>　　
</div>　　
　　
<div class="footer">　　
<p>Footer</p>　　
</div>　
</body>　　
</html>

Teste e Veja‹/›

Efeito de Saída:

Tutorial Básico oldtoolbag.com

Barra Lateral Esquerda

Corpo do Texto

O Conteúdo da Página está Aqui

Barra Lateral Direita

Rodapé

Manual de Exemplos Completo do CSS Contador do CSS (Contador)