A estrutura do div+css
Você está aprendendo o layout do CSS? Você não pode dominar completamente o layout puro do CSS? Geralmente, existem duas situações que impedem seu estudo:
A primeira possibilidade é que você ainda não tenha entendido o princípio das páginas de processamento do CSS. Antes de considerar o desempenho geral da sua página, considere primeiro a semântica e a estrutura do conteúdo e adicione CSS para a semântica e a estrutura. Este artigo informará como estruturar o HTML.
Outro motivo é que você está impotente sobre esses atributos de camada de apresentação muito familiares (como CellPadding, Hspace, Align = Esquerda, etc.) e não sabem a que instrução CSS se converter. Quando você resolve o primeiro problema e sabe como estruturar seu HTML, darei uma lista dos atributos de desempenho original em detalhes que o CSS é usado.
Html estruturado
Quando aprendemos a produção de páginas da web, sempre consideramos como projetar e considerar as fotos, fontes, cores e planos de layout. Em seguida, usamos o Photoshop ou fogos de artifício para desenhar e cortar pequenas figuras. Finalmente, todos os designs são restaurados e exibidos na página editando HTML.
Se você deseja que sua página HTML seja layout com CSS (que é amigável ao CSS), você precisa começar de novo, não considerando a aparência primeiro e primeiro pense na semântica e estrutura do conteúdo da sua página.
A aparência não é a coisa mais importante. Uma página HTML bem estruturada pode ser expressa em qualquer aparência, o CSS Zen Garden é um exemplo clássico. O CSS Zen Garden nos ajuda finalmente a reconhecer o poder do CSS.
O HTML não é apenas lido nas telas do computador. As imagens que você projetou cuidadosamente com o Photoshop não podem ser exibidas em PDAs, telefones celulares e leitores de tela. Mas uma página HTML bem estruturada pode ser exibida em qualquer lugar, em qualquer dispositivo de rede através de diferentes definições de CSS.
Comece a pensar
Primeiro de tudo, precisamos aprender o que é a estrutura, que alguns escritores também chamam de semântica. O termo significa que você precisa analisar seus blocos de conteúdo e o objetivo de cada serviço de conteúdo e, em seguida, estabelecer uma estrutura HTML correspondente com base nesses fins de conteúdo.
Se você se sentar e analisar e planejar cuidadosamente a estrutura da sua página, poderá obter algumas peças como esta:
Logotipo e nome do site
Conteúdo da página principal
Navegação do site (menu principal)
Submenu
Caixa de pesquisa
Área funcional (como carrinho de compras, caixa)
Footeiro (direitos autorais e declarações legais relevantes)
Geralmente usamos elementos de div para definir essas estruturas, assim:
＜ Div id = cabeçalho ＞＜/div ＞
＜ Div ID = Conteúdo ＞＜/Div ＞
＜ Div ID = GlobalNav ＞＜/Div ＞
＜ Div id = subnav ＞＜/div ＞
＜ Div id = pesquisa ＞＜/div ＞
＜ Div id = loja ＞＜/div ＞
＜ Div id = rodapé ＞＜/div ＞
Este não é um layout, é uma estrutura. Esta é uma descrição semântica dos blocos de conteúdo. Quando você entende sua estrutura, você pode adicionar o ID correspondente à div. O contêiner Div pode conter qualquer bloco de conteúdo ou ninho em outra div. O bloco de conteúdo pode conter quaisquer elementos html - título, parágrafo, imagem, tabela, lista, etc.
De acordo com o que foi dito acima, você já sabe como estruturar o HTML e agora pode fazer definições de layout e estilo. Cada bloco de conteúdo pode ser colocado em qualquer lugar da página e, em seguida, são especificados cores, fonte, borda, fundo, atributos de alinhamento etc. do bloco.
Usar um seletor é uma coisa maravilhosa
O nome de um ID é um meio de controlar um determinado bloco de conteúdo. Ao colocar uma div nesse bloco de conteúdo e adicionar um ID exclusivo, você pode usar o seletor CSS para definir com precisão a aparência de cada elemento de página, incluindo título, lista, imagem, link ou parágrafo, etc. Por exemplo, se você escrever uma regra CSS para #Header, ela pode ser completamente diferente das regras da imagem em #Content.
Outro exemplo é: você pode definir estilos de link em diferentes blocos de conteúdo através de diferentes regras. Semelhante a isso: #GlobalNav A: Link ou #Subnava: Link ou #Content A: Link. Você também pode definir os mesmos elementos em diferentes blocos de conteúdo com diferentes estilos. Por exemplo, os estilos de P em #Content e #Footer são definidos por #Content P e #FooterP, respectivamente. Estruturalmente, sua página é composta de imagens, links, listas, parágrafos etc. Esses próprios elementos não têm efeito em que dispositivo de rede (PDA ou telefone celular ou TV de rede) são exibidos. Eles podem ser definidos como qualquer aparência.
Uma página HTML cuidadosamente estruturada é muito simples e cada elemento é usado para fins estruturais. Quando você deseja reivindicar um parágrafo, não precisa usar a tag Blockquote. Basta usar a tag P e adicionar uma regra de margem CSS a P para alcançar o objetivo do recuo. P é uma etiqueta estruturada, a margem é um atributo de representação, o primeiro pertence ao HTML, e o último pertence ao CSS. (Esta é a separação de fases da estrutura e expressão.)
Quase não há tags que representam atributos em uma página HTML bem estruturada. O código é muito limpo e conciso. Por exemplo, o código original <TableWidth = 80% CellPadding = 3 borda = 2align = esquerda> agora pode escrever apenas <table> no HTML e todas as coisas que o desempenho do controle são gravadas no CSS. No HTML estruturado, a tabela é uma tabela, não algo mais (como é usado para layout e posicionamento).
Pratique a estrutura você mesmo
O que é mencionado acima é apenas a estrutura mais básica. No aplicativo real, você pode ajustar os blocos de conteúdo conforme necessário. Muitas vezes, existem situações de ninho da div e você verá que existem outras camadas na camada de contêineres, com uma estrutura semelhante a esta:
＜ Div Id = NavContainer ＞
＜ Div ID = GlobalNav ＞
＜ Ul ＞ uma lista ＜/ul ＞
＜/div ＞
＜ Div ID = subnav ＞
＜ Ul ＞ Outra lista ＜/ul ＞
＜/div ＞
＜/div ＞
Os elementos DIV aninhados permitem definir mais regras CSS para controlar o desempenho, por exemplo: você pode dar à #NavContainer uma regra para fazer a lista corretamente e, em seguida, dar à #GlobalNav uma regra para tornar a lista restante e dar a #subnav uma lista outro desempenho completamente diferente.
Substitua os métodos tradicionais por CSS
A lista a seguir ajudará você a substituir os métodos tradicionais pelo CSS:
Atributo html e método CSS correspondente
atributo html
Descrição do método CSS
alinhe = esquerda
alinhe = flutuação direita: esquerda;
Float: Certo; Use CSS para flutuar qualquer elemento: imagem, parágrafo, div, título, tabela, lista, etc.
Quando você usa o atributo float, você deve definir uma largura para o elemento flutuante.
marginwidth = 0leftmargin = 0 marginHeight = 0 topmargin = 0 margem: 0; Use CSS, a margem pode ser definida em qualquer elemento, não apenas em um elemento corporal, mas, mais importante, você pode especificar os valores de margem da parte superior, direita, inferior e esquerda do elemento, respectivamente.
vlink =#333399 link =#000000 link =#3333ff A: link#3ff;
A: Visitado: #339;
A: Passe o mouse: #999;
A: ativo: #00f;
No HTML, a cor do link é definida como um valor de atributo do corpo. Os estilos de link de toda a página são iguais. Usando o seletor CSS, os estilos de link de diferentes partes da página podem ser diferentes.
bgcolor = #ffffff background-color: #fff; No CSS, qualquer elemento pode definir a cor de fundo, não apenas os elementos do corpo e da mesa.
borderColor = #ffffff border-color: #fff; Qualquer elemento pode definir bordas (Boeder). Você pode definir a parte superior, direita, inferior e esquerda, respectivamente.
borda = 3Cellspacing = 3 largura de borda: 3px; Usando CSS, você pode definir a borda da tabela como um estilo unificado ou definir a cor, o tamanho e o estilo das fronteiras superior, direita, inferior e esquerda, respectivamente.
Você pode usar a tabela, TD ou TH seletores.
Se você precisar definir um efeito sem fronteiras, poderá usar a definição CSS: colapso da borda: colapso;
＜ Br Clear = esquerda ＞
＜ Br Clear = Right ＞
＜ Br Clear = All ＞
claro: esquerda;
claro: certo;
claro: ambos;
Muitos layouts de 2 ou 3 colunas usam o atributo flutuante para localizar. Se você definir a cor de fundo ou a imagem de fundo na camada flutuante, poderá usar o atributo claro.
CellPadding = 3
vspace = 3
hspace = 3 preenchimento: 3px; Com CSS, qualquer elemento pode definir atributos de preenchimento. Da mesma forma, o preenchimento pode definir a parte superior, direita, inferior e esquerda, respectivamente. O preenchimento é transparente.
alinhe = alinhamento de texto central: centro;
Margem-direita: Auto; margem-esquerda: automático;
Alinhamento de texto se aplica apenas ao texto.
Níveis de bloco como Div e P podem ser centralizados horizontalmente através da margem-direita: Auto; e margem-esquerda: automático;
Algumas dicas e ambientes de trabalho lamentáveis
Devido ao suporte incompleto do CSS pelos navegadores, às vezes precisamos pegar alguns hacks ou criar um ambiente (soluções alternativas) para permitir que o CSS atinja o mesmo efeito que os métodos tradicionais. Por exemplo, os elementos no nível do bloco às vezes exigem o uso de técnicas de centralização horizontal, técnicas de bugs de modelo de caixa, etc. Todas essas dicas são detalhadas no artigo de Mollyholzschlag "Web Design integrado: estratégias para hack-gestão de CSS de longo prazo".
Outro site de recursos para truques CSS é a posição de Big John e Holly Bergevin é tudo.
Entender comportamento flutuante
Os "contendo carros alegóricos" de Eric Meyer ajudarão você a dominar como usar o layout do atributo de flutuação. O elemento flutuante às vezes precisa ser limpo e a leitura de "Como limpar os carros alegóricos sem marcação estrutural" será muito útil.