Introdução ao conteúdo relacionado à estrutura e desempenho
Estrutura HTML, desempenho css, comportamento javascript, o layout da página da web deve levar em consideração o princípio da separação de estrutura, desempenho e comportamento. Primeiro, concentre-se na estrutura e na semântica e, em seguida, considere CSS, JS, etc.
A ideia de separação entre estrutura e expressão
Ideias e métodos de produção de desenvolvedores juniores: divs são aninhados camada por camada Ideias e métodos de produção de desenvolvedores intermediários: remova divs redundantes e simplifique-os; Use css para configurá-lo para reduzir o ajuste entre html e css. transbordar:
valor padrão visível. O conteúdo não será cortado e será renderizado fora da caixa do elemento.
o conteúdo oculto é cortado e o conteúdo restante fica invisível.
scroll O conteúdo será cortado, mas o navegador exibirá barras de rolagem para visualizar o conteúdo restante.
auto Se o conteúdo for cortado, o navegador exibirá barras de rolagem para visualizar o conteúdo restante.
herdar especifica que o valor do atributo overflow deve ser herdado do elemento pai.
text-indentO texto é recuado na posição de destino e não há necessidade de adicionar rótulos adicionais ao texto. Reduza o código redundante
Ao obter um desenho de web design, primeiro preste atenção ao conteúdo do texto da página da web e ao relacionamento entre os módulos de conteúdo.
Concentre-se em escrever código HTML semântico em vez de pensar muito sobre o estilo do desenho do projeto.
Espere até que o HTML seja escrito de acordo com o conteúdo e então considere a implementação do estilo.
Complete os efeitos visuais exigidos pelo desenho sem alterar a estrutura existente.
A margem pode ser um valor negativo e, através de valores negativos, o conteúdo pode ser movido! Obtenha movimento em quatro direções.
Em estrutura (HTML) e estilo (css), você pode primeiro escrever o conteúdo em HTML e, em seguida, usar a margem para mover a posição para obter a composição tipográfica, reduzir o acoplamento entre estilo e estrutura e reduzir o código
Skin e resumo da página da web
Minimize a dependência do HTML em CSS
Skin de página da Web: mesma estrutura HTML, estilos CSS diferentes
Abaixo estão alguns compartilhamentos de alunos da Gray Niu WEB
Quando tivemos contato pela primeira vez com a produção de páginas web, aprendemos que html representa estrutura, css representa estilo e javascript representa comportamento. Na produção de páginas web, sempre enfatizamos o princípio da separação entre estrutura e desempenho. para HTML. Além disso, a separação é Você está falando sobre escrevê-los em arquivos diferentes e referenciá-los? Claro que não. Com o estudo aqui aprendi que a separação não é apenas um método, mas também uma ideia. Resumindo, é uma coordenada bidimensional, onde o eixo x representa o desenvolvimento tecnológico e o eixo y representa a página web. necessidades de produção. A separação é concluída de acordo com o desenvolvimento tecnológico e as necessidades de produção de nossas páginas web!
Por exemplo: Por exemplo, se construirmos uma casa, HTML equivale à estrutura da casa e CSS equivale à decoração posterior. As páginas web são todas baseadas em um efeito. será diferente dependendo da renderização, então temos todos os tipos de páginas para navegar, então como organizamos as páginas da web? Em primeiro lugar, não pense muito nos estilos CSS, tente tornar a nossa estrutura HTML razoável, concisa e semântica, e depois adicione e melhore os estilos CSS!
Quando chegamos à página, diferentes produtores tinham ligações diferentes com o estilo estrutural. Com base na diferente profundidade de compreensão do estilo estrutural, ele foi provisoriamente dividido em três níveis diferentes: primário, intermediário e avançado;
Por exemplo, uma caixa de diálogo tão comum tem três unidades. Primeiro, precisamos completar uma unidade e executar CTRL+V na outra. Se um produtor júnior obtiver a página, ele geralmente a divide de acordo com as caixas acima. div contém 2 divs pequenos, flutuando para a esquerda e para a direita, img à esquerda, p, h e outras tags à direita. Quanto ao fator tempo, ele é implementado através do posicionamento do atributo de posição.
<div class="demo1">
<div class="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div class="fr">
<span>10 minutos atrás</span>
<h6>Afastando-se cada vez mais do livro</h6>
<p>
Você tem muitos pensamentos persistentes em sua mente todos os dias e sente que está muito ocupado. Se pensar bem, não sabe com o que está realmente ocupado. Apenas desenvolvendo bons hábitos, cuidando bem de si mesmo,? e seguindo seus sonhos você pode aumentar a produtividade, o que também significa melhorar seu relacionamento com familiares e amigos, porque quando você muda, tudo ao seu redor muda. Que hábitos de pessoas altamente eficazes valem a pena aprender?
</p>
</div>
</div>
<div class="demo2">
<img src="../../images/head02.jpg" alt="">
<div class="fr">
<span>10 minutos atrás</span>
<h6>Afastando-se cada vez mais do livro</h6>
<p>
Você tem muitos pensamentos persistentes em sua mente todos os dias e sente que está muito ocupado. Se pensar bem, não sabe com o que está realmente ocupado. Apenas desenvolvendo bons hábitos, cuidando bem de si mesmo,? e seguindo seus sonhos você pode aumentar a produtividade, o que também significa melhorar seu relacionamento com familiares e amigos, porque quando você muda, tudo ao seu redor muda. Que hábitos de pessoas altamente eficazes valem a pena aprender?
</p>
</div>
</div>
<div class="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">10 minutos atrás</span>
<h6>Afastando-se cada vez mais do livro</h6>
<p>
Você tem muitos pensamentos persistentes em sua mente todos os dias e sente que está muito ocupado. Se pensar bem, não sabe com o que está realmente ocupado. Apenas desenvolvendo bons hábitos, cuidando bem de si mesmo,? e seguindo seus sonhos você pode aumentar a produtividade, o que também significa melhorar seu relacionamento com familiares e amigos, porque quando você muda, tudo ao seu redor muda. Que hábitos de pessoas altamente eficazes valem a pena aprender?
</p>
</div>
</div>=>3 demonstrações diferentes representam 3 estruturas de página diferentes || Exibição da parte pública da estrutura da página escrita:
/*reiniciar*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margem: 0; preenchimento: 0;estilo de lista: nenhum;fonte:12px/1.5 "Arial", "sans-serif", "Microsoft Yahei", "宋体", "Tahoma"}
/*Estilo público*/
.demo1,.demo2{
largura: 600px;
margem superior: 20px;
estouro: oculto;
margem inferior: 20px;
}
p{
alinhamento de texto: justificar;
recuo do texto: 2em;
altura da linha: 24px;
}=>Produtor Júnior css
/*primário*/
.demo1{
largura: 600px;
margem superior: 20px;
estouro: oculto;
}
.demo1.fl{
largura: 100px;
flutuar: esquerda;
}
.demo1.fl img{
margem esquerda: 20px;
preenchimento: 10px;
borda: 1px sólido #ccc;
}
.demo1.fr{
largura:488px;
flutuar: certo;
borda: 1px sólido #ccc;
posição: relativa;
preenchimento: 5px;
}
.demo1 .fr intervalo{
posição: absoluta;
direita: 18px;
superior: 5px;
}=>Css produtor intermediário, a estrutura é simplificada em relação ao nível elementar, a div da esquerda é removida e a parte da direita é mantida;
/*intermediário*/
.demo2.fr{
largura:488px;
flutuar: certo;
borda: 1px sólido #ccc;
posição: relativa;
preenchimento: 5px;
}
.demo2 .fr intervalo{
posição: absoluta;
direita: 18px;
superior: 5px;
}
.demo2 img{
margem esquerda: 20px;
preenchimento: 10px;
borda: 1px sólido #ccc;
}=>Css de produtor avançado: primeiro escreva o código de acordo com a estrutura e semântica, e depois defina o estilo css, o que reduz o ajuste entre css e html (movimento de documento, movimento de saída de imagem, atributos de posicionamento)
/*avançado*/
.demo3{
borda: 1px sólido #ccc;
largura: 488px;
margem esquerda: 100px;
preenchimento: 5px;
posição: relativa;
}
.demo3 img{
flutuar: esquerda;
margem:-6px 0 0 -86px;
preenchimento: 10px;
borda: 1px sólido #CCCCCC;
}
.demo3 intervalo{
posição: absoluta;
superior: 10px;
direita: 20px;
}Conclusão: Ao obter um desenho de web design, você deve primeiro observar a relação entre os módulos de texto e conteúdo, focar em escrever código HTML semântico e não pensar muito no estilo de layout da sala de design, esperar até que o código HTML seja editado Após a conclusão, considere como implementá-lo e se esforce para completar os efeitos visuais exigidos pela arte do design sem alterar a estrutura da página existente (clique para baixar a estrutura completa e o código do princípio de desempenho do layout simples da página da web)
O texto acima é o conteúdo detalhado compartilhado sobre a estrutura e os princípios de desempenho do layout simples de páginas da web. Para obter mais informações sobre a estrutura e os princípios de desempenho do layout simples de páginas da web, preste atenção a outros artigos relacionados em downcodes.com!