画面イメージ
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test laylout</title>
<style type="text/css">
.menu {
font-size: 1em;
}
.menu div {
line-height: 1.5;
float: left;
width: 80px;
height: 80px;
text-align: center;
margin-left: 3px;
margin-top: 3px;
padding: 10px;
font-family: 'メイリオ';
}
#menu01
{
background-color: #E51400;
}
#menu02
{
background-color: #00CC00;
}
#menu03
{
background-color: #045097;
}
#menu04
{
background-color: #F5B915;
}
#menu05
{
background-color: #5EA8DE;
}
#menu06
{
background-color: #7B4F9D;
}
#menu07
{
background-color: #ED1C80;
}
#menu08
{
background-color: #464646;
}
#menu09
{
background-color: #F18A2B;
}
#menu10
{
background-color: #ED7099;
}
#menu11
{
background-color: #000000;
}
#menu12
{
background-color: #AE4D20;
}
#menu13
{
background-color: #A0C31F;
}
#menu14
{
background-color: #1C8C3C;
}
#menu15
{
background-color: #3563AE;
}
#menu16
{
background-color: #6D0087;
}
.menu div a
{
color: #ffffff;
text-decoration: none;
}
.menu div a:hover
{
color: #ffffff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="menu">
<div id="menu01"><a href="#">Menu 01</a></div>
<div id="menu02"><a href="#">Menu 02</a></div>
<div id="menu03"><a href="#">Menu 03</a></div>
<div id="menu04"><a href="#">Menu 04</a></div>
<div id="menu05"><a href="#">Menu 05</a></div>
<div id="menu06"><a href="#">Menu 06</a></div>
<div id="menu07"><a href="#">Menu 07</a></div>
<div id="menu08"><a href="#">Menu 08</a></div>
<div id="menu09"><a href="#">Menu 09</a></div>
<div id="menu10"><a href="#">Menu 10</a></div>
<div id="menu11"><a href="#">Menu 11</a></div>
<div id="menu12"><a href="#">Menu 12</a></div>
<div id="menu13"><a href="#">Menu 13</a></div>
<div id="menu14"><a href="#">Menu 14</a></div>
<div id="menu15"><a href="#">Menu 15</a></div>
<div id="menu16"><a href="#">Menu 16</a></div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿