Welcome to My HTML5 Tutorial-2!
If you have already studied my HTML5 Tutorial-1 then this tutorial is nothing complex. We will use the codes from the previous tutorial to continue our HTML5 tutorial. In this tutorial I have add a new <div> tag to incorporate flexible box model. This flexible box model will give your website a kind of elastic property. Flexible box model is supported by most the latest featured browsers like Google Chrome and Microsoft Edge. For this flexible box model your website will get some flexibility to get the shape of your current window and it will shrink and enlarge its shape towards your defined direction.
tutorial.html
|
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title>Luin's Website</title>
- <link rel="stylesheet" href="main.css">
- </head>
- <body>
- <div id="big_wrapper">
- <header id="top_header">
- <h1>Luin's HTML5 Tutorial</h1>
- </header>
- <nav id="top_menu">
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </nav>
- <div id="new_div">
- <section id="main_section">
- <article>
- <header>
- <h2>The First Article</h2>
- </header>
- This is the very first article of my website. This article is just a demo of articles I am going to post in future.
- <footer>
- Written by-Mohammad Luin | Date-15/12/15
- </footer>
- </article>
- <article>
- <header>
- <h2>The Second Article</h2>
- </header>
- This is the very second article of my website. This article is just a demo of articles I am going to post in future.
- <footer>
- Written by-Mohammad Luin | Date-15/12/15
- </footer>
- </article>
- </section>
- <aside id="recent_post">
- <h2>Recent Posts</h2>
- The First Article <br/>
- The Second Article
- </aside>
- </div>
- <footer id="the_footer">
- Copyright Luin 2015
- </footer>
- </div>
- </body>
- </html>
20. Introducing new <div> tag for creating flexible box.
46. Closing the new <div> tag.
main.css
|
*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}
header,
section, footer, aside, article ,nav, hgroup{
display: block;
}
body{
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box; /* Display type to insert flexible boxes */
-webkit-box-orient: vertical;
-webkit-box-flex: 1; /* This property means the box is flexible and if we would use '0' instead of '1' then it would be fixed */
}
#top_header{
background: yellow;
border: solid 3px black;
padding: 20px;
}
#top_menu{
border: red;
background: blue;
color: white;
}
#top_menu
li{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#main_section{
border: 1px solid red;
-webkit-box-flex: 1;
margin:20px;
padding: 20px;
}
article{
background: #B6B3B2; /* Background color of
each article */
border: 1px solid red; /* Article border size and color */
padding: 20px;
margin-bottom: 15px;
}
#recent_post{
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid green;
}
0 comments:
Post a Comment