音樂界面

音樂程式碼(嵌入YOUTUBE)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>最愛音樂</title>

<style>
    #title {
        background-color: #E1E1E1;
        width: 960px;
        height: 200px;
        display: block;
        margin: auto;
    }

    #type {
        background-color: #808080;
        width: 960px;
        height: 40px;
        display: block;
        margin: auto;
    }

    #footer {
        background-color: #808080;
        width: 960px;
        height: 200px;
    }

    .clearFloat {
        clear: both;
    }

    #footer p {
        margin: 5px 10px;
    }

    /*游標變色*/
    th:hover {
        background-color: #black;
    }

    th, td {
        border: 1px solid white;
        padding: 1px;
    }

    table {
        border-spacing: 1px;
        border-collapse: collapse;
        width: 100%;
        margin: 0auto;
    }

    #MyBlog {
        position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/
        top: 50%; /*設置垂直位置*/
        right: -50px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/
        background: #c6c6c6; /*背景顏色*/
        padding: 10px 10px;
        border-radius: 100px; /*圓角*/
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        width: 90px;
        height:40px;
    }

        #MyBlog:hover { /*當滑鼠移至此區塊時，伸縮區塊*/
            right:-20px;
            width: 270px;
            height: 40px;
        }

        #MyBlog #title {
            padding-right: 5px; /*讓標題與連結中間有空隙*/
            height: 40px;
            width: 450px;
        }

</style>
</head>

<body background="灰磚.jpg">
<div id="title">
    <img src="最愛音樂2.jpg" alt="音樂" height="200" width="960" style="display:block; margin:auto;" />
</div>

<div id="type">
    <table border="0" style="height:40px;width:960px">
        <tr>
            <th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px" ><a href="主頁.html" style="text-decoration:none;color:white">個人簡介</a></th>
            <th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="課表改.html" style="text-decoration:none;color:white">個人課表</a></th>
            <th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px" bgcolor="black"><a href="最愛音樂.html" style="text-decoration:none;color:white">最愛音樂</a></th>
            <th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛遊戲.html" style="text-decoration:none;color:white">最愛遊戲</a></th>
            <th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="留言板改.html" style="text-decoration:none;color:white">留言板</a></th>
            <th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="計算機改.html" style="text-decoration:none;color:white">計算機</a></th>
        </tr>
        <table>
</div>

<div id="content" style=" background-color: #FFFFFF; width: 960px; height: 680px;">
    <center><br><br>
    <iframe width="600" height="370" src="https://www.youtube.com/embed/videoseries?list=PLDcjZ4tIuXFJjJEJQMoDzYig-Vqe97SF2" frameborder="0" allowfullscreen></iframe>
        <br>
    <img src="劍三.jpg" alt="劍三"  style="display:block; margin:auto;" />
     </center>
</div>

<div id="MyBlog">
    <span id="title">
        <a href="主頁.html"><img src="個人.jpg" alt="個人介紹" height="40" width="40"  /></a>
        <a href="課表改.html"><img src="學校.jpg" alt="課表" height="40" width="40" /></a>
        <a href="最愛音樂.html"><img src="音樂.jpg" alt="音樂" height="40" width="40" /></a>
        <a href="最愛遊戲.html"><img src="遊戲.jpg" alt="遊戲" height="40" width="40" /></a>
        <a href="留言板改.html"><img src="留言.jpg" alt="留言板" height="40" width="40" /></a>
        <a href="計算機改.html"><img src="小計算機.jpg" alt="計算機" height="40" width="40" /></a>
    </span>
</div>

<div id="footer">
    <img src="最愛音樂.jpg" alt="最愛音樂" height="200" width="960" style="display:block;background-repeat:repeat-x;" />
</div>

</body>
</html>

返回目錄

results matching ""

    No results matching ""