✅ Layout com classes CSS do 960 Grid System

Índice

O Estrutura do sistema de grade CSS 960Nada mais é do que uma padronização de estilos que fornece as classes necessárias para implementar colunas em uma página web, de diferentes tamanhos, para fazer o layout de nossos conteúdos de maneira fácil e ordenada.
O 960 Grid System tem este nome porque é um sistema de grade para fazer páginas com 960 pixels de largura. As colunas que podemos colocar na grade terão larguras diferentes, mas a largura total da página sempre será de 960 pixels.
Com essas classes css predefinidas, podemos usar 12 ou 16 colunas para criar nossos layouts, cada uma das colunas tem uma margem esquerda e direita de 10px, para criar 20px de separação entre as colunas. Sabendo disso, dizemos que se eu usar 12 colunas, cada coluna terá 60px cada e se eu usar 16 colunas, a largura de cada uma será de 40px.
Para ter um gui, adicionamos uma imagem de como as colunas são distribuídas.
É muito fácil fazer o layout desta forma e, olhando para a imagem, temos uma ideia de como fazê-lo. Para os fins deste tutorial, vamos criar um layout para estruturar um site e organizar as informações.
Começamos nosso exemplo criando um arquivo 960test.html e adicionamos o seguinte css entre as tags
[cor = # 000000]

[/Cor]
Esses arquivos são os que possuem as classes do framework de grade 960, se precisarmos de novos css, vamos aplicá-los em um arquivo separado, nunca iremos modificar o framework para mantê-lo padrão.
Aqui está um layout simples para explicar melhor o uso da grade 960

Automóveis

Pagar em
RSS

Capa
Notícia
Membros
Promoções
Contate-Nos

Algum Título

Donec malesuada dictum orci. Pellentesque felis arcu, maleuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae ódio. Fusce ut urn eu libera luctus maleuada. Nulla quam arcu, adipiscing quis, hendrerit ac, maleuada ut, ante.

Em seguida, para terminar o exemplo, adicionamos um arquivo mystyles.css

 @charset "iso-8859-2"; / * Documento CSS * / div.spacer {height: 1em; } #top {largura: 100%; plano de fundo: # 29231e; posição: relativa; topo: 0; esquerda: 0; } #top ul {margin: 10px 0 10px 0; cor: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) superior central sem repetição; } #rss {background: url (… /images/rss-logo.gif.webp) no-repeat right; preenchimento: 5px 30px 5px 0; } a # logo {background: url (… /images/vos-voz.gif.webp) no-repeat; largura: 470px; altura: 92px; flutuar: esquerda; margem superior: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; plano de fundo: url (… /images/header.jpg.webp) sem repetição; altura: 173px; } #contentMain {background: #FFFFFF; padding-top: 10px; border-bottom: 5px # A1DEF0 sólido; } #contentMain h1, #contentMain h3 {color: # 4991a5; } #menu {background: # e7f7fb; } #menu ul {padding-top: 10px; margin-bottom: 10px; } #menu ul li {display: inline; fonte: 20px bold Arial, Helvetica, sans-serif; } .artigo {margem esquerda: 15px; } img.border-blue {border: 5px solid # e7f7fb; margin-bottom: 10px; } #footer {font-size: 11px; }

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo