[WEB][CSS] 實作mac狀態工具列

先上老師教學(橫的),預覽

<html>
<head>
    <style>
        #bar{position:fixed; bottom:10px; width:100%; text-align:center}
        img{margin: 0px;
            -webkit-transition: 0.1s linear;
            -webkit-transition-property: -webkit-transform margin;}
        img:hover{
            margin: 6px;
            -webkit-transform: scale(1.5);
        }       
    </style>
</head>
<body bgcolor="#ccccff">
 
<div id="bar">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
</div>
 
</body></html>

我自己實作了直的

Advertisements

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s