Clicky

Ir para conteúdo

Joao Vitor

[Tutorial] Como criar um Layout Responsivo - Parte 2

Posts Recomendados

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}

81yn5t.png
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.
K8N4yE.png

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!

  • Gostei! 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.  :)


Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.


Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?


"Embora ninguém possa voltar atrás e fazer um novo começo, qualquer um pode começar agora e fazer um novo fim." - Chico Xavier

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.


  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.



×
×
  • Criar Novo...