<head>
<meta charset="utf-8">
<title>無標題文件</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
html{
background:url(1.jpg);
min-height:100%;
background-size:cover;
}
body{
margin:0px;
padding:0px;
}
#nav{
width:700px;
left:50%; <<div的左上點到左方50%
top:50%; <<div的左上點到上方50%
position:absolute;
margin-left:-300px; <<根據li的寬度600px(150px的4個)，因此一半為300px
margin-top:-30px; <<根據li的高度40px，因此一半為20px，個人是給30px
}
ul{
list-style-type:none; <<清單前面圖示
margin:0px;
padding:0px;
}
li{
height:40px;
line-height:40px; <<文字區域高度
text-align:center; <<文字水平對齊
background:#8EBF5F;
border:1px solid #254C00;
margin-right:5px;
float:left;
width:150px;
/* 根據不同瀏覽器旋轉寫法 */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a{
font-size:20px;
color:#254C00;
text-decoration:none; <<文字樣式
font-family: 'Lobster', cursive;
}
li:hover a{ <<li觸碰時改變a
color:#427213;
}
li:hover{ <<li觸碰時
-webkit-transform: rotate(-10deg) translate(20px, 0px);
-moz-transform: rotate(-10deg) translate(20px, 0px);
-o-transform: rotate(-10deg) translate(20px, 0px);
-ms-transform: rotate(-10deg) translate(20px, 0px);
transform: rotate(-10deg) translate(20px, 0px);
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cat</a></li>
<li><a href="#">Dog</a></li>
</ul>
</div>
</body>
結果圖
list-style-type參考網址：http://www.w3schools.com/cssref/pr_list-style-type.asp
line-height參考網址：http://www.w3schools.com/cssref/pr_dim_line-height.asp
留言列表
線上遊戲 (4)
