Friday, January 18, 2013
A simple HTML5 layout demo
In HTML5, we have header, footer, article, address and nav tags. Below is a demo using nav for menu, also using header and footer tags. We also need CSS to define the layout further. This demo can be used as a HTML5 layout template.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Jiansen html5 header</title>
<meta name="description" content="" />
<meta name="author" content="jiansen" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of
your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style>
header, article, footer, address, #content {
display: block;
background: lightblue;
margin: 0 auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
header{
margin: 0 auto;
padding: 0.5em 0 0.5em 0;
text-align: center;
color:red;
width: 800px;
}
nav{
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul {list-style: none; margin: 0 auto; width: 800px;}
nav li {float: left; display: inline; margin: 0;}
nav a:link, nav a:visited {
color: white;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
nav a:hover {
color: red;
}
#content {
background: lightblue;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
min-height: 500px;
}
footer{
margin: 0 auto;
text-align: center;
padding: 0.1em 0 0.1em 0;
color:black;
width: 800px;
}
</style>
</head>
<body>
<div>
<header>
<h1>Jiansen HTML5 Layout Template</h1>
</header>
<nav><ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MY PROFILE</a></li>
<li><a href="#">MY BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul></nav>
<div id="content">
This is a simple HTML5 layout template using HTML5 header, nav and footer tag.
</div>
<footer>
<p>
© Copyright by Jiansen Lu
</p>
</footer>
</div>
</body>
</html>
Reference:
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
Result:
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment