-float-L1-
-HTML-
<body> <div class="clearfix"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Information</a></li> <li><a href="#">Map</a></li> </ul> <p><img src="images/Pex416118.jpg" alt=""></p> </div> </body>
-CSS-
* { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; } body { background: powderblue url(images/Pattern1.png); background-size: 30px; } div { width: 750px; margin: 20px auto 0; } /*left設定*/ ul { width: 200px; padding: 10px 0 10px 10px; background: lightgray; list-style: none; float: left; } li:not(:last-of-type) { margin-bottom: 5px; } a { display: block; background: lavender; line-height: 70px; text-align: center; text-decoration: none; color: darkslategray; } a:hover { background: midnightblue; color: lavender; } /*right設定*/ p { width: 500px; padding: 20px 20px; background: midnightblue; float: left; } img { width: 100%; height: 350px; vertical-align: bottom; }