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.
<!DOCTYPE html>
<html lang="en">
        <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" />
            header,  article, footer, address, #content {
              display: block;
               background: lightblue;
               margin: 0 auto;
               border-radius: 10px;
             -moz-border-radius: 10px;
             -webkit-border-radius: 10px;
             margin: 0 auto;
            padding: 0.5em 0 0.5em 0;
             text-align: center;
             width: 800px;
             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;
             margin: 0 auto;
             text-align: center;
             padding: 0.1em 0 0.1em 0;
             width: 800px;

                <h1>Jiansen HTML5 Layout Template</h1>
        <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>
            <div id="content">
             This is a simple HTML5 layout template using HTML5 header, nav and footer tag.

                    &copy; Copyright  by Jiansen Lu


No comments:

Post a Comment