<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

創作者介紹
創作者 o迷苓o 的頭像
o迷苓o

~米漿牛奶~

o迷苓o 發表在 痞客邦 留言(0) 人氣()