Basic HTML5
Publié le 14 juillet 2015 | Par adminblog | Commenter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <script src="js/scripts.js"></script> </body> </html> |
REPONSIVE
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title> Demo | Responsive Web</title> <meta name="viewport" content="width=device-width, minimumscale= 1.0, maximum-scale=1.0" /> <link href="styles/main.css" type="text/css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type='text/javascript' src='scripts/respond.min.js'></script> </head> <body> <div id="wrapper"> <header> <nav id="skipTo"> <ul> <li> <a href="#main" title="Skip to Main Content">Skip to Main Content</a> </li> </ul> </nav> <h1>Demo</h1> <nav> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Work">Work</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </nav> <div id="banner"> <img src="images/kaws.jpg" alt="banner" /> </div> </header> <section id="main"> <h1>Main section</h1> <p>Lorem…p> </section> <aside> <h1>Sub-section</h1> <p>Lorem …p> </aside> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
float: left; display: block; background: url(../images/demo.gif) 0 0 no-repeat; text-indent: -9999px; } /* Nav */ header nav { float: right; margin-top: 40px; } header nav li { display: inline; margin-left: 15px; } #skipTo { display: none; } #skipTo li { background: #b1fffc; } /* Banner */ #banner { float: left; margin-bottom: 15px; width: 100%; } #banner img { width: 100%; } /* Structure */ #wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; } #main { width: 60%; margin-right: 5%; float: left; } /* Media Queries */ @media screen and (max-width: 480px) { #skipTo { display: block; } header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; } header nav li { margin: 0; background: #efefef; display: block; margin-bottom: 3px; } header nav a { display: block; padding: 10px; text-align: center; } } |
This Post Has Been Viewed 67 Times
Commentaires récents