Joao Vitor Posted July 9, 2015 Share Posted July 9, 2015 A segunda parte do tutorial faz referência ao Header, topo do site onde fica os menus e o logo. Por vezes algumas empresas usam slides ou uma imagem de destaque, abrangendo 100% da largura da tela. Definindo topo e menus: <div id="topo"> <div id="elementos-do-topo"> <nav id="menus-do-topo"> <ul> <li>Home</li> <li>Hospedagem</li> <li>Revenda de Hospedagem</li> <li>Infraestrutura</li> <li>Atendimento</li> </ul> </nav> </div> </div> Após isso, vamos definir as classes no CSS. /***** Topo ******/ #topo {height5em;width100%;background#1a1919} #elementos-do-topo {width960px;margin 0 auto} #menus-do-topo {width600px;floatright} #menus-do-topo ul {} #menus-do-topo li {float left;color #fff;border-right 1px solid #FFF;height 65px;padding 0 20px;font lighter 12px65px 'Opens Sans',sans-serif} Após isso, vamos inserir o logo. Não é muito difícil, mas por falta de ideias no momento, farei em custom-font: CSS: #logo {color #fff;float left;font 25px65px Handlee,cursive} [b] HTML: <div id="logo"> Nome da sua Host </div> E para quem quiser usar essa fonte, basta colocar esse código no CSS @import url(http://fonts.googleapis.com/css?family=Handlee); Agora vamos colocar algo de destaque no header para chamar atenção dos visitantes (d'oh, serious). Fiz um *.psd supersimples, deixando o header assim. Pra quem quiser, segue o link do *.psd: clique aqui. O código em CSS do destaque no topo ficou assim: #plano-destaque {height:20em;width:100%;background:url(biblioteca/imagens/destaque.png) no-repeat center top #191919} Bom, hoje vamos parar por aqui. Custei escrever essa pequena parte, pois tive problema com o Google Chrome, pensando que meu voto de confiança valeria a pena, mas o Chrome acabou chutando a galinha inteira. Até a próxima parte, onde vamos fazer o conteúdo da Home Page! 2 Quote Link to comment Share on other sites More sharing options...
Anger Posted July 9, 2015 Share Posted July 9, 2015 Oi João, Parabéns por estar criando este tutorial.. só recomendo avisar o pessoal que não é tão simples e que tu está mostrando apenas algumas coisas básicas. Para que a responsividade começe a tomar efeito, primeiramente tu deves setar tudo. Exemplo: html, body, body div, span, h1, h2, h3, h4, h5, h6, p, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, menu, nav, etc etc { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; } Este é apenas um exemplo de Setar as configurações do código, onde que cada site pode mudar cada estrutura dependendo exclusivamente dos nomes das tag que será utilizado. :) 0 Quote Ajude o fórum! Antes de postar, leiam as regras de postagem aqui. Link to comment Share on other sites More sharing options...
Joao Vitor Posted July 9, 2015 Author Share Posted July 9, 2015 Boa, Anger! Bem lembrado! Só não coloquei porque na primeira parte do tutorial, integramos o Bootstrap que usa o Normalize.css e que já faz esse serviço automaticamente. Muito obrigado por lembrar! :D 0 Quote Link to comment Share on other sites More sharing options...
Anger Posted July 9, 2015 Share Posted July 9, 2015 João, não. O Bootstrap ele é um código padronizado para efeitos muito bons que funcionam bem com a responsividade. Exemplo: TAG: .btn É uma tag padrão do Bootstrap para fazer os botões ficarem muito bem estilizados! Mas está show! Continua fazendo os tutorias.. precisamos de mais membros assim.. rsrs É que se tu não especificar que está contornando o básico para eles, vai vir gente dizendo que teu tutorial não deu certo e blá blá. Xablau, entende. 0 Quote Ajude o fórum! Antes de postar, leiam as regras de postagem aqui. Link to comment Share on other sites More sharing options...
Joao Vitor Posted July 10, 2015 Author Share Posted July 10, 2015 Xablau pra você (foi mal, não podia deixar essa passar, hahaha). Combinado Anger, valeu pelo toque (no bom sentido)! 0 Quote Link to comment Share on other sites More sharing options...
Tasso Posted July 10, 2015 Share Posted July 10, 2015 que mal te pergunte... levando em conta que sou noob em css... como faz pra por um logo ao invés do texto 'host do joao'.. da pra imagem ser 'responsiva' também? 0 Quote Link to comment Share on other sites More sharing options...
Joao Vitor Posted July 10, 2015 Author Share Posted July 10, 2015 Não faz mal algum perguntar, cara. Estamos aqui pra isso! Como estamos trabalhando com bootstrap, eu ia deixar pra chegar na parte de responsive mais pro final, quando íamos fazer o código do mobile, já que quero que o tutorial seja pro pessoal aprender a desenvolver um layout e deixar ele responsivo. Mas então vamos lá. Ao invés de 'Host do João', coloque: <div class="hidden-xs"><div id="logo"><img src="endereço do seu logo"></div></div>. Esse código fará com que quando você usar telas de tamanhos normais, o logo aparecerá. Agora para ele aparecer no responsive, você tem que colocar esse: <div class="visible-xs"><div id="logo"><img src="endereço do seu logo"></div></div> Não usei a "técnica" de redimensionar do CSS, pois por vezes acaba ficando distorcido. Mas caso alguém tiver algo que seja melhor, POR FAVOR, poste! 0 Quote Link to comment Share on other sites More sharing options...
Anger Posted July 10, 2015 Share Posted July 10, 2015 Não faz mal algum perguntar, cara. Estamos aqui pra isso! Como estamos trabalhando com bootstrap, eu ia deixar pra chegar na parte de responsive mais pro final, quando íamos fazer o código do mobile, já que quero que o tutorial seja pro pessoal aprender a desenvolver um layout e deixar ele responsivo. Mas então vamos lá. Ao invés de 'Host do João', coloque: <div class="hidden-xs"><div id="logo"><img src="endereço do seu logo"></div></div>. Esse código fará com que quando você usar telas de tamanhos normais, o logo aparecerá. Agora para ele aparecer no responsive, você tem que colocar esse: <div class="visible-xs"><div id="logo"><img src="endereço do seu logo"></div></div> Não usei a "técnica" de redimensionar do CSS, pois por vezes acaba ficando distorcido. Mas caso alguém tiver algo que seja melhor, POR FAVOR, poste! Seu usar apenas definição width ele não fica distorcido pois redimensionará proporcionalmente. 0 Quote Ajude o fórum! Antes de postar, leiam as regras de postagem aqui. Link to comment Share on other sites More sharing options...
Tasso Posted July 11, 2015 Share Posted July 11, 2015 Entendi... valeu! 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.