Como criar uma barra de navegação a partir de uma lista no Raspberry Pi
No topo de uma página web é uma lista de links. Você quer usar o seu Raspberry Pi para transformá-los em uma barra de navegação, um conjunto de botões horizontais. Mas você só quer fazer esta lista a navbar- você não quer afetar outras ligações ou listas na página.
O primeiro passo é adicionar marcas ao arquivo HTML para marcar onde a barra de navegação começa e termina, como este:
Você verá o nome da classe nav para a barra de navegação, então no arquivo CSS, adicione a seguinte linha, o que torna os itens da lista aparecem lado a lado, em vez de começar uma nova linha para cada um:
.nav ul li {display: inline-}Agora você pode estilizar as ligações dentro do nav classe para que eles se parecem com botões. Isso significa apenas que desligar o sublinhado no texto do link, tornando o texto em negrito, usando uma cor clara sobre um fundo escuro (nós escolhemos branco no azul), e adicionando um pouco de enchimento para fazer a ligação parecer maior, como um botão. Aqui está o código CSS que você precisa:
.nav a {text-decoration: none; font-weight: bold-color: white-padding: 8px; background-color: blue-border: 1px solid-border-radius azul: 16px; }A última linha faz com que os cantos dos botões arredondados. Ele não funciona em alguns outros browsers (incluindo netsurf em seu Raspberry Pi), mas os navegadores que não entendem que simplesmente ignorá-lo e mostrar cantos quadrados normais em vez disso, por isso é seguro para incluí-lo. Online, você pode encontrar soluções alternativas que você pode usar para fazer cantos arredondados trabalhar em mais navegadores.
Você agora tem uma barra de navegação de trabalho criado a partir de uma lista. Você pode notar, porém, que ele não está alinhado com o resto do seu conteúdo, e é ligeiramente recuado. Isso porque a lista tem algum estofamento nele normalmente, então você precisa para remover isso. Veja como:
.nav ul {padding: 0px; }