■ - Webマスターへの道

完成しました。PHOTOSHOPで背景画像を色相補正して明るめにしました。ロゴマークはイマイチかな？
html-code(CSSエンベッド)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Horizontal grobalnavi premium 2012</title>
<style type="text/css">
<!--
body {
  background-color:white;/*白*/
  background-image:url(images/wave01.jpg);
}
#container{
  width:900px;
  height:1000px;
  margin:0 auto;
  background-color:rgba(224,255,255,0.6);
  box-shadow:5px 5px 5px lightyellow;/*-----ぼかしの指定-----*/
	}
#header{
	width:900px;
	height:110px;
	padding-top:10px;
	line-height:10px;
	text-align:center;
	font-size:1.0em;
	font-weight:bold;
	vertical-align:center;
	position:relative;
	background-color:aqua;
	
	}
#logo{
	width:56px;
	height:70px;
	position:absolute;
	top:30px;
	left:820px;
	background-image:url(images/css02.png);
	}	

#box18{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box19{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box20{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box21{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box22{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box23{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box24{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box25{
	width:900px;
    height:60px;
	margin:30px;	
	}	
#box26{
	width:900px;
    height:60px;
	margin:30px;	
	}	
	
/*------------------------------navi18start*/
.navi18 ul {
  width: 900px;	
  margin: 0px;
  padding:20px 10px;
  list-style-type: none; 
}
.navi18 li {
  float: left;
  display: inline;
  border-left: 1px solid gray;
}
.navi18 li a{
  padding:0 20px;
  display: block;
  text-decoration: none;

}
.navi18 li a:link {
  color:navy;
}
.navi18 li a:visited {
  color: purple;
}
.navi18 li a:hover,a:active {
  color: coral;
  background-color:#cbe8ec;
}
#leftside18 {
  border-left: 0px;
}
/*------------------------------navi18finish*/
/*------------------------------navi19start*/
.navi19 ul {
  margin: 10px;
  padding: 0;
  list-style-type: none;
  width: 900px;
}
.navi19 li {
  float: left;
  display: inline;
  border-left: 1px solid gray;
}
.navi19 li a{
  padding:0 20px;
  text-decoration: none;
  display: block;
}
.navi19 li a:link {
  color:gray;
}
.navi19 li a:visited {
  color: purple;
}
.navi19 li a:hover,a:active {
  background-color:wheat;
}
#rightside19{
  border-right: 1px solid gray;
}
/*------------------------------navi19finish*/
/*------------------------------navi20start*/
.navi20 ul {
  width: 830px;
  margin: 10px;
  list-style-type: none;
  padding: 0; 
}
.navi20 li {
  width: 162px;
  float: left;
  display: inline;
  border-right: 1px solid gray;
  background-color:lightgreen;
}
.navi20 li a{
  display: block;
  text-decoration: none;
  padding: 10px 20px;
}
.navi20 li a:link {
  color: gray;
}
.navi20 li a:visited {
  color: purple;
}
.navi20 li a:hover,a:active {
  background-color:lime;
}
#rightside20{
  border-left: 1px solid gray;	
	}
/*------------------------------navi20finish*/
/*------------------------------navi21start*/
.navi21 ul {
  width: 810px;
  height: 40px;	
  margin:15px 5px;
  padding: 0px;
  border: 1px solid gray;
  border-right: none;
  list-style-type: none;
  background:-moz-linear-gradient(top,white,gray);/*---線形グラデーション---mozilla---*/
  background:-webkit-linear-gradient(top,white,gray);/*---線形グラデーション---webkit---*/
  background:-ms-linear-gradient(top,white,gray); /*---線形グラデーション---ie---*/
}
.navi21 li {
  float: left;
  display: inline;
}
.navi21 li a{
  text-decoration: none;
  display: block;
  line-height: 40px;
  padding: 0 20px;
  border-right: 1px solid gray;
}
.navi21 li a:link {
  color:gray;
}
.navi21 li a:visited {
  color: purple;
}
.navi21 li a:hover,a:active {
  background:rgba(204,255,51,0.30);/*---色の透過率30％---*/	
}
/*------------------------------navi21finish*/
/*------------------------------navi22start*/
.navi22 ul {
  width: 830px;
  margin: 10px;
  list-style-type: none;
  padding: 0; 
}
.navi22 li {
  width: 162px;
  float: left;
  display: inline;
  border-right: 1px solid gray;
  background-color:khaki;
  border-radius:15px;/*---角丸の表示、半径15px---*/
}
.navi22 li a{
  display: block;
  text-decoration: none;
  padding: 10px 20px;
}
.navi22 li a:link {
  color: gray;
}
.navi22 li a:visited {
  color: purple;
}
.navi22 li a:hover,a:active {
  color:coral;
}
#rightside22{
  border-left: 1px solid gray;	
	}
/*------------------------------navi22finish*/
/*------------------------------navi23start*/
.navi23 ul {
  width: 830px;
  margin: 10px;
  list-style-type: none;
  padding: 0; 
}
.navi23 li {
  width: 161px;
  float: left;
  display: inline;
  border-right: 1px solid gray;
  background-color:rgba(51,255,0,0.2);
  border-radius:10px;/*---角丸の表示、半径15px---*/ 
}
.navi23 li a{
  display: block;
  text-decoration: none;
  padding: 10px 20px;
}
.navi23 li a:link {
  color: gray;
}
.navi23 li a:visited {
  color: purple;
}
.navi23 li a:hover,a:active {
  color:coral;
}

/*------------------------------navi23finish*/
/*------------------------------navi24start*/
.navi24 ul {
  width: 830px;
  margin: 20px 10px;
  list-style-type: none;
  padding: 0; 
}
.navi24 li {
  width: 163px;
  float: left;
  margin:0 10px;/*ボタンの左右の間隔を開ける*/
  display: inline;
  border: 3px solid lightgreen;
  background-color:rgba(51,255,0,0.3);
  border-radius:10px;/*---角丸の表示、半径10px---*/ 
}
.navi24 li a{
  display: block;
  text-decoration: none;
  padding: 10px 50px;
}
.navi24 li a:link {
  color: gray;
}
.navi24 li a:visited {
  color: purple;
}
.navi24 li a:hover,a:active {
  color:coral;
  box-shadow:0px 0px 50px yellow;/*-----ぼかしの指定-----*/
  border-radius:10px;/*---角丸の表示、半径10px---*/
}

/*------------------------------navi24finish*/
/*------------------------------navi25start*/
.navi25 ul {
  width: 830px;
  margin: 20px 10px;
  list-style-type: none;
  padding: 0; 
}
.navi25 li {
  width: 161px;
  float: left;
  margin:0 15px;/*ボタンの左右の間隔を開ける*/
  display: inline;
  background-color:rgba(204,255,51,0.3);
  }
.navi25 li a{
  display: block;
  text-decoration: none;
  padding: 10px 50px;
}
.navi25 li a:link {
  color: gray;
}
.navi25 li a:visited {
  color: purple;
}
.navi25 li a:hover,a:active {
  color:coral;
   box-shadow:5px 5px 5px lightyellow;/*-----ぼかしの指定-----*/
}

/*------------------------------navi25finish*/
/*------------------------------navi26start*/
.navi26 ul {
  width: 830px;
  margin: 20px 10px;
  list-style-type: none;
  padding: 0; 
}
.navi26 li {
  width: 161px;
  float: left;
  margin:0 15px;/*ボタンの左右の間隔を開ける*/
  display: inline;
  background-color:rgba(51,204,255,0.5);
  }
.navi26 li a{
  display: block;
  text-decoration: none;
  padding: 10px 50px;
}
.navi26 li a:link {
  color: gray;
}
.navi26 li a:visited {
  color: purple;
}
.navi26 li a:hover,a:active {
  color:coral;
  box-shadow:0px 0px 20px lightcyan inset;/*-----ぼかしの指定-----*/
}

/*------------------------------navi26finish*/

-->
</style>
</head>
<body>
<div id="container">
  <div id="header"><h1>HORIZONTAL GLOBALNAVI PREMIUM 2012</h1><br>
    <p>Presented by sakamotosmile40</p>
    <div id="logo"></div>
  </div>
    
  
    <div id="box18">
        課題css18
	<div class="navi18">
		<ul>
		<li id="leftside18"><a href="#">メニューのリンク１</a></li>
		<li><a href="#">メニューのリンク２</a></li>
		<li><a href="#">メニューのリンク３</a></li>
		<li><a href="#">メニューのリンク４</a></li>
		<li><a href="#">メニューのリンク５</a></li>
		</ul>
	</div>
    </div>
    
    <div id="box19">
    課題css19
	<div class="navi19">
		<ul>
		<li><a href="#">メニューのリンク１</a></li>
		<li><a href="#">メニューのリンク２</a></li>
		<li><a href="#">メニューのリンク３</a></li>
		<li><a href="#">メニューのリンク４</a></li>
		<li id="rightside19"><a href="#">メニューのリンク５</a></li>
		</ul>
	</div>
    </div>
    
    <div id="box20">
    課題css20
	<div class="navi20">
		<ul>
		<li id="rightside20"><a href="#">メニューのリンク１</a></li>
		<li><a href="#">メニューのリンク２</a></li>
		<li><a href="#">メニューのリンク３</a></li>
		<li><a href="#">メニューのリンク４</a></li>
		<li><a href="#">メニューのリンク５</a></li>
		</ul>
	</div>
    </div>
    
    <div id="box21">
    課題css21（CSS3でグラデーションを表示)
    	<div class="navi21">     
			<ul>
			<li><a href="#">メニューのリンク１</a></li>
			<li><a href="#">メニューのリンク２</a></li>
			<li><a href="#">メニューのリンク３</a></li>
			<li><a href="#">メニューのリンク４</a></li>
			<li><a href="#">メニューのリンク５</a></li>
			</ul>
		</div>
    </div>
    
    <div id="box22">
    css22(CSS3で角丸を表示)
    	<div class="navi22">     
			<ul>
			<li><a href="#">メニューのリンク１</a></li>
			<li><a href="#">メニューのリンク２</a></li>
			<li><a href="#">メニューのリンク３</a></li>
			<li><a href="#">メニューのリンク４</a></li>
			<li><a href="#">メニューのリンク５</a></li>
			</ul>
		</div>
    </div>
    
    <div id="box23">
    css23(透過)
    	<div class="navi23">     
			<ul>
			<li><a href="#">メニューのリンク１</a></li>
			<li><a href="#">メニューのリンク２</a></li>
			<li><a href="#">メニューのリンク３</a></li>
			<li><a href="#">メニューのリンク４</a></li>
			<li><a href="#">メニューのリンク５</a></li>
			</ul>
		</div>
    </div>
    
   <div id="box24">
    css24（ホバー="外側に光る"）
    	<div class="navi24">     
			<ul>
			<li><a href="#">リンク１</a></li>
			<li><a href="#">リンク２</a></li>
			<li><a href="#">リンク３</a></li>
			<li><a href="#">リンク４</a></li>
			</ul>
		</div>
    </div>
    
    <div id="box25">
     css25(ホバー="右下にぼかし")
    	<div class="navi25">     
			<ul>
			<li><a href="#">リンク１</a></li>
			<li><a href="#">リンク２</a></li>
			<li><a href="#">リンク３</a></li>
			<li><a href="#">リンク４</a></li>
			</ul>
		</div>
    </div> 
   
   <div id="box26">
     css26（ホバー="内側に光る"）
    	<div class="navi26">     
			<ul>
			<li><a href="#">リンク１</a></li>
			<li><a href="#">リンク２</a></li>
			<li><a href="#">リンク３</a></li>
			<li><a href="#">リンク４</a></li>
			</ul>
		</div>
    </div>  
</div>
</body>
</html>
現在課題作成中