Frontend webkode er som regel ikke noget jeg gør friviligt, men når det sker er det rart at have en template at starte ud fra, og endelig har jeg taget mig sammen til at lavet et nyt opdateret template.
Dette blogindlæg er egentlig mest lavet for min egen skyld, men det kan selvfølgelig også hjælpe andre.
Fremgangsmåde: (download html5.tgz, https://www.unifix.org/files/html5.tar)
1) Opret index.html og put nedstående kode i den
2) Opret style.css og tag indholdet mellem <style></style> tag’et og lægi style.css
3) Hent reset stylesheet ( http://meyerweb.com/eric/tools/css/reset/ ), og put det i reset.css
4) Inkluder reset.css og style.css i index.html med:
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css">
5) Start coding! 🙂
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Template</title>
<style>
@media (min-width: 600px) and (max-width: 950px) {
#body { font-size: 50px; }
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#page {
min-height: 100%;
position: relative;
background-color: #bbb;
}
#header {
border: 1px solid red;
background-color: red;
}
#body {
padding-bottom: 100px;
background-color: green;
}
#footer {
width: 100%;
height: 100px;
position: absolute;
background-color: blue;
bottom: 0;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
header
</div>
<div id="body">
body
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>