{"id":432,"date":"2020-07-01T13:58:48","date_gmt":"2020-07-01T16:58:48","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=432"},"modified":"2022-12-09T08:38:30","modified_gmt":"2022-12-09T11:38:30","slug":"elementos-e-tecnicas-de-layout-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/elementos-e-tecnicas-de-layout-html\/","title":{"rendered":"Elementos e t\u00e9cnicas de layout HTML"},"content":{"rendered":"

Os sites geralmente exibem conte\u00fado em v\u00e1rias colunas (como uma revista ou um jornal).<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Template<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n\/* Style the header *\/\r\nheader {\r\n  background-color: #666;\r\n  padding: 30px;\r\n  text-align: center;\r\n  font-size: 35px;\r\n  color: white;\r\n}\r\n\r\n\/* Create two columns\/boxes that floats next to each other *\/\r\nnav {\r\n  float: left;\r\n  width: 30%;\r\n  height: 300px; \/* only for demonstration, should be removed *\/\r\n  background: #ccc;\r\n  padding: 20px;\r\n}\r\n\r\n\/* Style the list inside the menu *\/\r\nnav ul {\r\n  list-style-type: none;\r\n  padding: 0;\r\n}\r\n\r\narticle {\r\n  float: left;\r\n  padding: 20px;\r\n  width: 70%;\r\n  background-color: #f1f1f1;\r\n  height: 300px; \/* only for demonstration, should be removed *\/\r\n}\r\n\r\n\/* Clear floats after the columns *\/\r\nsection:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n\/* Style the footer *\/\r\nfooter {\r\n  background-color: #777;\r\n  padding: 10px;\r\n  text-align: center;\r\n  color: white;\r\n}\r\n\r\n\/* Responsive layout - makes the two columns\/boxes stack on top of each other instead of next to each other, on small screens *\/\r\n@media (max-width: 600px) {\r\n  nav, article {\r\n    width: 100%;\r\n    height: auto;\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>CSS Layout Float<\/h2>\r\n<p>In this example, we have created a header, two columns\/boxes and a footer. On smaller screens, the columns will stack on top of each other.<\/p>\r\n<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)<\/p>\r\n\r\n<header>\r\n  <h2>Cities<\/h2>\r\n<\/header>\r\n\r\n<section>\r\n  <nav>\r\n    <ul>\r\n      <li><a href=\"#\">London<\/a><\/li>\r\n      <li><a href=\"#\">Paris<\/a><\/li>\r\n      <li><a href=\"#\">Tokyo<\/a><\/li>\r\n    <\/ul>\r\n  <\/nav>\r\n  \r\n  <article>\r\n    <h1>London<\/h1>\r\n    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.<\/p>\r\n    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.<\/p>\r\n  <\/article>\r\n<\/section>\r\n\r\n<footer>\r\n  <p>Footer<\/p>\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Confira um layout padr\u00e3o<\/p>\n
\"\"<\/p>\n
<header><\/code> – Define um cabe\u00e7alho para um documento ou uma se\u00e7\u00e3o
\n<nav><\/code> – Define um conjunto de links de navega\u00e7\u00e3o
\n<section><\/code> – Define uma se\u00e7\u00e3o em um documento
\n<article><\/code> – Define um conte\u00fado independente e independente
\n<aside><\/code> – Define o conte\u00fado al\u00e9m do conte\u00fado (como uma barra lateral)
\n<footer><\/code> – Define um rodap\u00e9 para um documento ou uma se\u00e7\u00e3o
\n<details><\/code> – Define detalhes adicionais que o usu\u00e1rio pode abrir e fechar sob demanda
\n<summary><\/code>– Define um cabe\u00e7alho para o <details>elemento<\/p>\n
 <\/p>\n
Layout de flutuador CSS<\/strong>
\n\u00c9 comum fazer layouts da Web inteiros usando a float propriedade CSS . O float \u00e9 f\u00e1cil de aprender – voc\u00ea s\u00f3 precisa se lembrar de como as propriedades floate clear funcionam.<\/p>\n
Desvantagens: Os elementos flutuantes est\u00e3o vinculados ao fluxo do documento, o que pode prejudicar a flexibilidade.<\/em><\/p>\n
Result Size: 625 x 470\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Template<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\u200b\r\nbody {\r\n  font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\u200b\r\n\/* Style the header *\/\r\nheader {\r\n  background-color: #666;\r\n  padding: 30px;\r\n  text-align: center;\r\n  font-size: 35px;\r\n  color: white;\r\n}\r\n\u200b\r\n\/* Create two columns\/boxes that floats next to each other *\/\r\nnav {\r\n  float: left;\r\n  width: 30%;\r\n  height: 300px; \/* only for demonstration, should be removed *\/\r\n  background: #ccc;\r\n  padding: 20px;\r\n}\r\n\u200b\r\n\/* Style the list inside the menu *\/\r\nnav ul {\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Layout do CSS Flexbox<\/strong>
\nFlexbox \u00e9 um novo modo de layout no CSS3.<\/p>\n
O uso do flexbox garante que os elementos se comportem de maneira previs\u00edvel quando o layout da p\u00e1gina deve acomodar diferentes tamanhos de tela e diferentes dispositivos de exibi\u00e7\u00e3o.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Template<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n\/* Style the header *\/\r\nheader {\r\n  background-color: #666;\r\n  padding: 30px;\r\n  text-align: center;\r\n  font-size: 35px;\r\n  color: white;\r\n}\r\n\r\n\/* Container for flexboxes *\/\r\nsection {\r\n  display: -webkit-flex;\r\n  display: flex;\r\n}\r\n\r\n\/* Style the navigation menu *\/\r\nnav {\r\n  -webkit-flex: 1;\r\n  -ms-flex: 1;\r\n  flex: 1;\r\n  background: #ccc;\r\n  padding: 20px;\r\n}\r\n\r\n\/* Style the list inside the menu *\/\r\nnav ul {\r\n  list-style-type: none;\r\n  padding: 0;\r\n}\r\n\r\n\/* Style the content *\/\r\narticle {\r\n  -webkit-flex: 3;\r\n  -ms-flex: 3;\r\n  flex: 3;\r\n  background-color: #f1f1f1;\r\n  padding: 10px;\r\n}\r\n\r\n\/* Style the footer *\/\r\nfooter {\r\n  background-color: #777;\r\n  padding: 10px;\r\n  text-align: center;\r\n  color: white;\r\n}\r\n\r\n\/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other *\/\r\n@media (max-width: 600px) {\r\n  section {\r\n    -webkit-flex-direction: column;\r\n    flex-direction: column;\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>CSS Layout Flexbox<\/h2>\r\n<p>In this example, we have created a header, two columns\/boxes and a footer. On smaller screens, the columns will stack on top of each other.<\/p>\r\n<p>Resize the browser window to see the responsive effect.<\/p>\r\n<p><strong>Note:<\/strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.<\/p>\r\n\r\n<header>\r\n  <h2>Cities<\/h2>\r\n<\/header>\r\n\r\n<section>\r\n  <nav>\r\n    <ul>\r\n      <li><a href=\"#\">London<\/a><\/li>\r\n      <li><a href=\"#\">Paris<\/a><\/li>\r\n      <li><a href=\"#\">Tokyo<\/a><\/li>\r\n    <\/ul>\r\n  <\/nav>\r\n  \r\n  <article>\r\n    <h1>London<\/h1>\r\n    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.<\/p>\r\n    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.<\/p>\r\n  <\/article>\r\n<\/section>\r\n\r\n<footer>\r\n  <p>Footer<\/p>\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n