Nas três séries de artigos anteriores, fiz uma introdução detalhada ao layout da grade de nove quadrados. Vamos começar com um layout básico e explicar um por um os problemas encontrados durante o processo de produção. Todos esses três artigos são explicações de princípios básicos. Não há nenhum caso de aplicação poderoso para provar se esse princípio está correto. Alguns amigos podem estar um pouco impacientes e alguns internautas me pediram para fornecer casos. Portanto, neste artigo vou apresentar um caso do Jiugongge – um jogador muito legal.
Em meu terceiro artigo "A grade perfeita de nove gongos com três camadas de separação", apresentei o uso de JS para encapsular tags HTML para reduzir estruturas redundantes, mas esse método também apresenta falhas. Se o usuário desabilitar JS, isso fará com que a estrutura seja danificada. É claro que, para as condições atuais da Internet, isso não deve ser um grande problema, mas olhando para alguns designs de páginas da Web estrangeiras, essa consideração é necessária. Isso requer downgrade elegante e enfraquecimento funcional, mas o resultado é o mesmo que não usar o encapsulamento JS. Portanto, você não pode ter o seu bolo e comê-lo também. Ei, tudo isso são digressões, vamos dar uma olhada em como um de nossos reprodutores legais foi projetado!
As primeiras impressões vêm primeiro, todo mundo quer ver os resultados primeiro, ok, vamos mostrar primeiro as capturas de tela:
Figura 1
Geralmente, para um player tão colorido, os valores de largura e altura precisam ser ajustados dinamicamente, por isso é uma escolha muito adequada usar uma grade de nove quadrados para tais gráficos.
Claro, não vou reiterar o princípio. Consulte o " Layout de grade inquebrável de nove gongos " em minha série de artigos. Este caso de aplicação é baseado nele. Claro, ainda existem algumas técnicas em produção que podem nos ajudar a completar melhor a tarefa. Por exemplo, a tecnologia de sprites css (você pode conferir meu outro artigo " tecnologia de otimização de fundo de imagem de sprites css ") pode reduzir beneficamente o número de solicitações de imagem, para aplicativos com layout de grade de nove quadrados, há mais imagens, porque. São necessárias pelo menos oito fotos para decorar os quatro cantos e quatro lados. Portanto, como reduzir o número de fotos é algo que os designers devem considerar.
Neste exemplo, mesclei as quatro imagens dos cantos em uma imagem, então elas devem ficar assim:
Figura 2
Na foto acima, para que todos vejam com mais atenção, desenhei as junções de várias fotos com linhas auxiliares. Aplicamos o princípio do posicionamento das fotos para fixá-las nos quatro cantos. Eles são definidos na folha de estilo da seguinte forma:
.t_l{ background:url(../image/round.gif) sem repetição no canto superior esquerdo;}
/*canto superior esquerdo*/
.t_r{background:url(../image/round.gif) sem repetição no canto superior direito;}
/*canto superior direito*/
.b_l{background:url(../image/round.gif) sem repetição inferior esquerdo;}
/*canto inferior esquerdo*/
.b_r{ background:url(../image/round.gif) sem repetição no canto inferior direito;}
/*Canto inferior direito*/