HTML
<html>
<meta charset="utf-8">
<title>HEADER_FOOTER 100</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</html>
<body>
<header class="clearfix">
<!-- header code -->
</header>
<div class="container">
<section class="visual">
<!-- visual code -->
</section>
<section class="contents">
<div class="notice">
<!-- notice code -->
</div>
<div class="banner">
<!-- banner code -->
</section>
</div>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</body>
CSS
/* header */
header { width: 100%; height: 100px; background:#EDBBBB; border:3px solid red;}
header .inner { width:1200px; height: 100px; margin: 0 auto; background: #EF9090;}
/* container */
.container { width: 1200px; height: 500px;margin: 0 auto;}
/* visual */
.visual { overflow: hidden; position: relative; width: 100%; height: 300px; background:#F69393; border:3px solid red;}
/* contents */
.contents { height: 200px; background:#F69393;}
/* tab content */
.contents .tab_content { float: left; width: 33.333%; height: 200px; padding: 10px; background:#F69393; border:3px solid red;}
/* banner */
.contents .banner { float: left; width: 33.333%; height: 200px; padding:15px; background:#F69393; border:3px solid red;}
/* link */
.contents .link { float: left; width: 33.333%; height: 200px; padding:15px; background:#F69393; border:3px solid red; }
/* footer */
footer { width:100%; height: 100px; background:#EDBBBB; border:3px solid red;}
footer .inner { width:1200px; height: 100px; margin: 0 auto; background: #EF9090;}
