{"id":741,"date":"2020-07-03T23:47:06","date_gmt":"2020-07-04T02:47:06","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=741"},"modified":"2022-12-09T08:22:44","modified_gmt":"2022-12-09T11:22:44","slug":"layout-do-site-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-do-site-css\/","title":{"rendered":"Layout do site CSS"},"content":{"rendered":"

Um site geralmente \u00e9 dividido em cabe\u00e7alhos, menus, conte\u00fado e rodap\u00e9:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Existem v\u00e1rios designs de layout diferentes para voc\u00ea escolher. No entanto, a estrutura acima \u00e9 uma das mais comuns e analisaremos mais de perto neste tutorial.<\/p>\n

Cabe\u00e7alho<\/strong><\/p>\n

Um cabe\u00e7alho geralmente est\u00e1 localizado na parte superior do site (ou logo abaixo de um menu de navega\u00e7\u00e3o superior). Muitas vezes, cont\u00e9m um logotipo ou o nome do site:<\/p>\n

.header\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0#F1F1F1;<\/span><\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\npadding:<\/span>\u00a020px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Website Layout<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\nbody {\r\n  margin: 0;\r\n}\r\n\r\n\/* Style the header *\/\r\n.header {\r\n  background-color: #f1f1f1;\r\n  padding: 20px;\r\n  text-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h1>Header<\/h1>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Barra de navega\u00e7\u00e3o
\nUma barra de navega\u00e7\u00e3o cont\u00e9m uma lista de links para ajudar os visitantes a navegar pelo seu site:<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Website Layout<\/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  margin: 0;\r\n}\r\n\r\n\/* Style the header *\/\r\n.header {\r\n  background-color: #f1f1f1;\r\n  padding: 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* Style the top navigation bar *\/\r\n.topnav {\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\n\/* Style the topnav links *\/\r\n.topnav a {\r\n  float: left;\r\n  display: block;\r\n  color: #f2f2f2;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Change color on hover *\/\r\n.topnav a:hover {\r\n  background-color: #ddd;\r\n  color: black;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h1>Header<\/h1>\r\n<\/div>\r\n\r\n<div class=\"topnav\">\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
Conte\u00fado<\/strong>
\nO layout desta se\u00e7\u00e3o geralmente depende dos usu\u00e1rios de destino. O layout mais comum \u00e9 um (ou combin\u00e1-los) dos seguintes:<\/p>\n
1 coluna (geralmente usada para navegadores de celular)
\n2 colunas (geralmente usado para tablets e laptops)
\nLayout de 3 colunas (usado apenas para desktops)<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Website Layout<\/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  margin: 0;\r\n}\r\n\r\n\/* Style the header *\/\r\n.header {\r\n  background-color: #f1f1f1;\r\n  padding: 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* Style the top navigation bar *\/\r\n.topnav {\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\n\/* Style the topnav links *\/\r\n.topnav a {\r\n  float: left;\r\n  display: block;\r\n  color: #f2f2f2;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Change color on hover *\/\r\n.topnav a:hover {\r\n  background-color: #ddd;\r\n  color: black;\r\n}\r\n\r\n\/* Create three equal columns that floats next to each other *\/\r\n.column {\r\n  float: left;\r\n  width: 33.33%;\r\n  padding: 15px;\r\n}\r\n\r\n\/* Clear floats after the columns *\/\r\n.row:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n\/* Responsive layout - makes the three columns stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width:600px) {\r\n  .column {\r\n    width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h1>Header<\/h1>\r\n  <p>Resize the browser window to see the responsive effect.<\/p>\r\n<\/div>\r\n\r\n<div class=\"topnav\">\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"column\">\r\n    <h2>Column<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"column\">\r\n    <h2>Column<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"column\">\r\n    <h2>Column<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Colunas desiguais<\/strong><\/p>\n
O conte\u00fado principal \u00e9 a parte maior e mais importante do seu site.<\/p>\n
\u00c9 comum com larguras desiguais de colunas, para que a maior parte do espa\u00e7o seja reservada para o conte\u00fado principal. O conte\u00fado lateral (se houver) \u00e9 frequentemente usado como uma navega\u00e7\u00e3o alternativa ou para especificar informa\u00e7\u00f5es relevantes para o conte\u00fado principal. Altere as larguras como desejar, mas lembre-se de que deve somar 100% no total:<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Website Layout<\/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  margin: 0;\r\n}\r\n\r\n\/* Style the header *\/\r\n.header {\r\n  background-color: #f1f1f1;\r\n  padding: 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* Style the top navigation bar *\/\r\n.topnav {\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\n\/* Style the topnav links *\/\r\n.topnav a {\r\n  float: left;\r\n  display: block;\r\n  color: #f2f2f2;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Change color on hover *\/\r\n.topnav a:hover {\r\n  background-color: #ddd;\r\n  color: black;\r\n}\r\n\r\n\/* Create three unequal columns that floats next to each other *\/\r\n.column {\r\n  float: left;\r\n  padding: 10px;\r\n}\r\n\r\n\/* Left and right column *\/\r\n.column.side {\r\n  width: 25%;\r\n}\r\n\r\n\/* Middle column *\/\r\n.column.middle {\r\n  width: 50%;\r\n}\r\n\r\n\/* Clear floats after the columns *\/\r\n.row:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n\/* Responsive layout - makes the three columns stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width: 600px) {\r\n  .column.side, .column.middle {\r\n    width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h1>Header<\/h1>\r\n  <p>Resize the browser window to see the responsive effect.<\/p>\r\n<\/div>\r\n\r\n<div class=\"topnav\">\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"column side\">\r\n    <h2>Side<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"column middle\">\r\n    <h2>Main Content<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"column side\">\r\n    <h2>Side<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..<\/p>\r\n  <\/div>\r\n<\/div>\r\n  \r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n
Rodap\u00e9<\/strong><\/p>\n
\"\"<\/p>\n
.footer\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0#F1F1F1;<\/span><\/span>
\ntext-align:<\/span>\u00a0center;<\/span><\/span>
\npadding:<\/span>\u00a010px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
O rodap\u00e9 \u00e9 colocado na parte inferior da sua p\u00e1gina. Muitas vezes, cont\u00e9m informa\u00e7\u00f5es como direitos autorais e informa\u00e7\u00f5es de contato:<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>CSS Website Layout<\/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  margin: 0;\r\n}\r\n\r\n\/* Style the header *\/\r\n.header {\r\n  background-color: #f1f1f1;\r\n  padding: 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* Style the top navigation bar *\/\r\n.topnav {\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\n\/* Style the topnav links *\/\r\n.topnav a {\r\n  float: left;\r\n  display: block;\r\n  color: #f2f2f2;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Change color on hover *\/\r\n.topnav a:hover {\r\n  background-color: #ddd;\r\n  color: black;\r\n}\r\n\r\n\/* Create three unequal columns that floats next to each other *\/\r\n.column {\r\n  float: left;\r\n  padding: 10px;\r\n}\r\n\r\n\/* Left and right column *\/\r\n.column.side {\r\n  width: 25%;\r\n}\r\n\r\n\/* Middle column *\/\r\n.column.middle {\r\n  width: 50%;\r\n}\r\n\r\n\/* Clear floats after the columns *\/\r\n.row:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n\/* Responsive layout - makes the three columns stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width: 600px) {\r\n  .column.side, .column.middle {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n\/* Style the footer *\/\r\n.footer {\r\n  background-color: #f1f1f1;\r\n  padding: 10px;\r\n  text-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h1>Header<\/h1>\r\n  <p>Resize the browser window to see the responsive effect.<\/p>\r\n<\/div>\r\n\r\n<div class=\"topnav\">\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"column side\">\r\n    <h2>Side<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"column middle\">\r\n    <h2>Main Content<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.<\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"column side\">\r\n    <h2>Side<\/h2>\r\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..<\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"footer\">\r\n  <p>Footer<\/p>\r\n<\/div>\r\n  \r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Agora teste um layout completo<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: Arial;\r\n  padding: 10px;\r\n  background: #f1f1f1;\r\n}\r\n\r\n\/* Header\/Blog Title *\/\r\n.header {\r\n  padding: 30px;\r\n  text-align: center;\r\n  background: white;\r\n}\r\n\r\n.header h1 {\r\n  font-size: 50px;\r\n}\r\n\r\n\/* Style the top navigation bar *\/\r\n.topnav {\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\n\/* Style the topnav links *\/\r\n.topnav a {\r\n  float: left;\r\n  display: block;\r\n  color: #f2f2f2;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Change color on hover *\/\r\n.topnav a:hover {\r\n  background-color: #ddd;\r\n  color: black;\r\n}\r\n\r\n\/* Create two unequal columns that floats next to each other *\/\r\n\/* Left column *\/\r\n.leftcolumn {   \r\n  float: left;\r\n  width: 75%;\r\n}\r\n\r\n\/* Right column *\/\r\n.rightcolumn {\r\n  float: left;\r\n  width: 25%;\r\n  background-color: #f1f1f1;\r\n  padding-left: 20px;\r\n}\r\n\r\n\/* Fake image *\/\r\n.fakeimg {\r\n  background-color: #aaa;\r\n  width: 100%;\r\n  padding: 20px;\r\n}\r\n\r\n\/* Add a card effect for articles *\/\r\n.card {\r\n  background-color: white;\r\n  padding: 20px;\r\n  margin-top: 20px;\r\n}\r\n\r\n\/* Clear floats after the columns *\/\r\n.row:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n\/* Footer *\/\r\n.footer {\r\n  padding: 20px;\r\n  text-align: center;\r\n  background: #ddd;\r\n  margin-top: 20px;\r\n}\r\n\r\n\/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width: 800px) {\r\n  .leftcolumn, .rightcolumn {   \r\n    width: 100%;\r\n    padding: 0;\r\n  }\r\n}\r\n\r\n\/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width: 400px) {\r\n  .topnav a {\r\n    float: none;\r\n    width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h1>My Website<\/h1>\r\n  <p>Resize the browser window to see the effect.<\/p>\r\n<\/div>\r\n\r\n<div class=\"topnav\">\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\">Link<\/a>\r\n  <a href=\"#\" style=\"float:right\">Link<\/a>\r\n<\/div>\r\n\r\n<div class=\"row\">\r\n  <div class=\"leftcolumn\">\r\n    <div class=\"card\">\r\n      <h2>TITLE HEADING<\/h2>\r\n      <h5>Title description, Dec 7, 2017<\/h5>\r\n      <div class=\"fakeimg\" style=\"height:200px;\">Image<\/div>\r\n      <p>Some text..<\/p>\r\n      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.<\/p>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <h2>TITLE HEADING<\/h2>\r\n      <h5>Title description, Sep 2, 2017<\/h5>\r\n      <div class=\"fakeimg\" style=\"height:200px;\">Image<\/div>\r\n      <p>Some text..<\/p>\r\n      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"rightcolumn\">\r\n    <div class=\"card\">\r\n      <h2>About Me<\/h2>\r\n      <div class=\"fakeimg\" style=\"height:100px;\">Image<\/div>\r\n      <p>Some text about me in culpa qui officia deserunt mollit anim..<\/p>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <h3>Popular Post<\/h3>\r\n      <div class=\"fakeimg\"><p>Image<\/p><\/div>\r\n      <div class=\"fakeimg\"><p>Image<\/p><\/div>\r\n      <div class=\"fakeimg\"><p>Image<\/p><\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <h3>Follow Me<\/h3>\r\n      <p>Some text..<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"footer\">\r\n  <h2>Footer<\/h2>\r\n<\/div>\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