レイアウト

自習

おかず素材は、色々と練習になりそうだ。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>おかず部品</title>
</head>
<link rel="stylesheet" href="small.css">

<body>
<container>

<div class="block">
<div class="box">
<h1><img src="images/logo01.png" width="300" height="300"></h1>
</div>

<div class="box">
<nav>
<ul>
<li><img src="images/nav01_01.png" width="140" height="140"></li>
<li><img src="images/nav02_01.png" width="140" height="140"></li>
<li><img src="images/nav03_01.png" width="140" height="140"></li>
<li><img src="images/nav04_01.png" width="140" height="139"></li>
</ul>
</nav>
</div>

</div>

<div class="block">
<div class="box">
<p><img src="images/ph26_l.jpg" width="300" height="300"></p>
</div>

<div class="box">
<ul>
<li><img src="images/ph23_my.jpg" width="300" height="140"></li>
<li><img src="images/ph28_s.jpg" width="140" height="140"></li>
<li><img src="images/ph05_s.jpg" width="140" height="140"></li>


</container>
</body>
</html>

@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
	img:0;
}
container{
	margin:0 auto;
}
ul{
	list-style-type:none;
}

.block{
	float:left;
	margin:10px 0 0 10px;
}
	
.box{
	width:320px;
	height:320px;
	background-color:#F9C;
	padding:20px;
	margin-bottom:10px;
}
li{
	float:left;
	padding:10px;
}