Como criar uma barra de navegação a partir de uma lista na pi framboesa

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 outros links ou listas na página.

Video: Scriptcase 7 - Barra de Ferramentas do Menu

O primeiro passo é adicionar tags para o arquivo HTML para marcar onde a barra de navegação começa e termina, como este:

Casa
galerias
dicas de fotografia
Contato

Você verá o nome da classe nav para a barra de navegação, assim, 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 parecem botões. Isso só significa 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 alguns estofo para fazer a ligação parecer maior, como um botão. Aqui está o código CSS que você precisa:

Video: Miniaturas barra de tarefas windows 7 com + rapidez

.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 navegadores (incluindo netsurf em seu Raspberry Pi), mas 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, no entanto, que 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; }