CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mizoue

作ってみました第2弾ということでよくありそうなナビゲーションをサクッと作ってみました。

画像スライスして、フォルダ作って、コピーして、CSSで配置・・・・
とかやってためんどくさい工程を最初からCSSで配置!
と出来るのは個人的にとても良いと思います。

修正も楽ですし。

そんなわけでサンプルです。
CSSサンプル

.test {
	padding-top:100px;
}
.test .gnavi {
	width:848px;
	margin:0 auto;
	border:1px solid #B8946A;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
.test .gnavi li {
	float:left;
}
.test .gnavi li a {
	display:block;
	width:160px;
	padding:6px 5px;
	border-left:1px solid #EDE4DA;
	border-right:1px solid #B8946A;
	text-align:center;
	font-size:117%;
	color:#40311E;
	text-decoration:none;
	background: -moz-linear-gradient(top, #E8DCCD, #C0A178);
	background: -webkit-gradient(linear, left top, left bottom, from(#E8DCCD), to(#C0A178));
}
.test .gnavi li:first-child a {
	width:157px;
	border-left:none;
}
.test .gnavi li:last-child a {
	width:153px;
	border-right:none;
}
.test .gnavi li a:hover {
	text-decoration:underline;
}

HTMLサンプル

※例によってサンプルは直接ソースを御覧ください!

Subscribe:
pagetop