HTML Layout

HTML Layouts
<!DOCTYPE html> text-decoration: none;

<html> }
<head>
<style> article {
div.container { margin-left: 170px;
width: 100%; border-left: 1px solid gray;
border: 1px solid gray; padding: 1em;
} overflow: hidden;
}
header, footer { </style>
padding: 1em; </head>
color: white; <body>
background-color: black;
clear: left; <div class="container">
text-align: center;
} <header>
<h1>City Gallery</h1>
nav { </header>
float: left;
max-width: 160px; <nav>
margin: 0; <ul>
padding: 1em; <li><a href="#">London</a></li>
} <li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
nav ul { </ul>
list-style-type: none; </nav>
padding: 0;
} <article>
<h1>London</h1>
nav ul a {
1
<p>London is the capital city of England. It is the
most populous city in the United Kingdom, with <footer>Copyright ©
a metropolitan area of over 13 million W3Schools.com</footer>
inhabitants.</p>
<p>Standing on the River Thames, London has </div>
been a major settlement for two millennia, its
history going back to its founding by the Romans, </body>
who named it Londinium.</p> </html>
</article>
HTML Layout Elements

Websites often display content in multiple columns (like a magazine or
newspaper).
HTML5 offers new semantic elements that define the different parts of a web
page:
HTML Layout Techniques

There are four different ways to create multicolumn layouts. Each way has its
pros and cons:
 HTML tables
 CSS float property
 CSS framework
 CSS flexbox
Which One to Choose?

HTML Tables
The <table> element was not designed to be a layout tool! The purpose of the
<table> element is to display tabular data. So, do not use tables for your page
layout! They will bring a mess into your code. And imagine how hard it will be to
redesign your site after a couple of months.
Tip: Do NOT use tables for your page layout!
2
CSS Frameworks
If you want to create your layout fast, you can use a framework,
like W3.CSS or Bootstrap.
CSS Floats
It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow, which
may harm the flexibility. Learn more about float in our CSS Float and
Clear chapter.
<!DOCTYPE html> padding: 1em;

<html> }
<head>
<style> nav ul {
div.container { list-style-type: none;
width: 100%; padding: 0;
border: 1px solid gray; }
}
nav ul a {
header, footer { text-decoration: none;
padding: 1em; }
color: white;
background-color: black; article {
clear: left; margin-left: 170px;
text-align: center; border-left: 1px solid gray;
} padding: 1em;
overflow: hidden;
nav { }
float: left; </style>
max-width: 160px; </head>
margin: 0; <body>
3
<div class="container"> most populous city in the United Kingdom, with
a metropolitan area of over 13 million
<header> inhabitants.</p>
<h1>City Gallery</h1> <p>Standing on the River Thames, London has
</header> been a major settlement for two millennia, its
history going back to its founding by the Romans,
<nav> who named it Londinium.</p>
<ul> </article>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li> <footer>Copyright ©
<li><a href="#">Tokyo</a></li> W3Schools.com</footer>
</ul>
</nav> </div>
<article> </body>
<h1>London</h1> </html>
CSS Flexbox
Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout
must accommodate different screen sizes and different display devices.
Disadvantages: Does not work in IE10 and earlier.
Learn more about flexbox in our CSS Flexbox chapter.
<!DOCTYPE html> text-align: center;

<html> }
<head>
<style> .flex-container > * {
.flex-container { padding: 15px;
display: -webkit-flex; -webkit-flex: 1 100%;
display: flex; flex: 1 100%;
-webkit-flex-flow: row wrap; }
flex-flow: row wrap;
4
.article { its history going back to its founding by the
text-align: left; Romans, who named it Londinium.</p>
} <p><strong>Resize this page to see that what
happens!</strong></p>
header {background: black;color:white;} </article>
footer {background: #aaa;color:white;}
.nav {background:#eee;} <footer>Copyright ©
W3Schools.com</footer>
.nav ul { </div>
list-style-type: none;
padding: 0; </body>
} </html>
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {

.nav {text-align:left;-webkit-flex: 1 auto;flex:1
auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-
order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>
<div class="flex-container">
<header>
<h1>City Gallery</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article class="article">
<h1>London</h1>
most populous city in the United Kingdom,
with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has
been a major settlement for two millennia,

HTML Layout

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Layout

Caricato da

Copyright:

Formati disponibili

HTML Layouts

<!DOCTYPE html> text-decoration: none;

HTML Layout Elements

HTML Layout Techniques

Which One to Choose?

<!DOCTYPE html> padding: 1em;

<!DOCTYPE html> text-align: center;

@media all and (min-width: 768px) {

Potrebbero piacerti anche