A maioria das barras de navegação é organizada horizontalmente, como mostrado na figura abaixo, então como isso é alcançado? De fato, ele usa principalmente o arranjo horizontal de Li na tag <ul>. Aqui está um exemplo para explicar em detalhes como ele é implementado.
1. Escreva um esquema de código HTML do menu horizontal<ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul>2 Código CSS de redação
<1> Defina o estilo comum
<tipo de estilo = text/css> #menu {font: 12px Verdana, Arial, Sans-Serif; /* Defina o tamanho do texto e o estilo da fonte*/ largura: 100%; } #menu, #menu li {estilo de lista: nenhum; / * Remova o símbolo da lista padrão */ preenchimento: 0; / * Remova a margem interna padrão */ margem: 0; / * Remova a margem externa padrão */ FLOAT: esquerda; /* Flutuar à esquerda*/ Display: Block;}<2> Defina o estilo de link
<tipo de estilo = text/css> #menu li a {display: block; /* Defina o link para um elemento de nível de bloco*/ largura: 150px; /* Defina a largura*/ altura: 30px; /* Defina a altura*/ altura da linha: 30px; /* Defina a altura da linha, defina o mesmo valor para a altura e a altura da linha, para que uma única linha de texto possa ser centrada verticalmente*/ alinhamento de texto: centro; /* Texto alinhado central*/ background:#3A4953; /* Defina a cor do fundo*/ cor: #FFF; /* Defina a cor do texto*/ Decoração de texto: Nenhum; /* Remova o sublinhado*/ fronteira: 1px Solid #000; / * Adicione um divisor à esquerda */} </style><3> Link Stirnd Effect
<tipo de estilo = text/css> #menu li a: hover {background: #146c9c; /* Altere a cor do fundo*/ cor: #ffff; /* Altere a cor do texto*/} </style><4> Remova a caixa direita da barra de navegação mais à esquerda
<tipo de estilo = text/css> #menu li A.Last {borda-direita: 0; /* Remova a borda esquerda*/} </style>3 código completo
<! Doctype html> <html> <head> <meta charset = utf-8> <title> Efeito do prompt de imagem </title> <script src = ../jQuery-3.3.1.min.js> </script> <style type = text/css> #menu {Font: 12px verdana /* Defina o tamanho do texto e o estilo da fonte*/ largura: 100%; } #menu, #menu li {estilo de lista: nenhum; / * Remova o símbolo da lista padrão */ preenchimento: 0; / * Remova a margem interna padrão */ margem: 0; / * Remova a margem externa padrão */ FLOAT: esquerda; /* FLOAT esquerda*/ display: bloco; } #menu li a {display: inline-block; /* Defina o link para um elemento de nível de bloco*/ largura: 150px; /* Defina a largura*/ altura: 30px; /* Defina a altura*/ altura da linha: 30px; /* Defina a altura da linha, defina o mesmo valor na altura e altura da linha, para que uma única linha de texto possa ser centrada verticalmente*/ alinhamento de texto: centro; /* Texto alinhado central*/ background:#3A4953; /* Defina a cor do fundo*/ cor: #FFF; /* Defina a cor do texto*/ Decoração de texto: Nenhum; /* Remova o sublinhado*/ fronteira: 1px Solid #000; / * Adicione um divisor à esquerda */} #Menu Li A: Hover {Background: #146C9C; /* Altere a cor do fundo*/ cor: #fff; /* Altere a cor do texto*/} #menu li A.Last {borda-direita: 0; /* Remova a borda esquerda*/} </style> </ad Head> <body> <ul id = menu> <li> <a href = http: //www.baidu.com> Baidu.com </a> </li> <li> <a href = // ww.vevb.com href = http: //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http: //www.google.com Class = last> google.com </a> </li> </ul> </body> </html>Execute online
Dica: você pode modificar algum código primeiro e depois executá -lo
Em suma, a coisa mais necessária para fazê -lo organizar horizontalmente é: o estilo principal da tag <ii> é a exibição: Balock;
O estilo principal de <li> é exibição: Balock Inline, Float: Esquerda, estilo de lista: Nenhum;
Este é o artigo sobre o exemplo de implementação do arranjo horizontal de Li em tags no HTML. Para um conteúdo de arranjo horizontal HTML LI mais relacionado, pesquise os artigos anteriores do Wulin.com ou os seguintes artigos relacionados. Espero que todos apoiem o Wulin.com no futuro!