求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

Positionを使ったレイアウト

f:id:yachin29:20150304131112p:plain

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Positionでのレイアウト</title>
<link href="css/style2.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<h1>四季の花</h1>
<ul id="nav">
<li id="sp"><a href="#">spring</a></li>
<li id="su"><a href="#">summer</a></li>
<li id="fa"><a href="#">fall</a></li>
<li id="wi"><a href="#">winter</a></li>
</ul>
</div><!--/header-->
<div id="wrap">
<ul>
<li id="ph01"><img src="img/01.JPG" alt="花"></li>
<li id="ph02"><img src="img/02.JPG" alt="花"></li>
<li id="ph03"><img src="img/03.JPG" alt="花"></li>
<li id="ph04"><img src="img/04.JPG" alt="花"></li>
<li id="ph05"><img src="img/05.JPG" alt="花"></li>
<li id="ph06"><img src="img/06.JPG" alt="花"></li>
<li id="ph07"><img src="img/07.JPG" alt="ひまわり"></li>
</ul>
</div><!--/wrap-->
</div><!--/container-->
</body>
</html>