index.html
<body> <div class="container"> <header></header> <nav class="g-nav"> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> </ul> </nav> <div class="wrapper"> <main></main> <div class="sub"></div> </div><!-- /.wrapper --> <footer></footer> </div><!-- /.container --> </body>
style.css
@charset "utf-8"; *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; } body{ background-color: #dedebd; } .container{ width: 980px; background-color: #FFF; box-sizing: border-box; margin: 0 auto; padding: 10px; } header{ height: 350px; background-color: crimson; margin-bottom: 10px; } .g-nav{ height: 50px; background-color: darkseagreen; margin-bottom: 10px; } .g-nav>ul{ display: flex; } .g-nav li{ width: 25%; } .g-nav a{ display: block; text-align: center; line-height: 50px; color: #222; border-right: 1px solid #222; } .g-nav li:last-of-type>a{ border-right: 0; } .g-nav a:hover{ background-color: #68603b; color: #FFF; } .wrapper{ display: flex; justify-content: space-between; margin-bottom: 10px; } main{ width: 700px; height: 400px; background-color: darkgray; } .sub{ width: 250px; height: 400px; background-color: darkcyan; } footer{ height: 100px; background-color: chartreuse; }
