Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

edu_champz90

Como é feito esse codigo?

Por , em Desenvolvimento frontend

Recommended Posts

edu_champz90    0

edu_champz90
Postado

Olá pessoal, Tenho um trabalho da faculdade que é desenvolver um website, mas eu empaquei em uma parte, quero criar um esquema igual que estar na imagem. Tentei criar a partir de uma tabela mas não consegui :/ Alguém sabe como montar esse esquema?(ignora a palavra "lojas")unidade.png?1496583128 

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Recomendo a leitura em HTML/CSS:

http://tableless.github.io/iniciantes/

 

Caso esteja começando o fiddle ele separa os blocos (css/html/js) ( oq ue pode confundir...)

 

Peguei o exemplo do colega acima e coloquei tudo em apenas uma pagina html para facilitar.

 

  

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	
	<style type="text/css">
		section {
		  text-align: center;
		}
		
		article {
		  display: inline-block;
		  width: 30%;
		  margin: 10px;
		  box-sizing: border-box;
		  border: 1px solid;
		}
		
	</style>
</head>
<body>
	<section>
	   <h1>Lojas</h1>
	   <article>bloco 1</article>
	   <article>bloco 2</article>
	   <article>bloco 3</article>
	</section>
	
	
</body>
</html>


Pega o conteúdo e salva numa 'pagina.html' por exemplo:

Depois só abrir :

4.png

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito