Sunday, 20 September 2015

CSS Layout

CSS Layout

CSS layout is easy to design. We can use CSS layout to design our web page such as home page, contact us, about us etc.
There are 3 ways to design layout of a web page:
  1. HTML Div with CSS: fast and widely used now.
  2. HTML Table: slow and less preferred.
  3. HTML Frameset: deprecated now.
A CSS layout can have header, footer, left pane, right pane and body part. Let's see a simple example of CSS layout.

CSS layout example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. .header{margin:-8px -8px 0px;background:linear-gradient(blue,skyblue);color:white;text-align:center;padding:10px;}  
  6. .container{width:100%}  
  7. .left{width:15%;float:left;}  
  8. .body{width:65%;float:left;background-color:pink;padding:5px;}  
  9. .right{width:15%;float:left;}  
  10. .footer{margin:-8px;clear:both;background:linear-gradient(blue,skyblue);color:white;text-align:center;padding:10px;}  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <div class="header"><h2>JavaTpoint</h2></div>  
  15.   
  16. <div class="container">  
  17. <div class="left">  
  18. <p>Left Page</p>  
  19. </div>  
  20. <div class="body">  
  21. <h1>Body Page</h1>  
  22. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  23. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  24. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  25. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>  
  26. <p>Page Content goes here</p>  
  27. </div>  
  28. <div class="right">  
  29. <p>Right Page</p>  
  30. </div>  
  31. </div>  
  32.   
  33. <div class="footer">  
  34. <p>Footer</p>  
  35. </div>  
  36.   
  37. </body>  
  38. </html>  

Output:

JavaTpoint

Left Page

Body Page

Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Page Content goes here
Right Page
Footer



Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)