Na verdade, o conceito de portas deslizantes CSS surgiu há alguns anos, mas tem sido mencionado com mais frequência nos últimos anos. Mas as pessoas muitas vezes confundem isso com o efeito de guia, especialmente alguns amigos novatos, então escreverei uma explicação detalhada aqui, esperando que seja útil.
Falando nisso, portas de correr não são uma tecnologia sofisticada, são apenas uma técnica CSS. Ele usa a sobreposição e o deslizamento de imagens de fundo para obter alguns efeitos. O mais comum é a navegação com cantos arredondados. Podemos imaginar os dois fundos de cantos arredondados, um à esquerda e outro à direita, como duas portas deslizantes. Eles podem deslizar juntos e se sobrepor para exibir menos conteúdo, ou podem deslizar um contra o outro. outro Abra para exibir mais conteúdo, conforme mostrado abaixo:
Em alguns tutoriais anteriores, gostei de cortar a imagem de fundo em duas partes, uma larga e outra estreita, para emendar. Na verdade, uma imagem é suficiente.
Aqui usamos apenas as duas tags "a" e "span". O estilo pode definir três estados, que pode ser considerado a maneira mais simples.
| A seguir está o conteúdo citado: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <cabeça> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> <estilo> corpo {tamanho da fonte: 12px;} .nav {margem:0 automático; text-align:center; font-weight:bold;borda inferior:3px sólido #579cc6;} .nav a {display:inline-block; margin:0 3px; height:25px; background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) esquerda inferior sem repetição; cor:#666;decoração de texto:nenhum; cursor:ponteiro;} .nav a span {display:inline-block; height:25px; line-height: 25px ; 15 pixels;} .nav a:hover {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) canto superior esquerdo sem repetição color:#FFF;} .nav a:hover span {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) canto superior direito sem repetição;} .nav a.set {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) canto superior esquerdo sem repetição cor:#FFF }; .nav a.set span {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) canto superior direito sem repetição;} </estilo> </head> <corpo> <div class="nav"> <a class="set" href="#"><span>Página inicial</span></a> <a href="#"><span>Categoria 1</span></a> <a href="#"><span>Classificação</span></a> <a href="#"><span>Poderia demorar mais</span></a> <a href="#"><span>Bem-vindo</span></a> <a href="#"><span>Meu blog</span></a> </div> </body> </html> |