maro
-
Total de itens
1 -
Registro em
-
Última visita
Sobre maro
maro's Achievements
-
Bem, creio que um foco ia ser bom, mas o principal problema sem dúvidas é a render, ela esta estranha em relação ao background.
-
Interessante, mas coloque algo no centro do "olho", talvez fique melhor !
-
Pego mesmo na tipografia, fora isso pro primeiro ta legal !
-
Na verdade não Under, pelo que vi é Language. Obrigado pelo alerta, porém existem vários erros bobos de gramática, o tutorial foi feito há meses.
-
Olá, Esse tutorial foi baseado no scprit desenvolvido pelo ~Patybs, apenas criei um tutorial e modifiquei o código conforme minha preferência. CRIANDO O HTML: Bom primeiramente coloque a estrutura básica do html que é essa aqui: <html> <head> <title> Menu vertical </title> </head> <body> </body> </html> Certo agora vamos colocar os itens do menu, serão apenas links a parte importante e mais complexa fica por conta do css, o código dos menus é esse aqui: <html> <head> <title> Menu vertical </title> </head> <body> <a class="menu" href="">Oficina da net</a> <a class="menu" href="">Tutoriais clube</a> <a class="menu" href="">Capixabinha</a> </body> </html> A parte do html está pronta vamos agora programar o css. A PARTE DO CSS: Vou por o css dentro do próprio html, caso queiram criar um documento externo fiquem a vontade. O código de formatação do css é esse: <style> a.menu{ width: 150; background-color: #efefef; display:block; padding-left:1px; border-left:10px solid #333333; border-bottom:1px solid #BBBBBB; font-weight:bold; color:#666666; line-height:175%; } a.menu:hover{ background-color: #e3eeff; display:block; padding-left:0; font-weight:bold; border-left:10px solid #333333; border-bottom:1px solid #006699; color:#006699; } </style> Coloque os scprits do css dentro das tags <style> ou crie um documento externo. EXPLICANDO O CÓDIGO: a.menu Define que o objecto a ser formatado é o menu. width: 150; Define a largura do menu background-color: #efefef; Define que a cor do fundo do item menu será #efefef padding-left:1px; Define a quantidade de pixels que terá da margem esquerda. border-left:10px solid #333333; Tal código cria uma borda do lado esquerdo de um objeto (no caso o menu), define a espessura, que sua forma é sólida e sua cor (hexadecimal). border-bottom:1px solid #BBBBBB; Como no código a cima ele criará uma borda porém na parte de baixo do objeto, define sua espessura, sua forma e sua cor (também hexadecimal). font-weight:bold; Diz que o texto será formatado em negrito. color:#666666; Define a cor do fundo do menu. line-height:175%; } Define a grossura do fundo, pode ser usado pixels e pontos também. a.menu:hover Define que quando o objeto menu for selecionado tal formatação será ativo (essa opção é possível graças ao hover). background-color: #e3eeff; Define que a cor do objeto selecionado será #e3eeff (coloque uma cor diferente da selecionada inicialmente para obter o resultado esperado). display:block; Define a posição em blocos. padding-left:0; Define que não existira padding-esquerdo (eu resetei essa opção coloque 10 e veja o que acontece). font-weight:bold; Essa opção já foi explicada, define o texto como negrito. border-left:10px solid #333333; Define que a borda lateral terá 10pixels, será sólida e terá a cor #333333 (mude e veja o que acontece). border-bottom:1px solid #006699; Aqui diz o que ira acontecer com a borda inferior quando o objecto for selecionado. color:#006699; Muda a cor do fundo para #006699 quando o objeto for selecionado. Bom pessoal, não posso colocar um exemplo para vocês clicar em porém observem como ficara o menu. MENU NÃO SELECIONADO: MENU SELECIONADO:
-
O que é um arquivo HTML? HTML quer dizer Hyper Text Markup Language. Um documento HTML é composto por tags. As tags do HTML dizem para o web browser o que fazer. Um documento HTML pode ser criado usando um editor de textos qualquer. Vamos tentar? Se você está usando Windows, abrá o Notepad [ou o editor de sua preferência]. Se você está usando Mac, abrá o SimplesText. No OSX abrá o TextEdit e mude as seguintes preferências: Abra o menu "Format" e selecione "Plain Text" ao invés do "Rich Text". Então abra a janela "Preferences" embaixo do menu "Text Edit" e selecione "Ignore rich text commands in HTML files". É possível que seu código HTML não irá funcionar caso isso não sejá feito. Ensira o seguinte código: <html> <head> <title>Título da página.</title> </head> <body> Está é minha primeira página. <b>Este texto está em negrito!</b> </body> </html> Salve como "oficina1.html" Abrá seu Internet explorer [ou o de sua preferência]. Selecione "Open" (ou "Open Page") no menu File do seu navegador. Uma caixa de dialogo aparecerá. Selecione "Browse" (ou "Choose File") e procure o documento HTML que criamos à pouco ("oficina1.htm") - selecione-o e clique em "Open". Procure por um endereço na caixa de dialogo, por exemplo "C:\MyDocuments\oficina1.htm". Clique em OK e seu navegador deverá exibir a página. Explicando o exemplo A primeira tag do seu documento é <html>. Essa tag diz ao seu navegador que está sendo inicilizado um documento HTML. A última tag do seu documento é </html>. Ela fala para o seu navegador que é o fim do documento HTML. O texto entre a tag <head> e </head> é a informação do cabeçalho. As informações do cabeçalho não são mostradas na janela do navegador. O texto entre as tags <title> são o título da sua página. O título escrito é mostrado no título do seu navegador. O texto entre as tags <body> são os textos/outros que são mostrados pelo seu navegador. O texto entre a tag <b> e </b> são textos negritos. Extenção HTM ou HTML? Quando você salva um documento HTML, você pode usar a extenção .htm ou a .html. Nós temos usado a extenção .html nos nossos exemplos. Este é um hábito ruim herdado pelo passado quando geralmente eram usados programas que só permitiam três letras na extenção. Com os novos programas nós achamos melhor umsar a extensão .html. Usando editores de HTML. Você pode editar facilmente arquivos HTML usando um editor WYSIWYG (O que você vê é o que você tem) como FrontPage ou Dreamwaver, em vez de escrever seus codigos em um editor de texto Porém, se você quer ser um grande Web Devoloper, nós recomendamos que use um editor comum [bloco de notas, Notepad] para aprender HTML. ---- Todos os créditos do conteúdo são do www.w3schools.com. Tradução: Luciano Infanti. Agradecimentos: Guido.
-
Ficou muito bom, só acho que onde tem: x-blog, x-flog, deveriam colocar algo diferente.
-
-
Quem Está Navegando 0 membros estão online
- Nenhum usuário registrado visualizando esta página.