天天看點
傳回

【html5期末大作業】基于HTML仿QQ音樂官網網站

📂文章目錄

  • ​​一、👨‍🎓網站題目​​
  • ​​二、✍️網站描述​​
  • ​​三、📚網站介紹​​
  • ​​四、💠網站示範​​
  • ​​五、⚙️ 網站代碼​​
  • ​​🧱HTML結構代碼​​
  • ​​💒CSS樣式代碼​​
  • ​​六、🥇 如何讓學習不再盲目​​
  • ​​七、🎁更多幹貨​​

一、👨‍🎓網站題目

🎵 音樂網頁設計 、🎸仿網易雲音樂、各大音樂官網網頁、🎶明星音樂演唱會主題、🥁爵士樂音樂、民族音樂、等網站的設計與制作。

二、✍️網站描述

🏷️HTML音樂網頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，内容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導航與正文字型分别設定不同字号大小。導航區域設定了背景圖。子頁面有純文字頁面和圖文并茂頁面。

🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)

  1. 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
  2. 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
  3. 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
  4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
  5. 要有JS特效，如定時切換和手動切換圖檔輪播。
  6. 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
  7. 頁面清爽、美觀、大方，不雷同。 。
  8. 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

三、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：​

​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​

​​ 等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。

四、💠網站示範

五、⚙️ 網站代碼

🧱HTML結構代碼 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音樂</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!--頭部-->
<div class="head">
  <div class="head_con">
    <h1 class="logo"><a href="#"><img src="picture/logo.png" alt=""></a></h1>
    <ul class="top_list">
      <li class="current"><a href="#">音樂館</a></li>
      <li><a href="#">我的音樂</a></li>
      <li class="spec"><a href="#">用戶端</a><img src="picture/mark_1.png"></li>
      <li><a href="#">開發平台</a></li>
      <li><a href="#">VIP</a></li>
    </ul>
    <div class="head_search">
      <input type="text" class="sear_input" placeholder="搜尋音樂、MV、歌單、使用者">
      <button>
        <i></i>
      </button>
    </div>
    <div class="head_right">
      <a href="#" class="land">登入</a>
      <a href="#" class="open_v">開通VIP</a>
      <a href="#" class="recharge">充值</a>
    </div>
    <ul class="subnav">
      <li><a href="#">首頁</a></li>
      <li><a href="#">歌手</a></li>
      <li><a href="#">新碟</a></li>
      <li><a href="#">排行榜</a></li>
      <li><a href="#">分類歌單</a></li>
      <li><a href="#">電台</a></li>
      <li><a href="#">MV</a></li>
      <li><a href="#">數字專輯</a></li>
      <li><a href="#">票務</a></li>
    </ul>
  </div>
</div>
<!--歌單推薦-->
<div class="song-reco">
  <div class="reco-con">
    <h2 class="tit">歌單推薦</h2>
    <ul class="reco-list">
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-01.png" alt="無法顯示">

        </div>
        <h4 class="list_tit"><a href="#">祝你生日快樂</a></h4>
      </li>
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-02.png" alt="無法顯示">
        </div>
        <h4 class="list_tit"><a href="#">學習工作閱讀|柔和靜心輕音樂</a></h4>
      </li>
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-03.png" alt="無法顯示">
        </div>
        <h4 class="list_tit"><a href="#">Boom Boom 心動預警來襲</a></h4>
      </li>
      <li class="play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-04.png" alt="無法顯示">
        </div>
        <h4 class="list_tit"><a href="#">【極喪】細節中崩潰</a></h4>
      </li>
      <li class="nomargin play_name">
        <div class="list_pic">
          <div class="ico_play"></div>
          <img src="picture/recommend-05.png" alt="無法顯示">
        </div>
        <h4 class="list_tit"><a href="#">治愈鋼琴曲靜心｜仰望晨光熹微</a></h4>
      </li>

    </ul>
  </div>
</div>
<!--新歌首發-->
<div class="new_song">
  <div class="song_con">
    <h2 class="tit">新歌首發</h2>
    <div class="tab">
      <a href="#">最新</a>
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">歐美</a>
      <a href="#">南韓</a>
      <a href="#">日本</a>
    </div>
    <ul class="song_list">
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-01.Png" alt="">
          </a>

        </div>
        <div class="txt">
          <h3><a href="#">青春如你《榮耀乒乓》電視劇片尾曲</a></h3>
          <p><a href="#">UNINE</a></p>
        </div>
        <div class="time">03:40</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-02.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">吉祥話</a></h3>
          <p><a href="#">hanser/泠鸢yousa/祖娅納</a></p>
        </div>
        <div class="time">04:28</div>
      </li>
      <li class="nomargin">
        <div class="pic">
          <a href="#"><img src="picture/song-03.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">One LastKiss《新世紀福音戰士:終》劇場版主題曲</a></h3>
          <p><a href="#">宇多田光(宇多田匕力兒)</a></p>
        </div>
        <div class="time">04:12</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-04.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">如夢非夢《如夢令》微劇憾愛版主題曲</a></h3>
          <p><a href="#">雙筆</a></p>
        </div>
        <div class="time">03:41</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-05.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">笑看江湖《山河令》網劇江湖推廣曲</a></h3>
          <p><a href="#">滿舒克</a></p>
        </div>
        <div class="time">03:22</div>
      </li>
      <li class="nomargin">
        <div class="pic">
          <a href="#"><img src="picture/song-06.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">相信希望(Believe)《複工》紀錄片主題曲</a></h3>
          <p><a href="#">FIR飛兒樂團</a></p>
        </div>
        <div class="time">05:14</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-07.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">Winner Ready2021PEL開賽曲 韓劇主題曲</a></h3>
          <p><a href="#">Ailee</a></p>
        </div>
        <div class="time">04:18</div>
      </li>
      <li>
        <div class="pic">
          <a href="#"><img src="picture/song-08.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">Winner Ready2021PEL開賽曲</a></h3>
          <p><a href="#">艾福傑尼</a></p>
        </div>
        <div class="time">03:32</div>
      </li>
      <li class="nomargin">
        <div class="pic">
          <a href="#"><img src="picture/song-09.Png" alt=""></a>
        </div>
        <div class="txt">
          <h3><a href="#">秘境(KickBack)</a></h3>
          <p><a href="#">威神V</a></p>
        </div>
        <div class="time">03:40</div>
      </li>

    </ul>
  </div>
</div>
<!--精彩推薦-->
<div class="brilliant">
  <div class="bri_con">
    <h2 class="tit">精彩推薦</h2>
    <ul class="bri_list">
      <li>
        <a href="#"><img src="picture/bri-01.png"></a>
      </li>
      <li class="flo_rig">
        <a href="#"><img src="picture/bri-02.png"></a>
      </li>
    </ul>
  </div>
</div>
<!--新碟首發-->
<div class="new_disc">
  <div class="disc_con">
    <h2 class="tit">新碟首發</h2>
    <div class="tab">
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">歐美</a>
      <a href="#">南韓</a>
      <a href="#">日本</a>
      <a href="#">其他</a>
    </div>
    <ul class="disc_list">
      <li class="playlist_item">
        <div class="play_pic ">
          <a href="#"><img src="picture/new_disc-01.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">甜甜的你</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">蝴蝶效應（B.E.）</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-02.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">其實你不懂我的心</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">INTO1-林墨</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-03.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">可以</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">賀一航</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-04.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">鋤禾日當午</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">金志文</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-05.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">星月(The MoonStar）（prod.大副）</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">左良甫</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-06.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">飛躍</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">淩LING</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-07.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">舊時雨</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">燒煤er/梅暢 </a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-08.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">上瘾</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">陳又又</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-09.PNG" alt=""></a>
        </div>
        <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">山風</a>
          </span>
        </h4>
        <div class="playlist_author">
          <a href="#">秦瑜</a>
        </div>
      </li>
      <li class="playlist_item">
        <div class="play_pic">
          <a href="#"><img src="picture/new_disc-10.PNG" alt=""></a>
        </div>
        <div>
          <h4 class="playlist_title">
          <span class="playlist_title_txt">
            <a href="#">一劍江湖</a>
          </span>
          </h4>
        </div>
        <div class="playlist_author">
          <a href="#">壹聲壹社</a>
        </div>
      </li>
    </ul>
  </div>
</div>
<!--排行榜-->
<div class="rank">
  <div class="rank_con">
    <h2 class="tit">排行榜</h2>
    <ul class="rank_list">
      <li class="list_item">
        <h3>熱歌</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">清空</a></p>
              <p><a href="#">王汐辰/蘇星婕</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">TA</a></p>
              <p><a href="#">不是花火呀</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">星辰大海</a></p>
              <p><a href="#">黃霄雲</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item two">
        <h3>新歌</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">氣象站台</a></p>
              <p><a href="#">Uu</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">藍色灰色</a></p>
              <p><a href="#">Zkaaai</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">我叫長安你叫故裡</a></p>
              <p><a href="#">尹昔眠/小田音樂社</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item three">
        <h3>流行指數</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">織夢</a></p>
              <p><a href="#">Chimney于恩衆</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">終于等到這一句</a></p>
              <p><a href="#">小樂哥</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">所有</a></p>
              <p><a href="#">楊博然</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item four">
        <h3>歐美</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">Love Story(Taylor's Version)</a></p>
              <p><a href="#">Taylor Swift</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">FakeASmileAlanWalker</a></p>
              <p><a href="#">salemilese</a></p>
            </div>
          </li>
          <li>
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">GasolineHAIM</a></p>
              <p><a href="#">TaylorSwift</a></p>
            </div>
          </li>
        </ul>
      </li>
      <li class="list_item five nomargin">
        <h3>南韓</h3>
        <i></i>
        <ul class="item_del">
          <li>
            <div class="num">1</div>
            <div class="del_txt">
              <p><a href="#">TAIL</a></p>
              <p><a href="#">宣美</a></p>
            </div>
          </li>
          <li>
            <div class="num">2</div>
            <div class="del_txt">
              <p><a href="#">MAGNETIC</a></p>
              <p><a href="#">Rain(鄭智薰)/王嘉爾</a></p>
            </div>
          </li>
          <li class="nomargin">
            <div class="num">3</div>
            <div class="del_txt">
              <p><a href="#">WhyWhyWhy</a></p>
              <p><a href="#">iKON</a></p>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<!--MV-->
<div class="movie">
  <div class="movie_con">
    <h2 class="tit">MV</h2>
    <div class="movie_tab">
      <a href="#">精選</a>
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">歐美</a>
      <a href="#">南韓</a>
      <a href="#">日本</a>
      <div class="check">
        <a class="index_more" href="#">更多
          <i class="icon_index_arrow sprite"></i>
        </a>
      </div>
    </div>
    <ul class="movie_list">
      <li>
        <div>
          <a href="#"><img src="picture/movie-01.png"></a>
          <h3 class="movie_list_title">熱愛105℃的你 (《超能一家人》電影推廣曲) </h3>
          <p class="movie_list_singer">騰格爾/艾倫/沈騰</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>2.0萬</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-02.png"></a>
          <h3 class="movie_list_title">《小小的美好》</h3>
          <p class="movie_list_singer">黃齡/初音未來</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>6.5萬</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-03.png"></a>
          <h3 class="movie_list_title">為我們失去的(《穿過寒冬擁抱你 螢火(《終鑰之 歌》蟲穴主題曲)</h3>
          <p class="movie_list_singer">硬糖少女303希林娜依-高</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>8.1萬</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-04.png"></a>
          <h3 class="movie_list_title">螢火(《終鑰之歌》蟲穴主題曲)</h3>
          <p class="movie_list_singer">阿雲順</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>11.6萬</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li class="nomargin">
        <div>
          <a href="#"><img src="picture/movie-05.png"></a>
          <h3 class="movie_list_title">《父親的童謠》</h3>
          <p class="movie_list_singer">陳思誠/肖央</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>4.8萬</i>
            </span>
          </div>
        </div>

        <div>
        </div>
      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-06.png"></a>
          <h3 class="movie_list_title">安靜~JapaneseVer.~</h3>
          <p class="movie_list_singer">七德</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>5.1萬</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-07.png"></a>
          <h3 class="movie_list_title">INTOI沉浸紀錄EP《萬裡》廣東曲Live </h3>
          <p class="movie_list_singer">李宇春</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>10.6萬</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-08.png"></a>
          <h3 class="movie_list_title">From Here(《文明與征服》手遊</h3>
          <p class="movie_list_singer">袁娅維</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>4.8萬</i>
            </span>
          </div>
        </div>

      </li>
      <li>
        <div>
          <a href="#"><img src="picture/movie-09.png"></a>
          <h3 class="movie_list_title">《野蠻生長》-李字春演唱會 </h3>
          <p class="movie_list_singer">騰格爾/艾倫/沈騰</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>14.9萬</i>
            </span>
          </div>
        </div>
      </li>
      <li class="nomargin">
        <div>
          <a href="#"><img src="picture/movie-10.png"></a>
          <h3 class="movie_list_title">《BabyIKnow》 </h3>
          <p class="movie_list_singer">劉用斷</p>
          <div class="movie_list_info">
            <span>
              <i class="movie_list_listen_icon sprite"></i>
              <i>15.2萬</i>
            </span>
          </div>
        </div>
      </li>
    </ul>


  </div>
</div>


<!--底部-->
<div class="foot">
  <div class="foot_con">
    <div class="con_top">

      <div class="download">
        <h3 class="bt"><a href="#">下載下傳QQ用戶端</a></h3>
        <ul class="down_list">
          <li class="down_item item01">
            <a href="#">
              <i></i>
              <span>PC版</span>
            </a>
          </li>
          <li class="down_item item02">
            <a href="#">
              <i></i>
              <span>MAC版</span>
            </a>
          </li>
          <li class="down_item item03">
            <a href="#">
              <i></i>
              <span>Android版</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <i></i>
              <span>iphone版</span>
            </a>
          </li>
        </ul>
      </div>
      <!--特色産品-->
      <div class="download pro">
        <h3 class="bt"><a href="#">特色産品</a></h3>
        <ul class="down_list">
          <li class="down_item item01">
            <a href="#">
              <i></i>
              <span>全民K歌</span>
            </a>
          </li>
          <li class="down_item item02">
            <a href="#">
              <i></i>
              <span>SuperSound</span>
            </a>
          </li>
          <li class="down_item item03">
            <a href="#">
              <i></i>
              <span>QPlay</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <i></i>
              <span>Fan直播伴侶</span>
            </a>
          </li>
          <li class="down_item item04 item_spec">
            <a href="#">
              <span>車載互聯</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <span>QQ演出</span>
            </a>
          </li>
          <li class="down_item item04">
            <a href="#">
              <span></span>
            </a>
          </li>
        </ul>
      </div>
      <!--合作連結-->
      <div class="link">
        <h3 class="bt"><a href="#">合作連結</a></h3>
        <ul class="link_list">
          <li><a href="#">CJ·ENM</a></li>
          <li><a href="#">騰訊視訊</a></li>
          <li><a href="#">手機QQ空間</a></li>
          <li><a href="#">最新版QQ</a></li>
          <li><a href="#">騰訊社交廣告</a></li>
          <li><a href="#">電腦管家</a></li>
          <li><a href="#">QQ浏覽器</a></li>
          <li><a href="#">騰訊微雲</a></li>
          <li><a href="#">騰訊雲</a></li>
          <li><a href="#">企鵝FM</a></li>
          <li><a href="#">智能電視網</a></li>
          <li><a href="#">當貝市場</a></li>

        </ul>
      </div>

      <!--開發平台-->
      <div class="platform">
        <h3 class="bt"><a href="#">開發平台</a></h3>
        <ul class="link_list">
          <li><a href="#">QQ音樂開放平台</a></li>
          <li><a href="#">騰訊音樂人</a></li>
        </ul>
      </div>

      <!--TME集團官網-->
      <div class="platform">
        <h3 class="bt"><a href="#">TME集團官網</a></h3>
        <ul class="link_list">
          <li><a href="#">騰訊音樂</a></li>
        </ul>
      </div>
    </div>
    <!-- 權利聲明 -->
    <div class="copyright">
      <p>
        <a href="#">關于騰訊</a> |
        <a href="#">AboutTencent</a> |
        <a href="#">服務條款</a> |
        <a href="#">使用者服務協定</a> |
        <a href="#">隐私政策</a> |
        <a href="#">權利聲明</a> |
        <a href="#">廣告服務</a> |
        <a href="#">騰訊招聘</a> |
        <a href="#">客服中心</a> |
        <a href="#">網站導航</a>
      </p>
      <p>Copyright 1998-2021Tencent.All Rights Reserved.</p>
      <p>騰訊公司 <a href="#">版權所有 </a><a href="#">網絡文化經營許可證: </a><a href="#">粵網文2018]6725-2386号 </a></p>
    </div>
  </div>
</div>
</body>
</html>

💒CSS樣式代碼 

body,ul,h2,h4,h3,p,h1,input,button{
  margin: 0;
  padding: 0;
}
img{
  border: 0;
}
body{
  font-family: "微軟雅黑";
}
.reco-con, .song_con, .bri_con, .rank_con,.foot_con,.head_con,.movie_con {
  width: 1200px;
  margin: 0 auto;
}
.tit {
  font-size: 30px;
  color: #333;
  letter-spacing: 14px;
  text-align: center;
  line-height: 30px;
  margin-bottom: 34px;
}

ul,li {
  list-style: none;

}
a{
  color: #333;
  text-decoration: none;
}
.song-reco, .new_song, .brilliant, .new_disc, .rank, .foot , .movie{

  padding: 51px 0px 50px 0px;
}
.reco-list {
  overflow: hidden;

}
.reco-list li {
  width: 224px;
  float: left;
  margin-right: 20px;
}
.reco-list .nomargin{
  margin-right: 0px;
}

.list_pic img {
  width:224px  ;
  vertical-align: top;

}

.play_name:hover .ico_play {
  background-image: url("../image/ico_play.png");


}
.ico_play {
  position: absolute;
  margin: 82px 82px;
  width: 60px;
  height: 60px;
}

.list_tit {
  font-size: 14px;
  font-weight: normal;
  line-height: 28px;
  margin-top: 6px;
}
/*新歌首發*/
.tab {
  overflow: hidden;
  padding-left: 360px;
  margin-bottom: 39px;
}
.tab a{
  font-size: 14px;
  line-height: 22px;
  float: left;
  margin-right: 52px;
}
/*新碟首發*/

.disc_con{
  width: 1200px;
  margin: 0 auto;
}
.new_disc .tab {
  padding-left: 350px;
  margin-bottom: 39px;
}
.song_list {
  overflow: hidden;
}
.song_list li {
  padding: 12px 0px;
  overflow: hidden;
  border-bottom:  1px solid #f2f2f2;
  width: 380px;
  float: left;
  margin-right: 30px;

}
.pic,.txt,.time{
  float: left;
}
.pic{
  width: 86px;
  height: 86px;

}

.pic img {
  width: 86px;

}
.txt {
  padding: 19px 0px 17px 0px;
  width: 200px;
  margin: 0px 38px 0px 14px;
}
.txt h3 {
  font-size: 14px;
  line-height: 25px;
  font-weight: normal;
  text-overflow: ellipsis;  /* 單行文本 */
  overflow: hidden;  /* 溢出隐藏、清除浮動、解決外邊距塌陷等等；這裡是溢出隐藏 */
  white-space: nowrap;  /* 規定h3标簽不換行 */
}
.txt p{
  font-size: 14px;
  line-height: 25px
}
.txt p a{
  color: #999;
}
.time{
  font-size: 14px;
  color: #999;
  line-height: 86px;
}
.song_list .nomargin{
  margin-right: 0px;
}
/*精彩推薦*/
.bri_list  {
  overflow: hidden;
}
.bri_list  li {
  width: 590px;
  height: 235px;
  float: left;

}
.bri_list .flo_rig{
  float: right;
}
.bri_list li img{
  width: 590px;
}

/*新碟首發*/
.disc_list{
  overflow: hidden;
}
.disc_list li {
  width: 210px;
  height: 280px;
  float: left;
  margin-right: 30px;
}

.play_pic{
  width: 210px;
  height: 210px;

}
.play_pic img{
  width: 210px;
}
.playlist_item {
  width:240px ;
  height:300px;
  padding-bottom: 15px;
}
/*.playlist_item .play_pic {*/
/*  position: relative;*/
/*  !*margin-right: 30px;*!*/
/*}*/

.playlist_item .playlist_title{
  /*float: left;*/
  max-width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
  max-height: 44px;
}
.playlist_title h4{
  margin-top: 4px;

}


.playlist_title_txt a {
  font-size: 14px;
}
.playlist_item .playlist_author{

  max-width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
  max-height: 44px;
}
.playlist_item .playlist_author a {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
  font-size: 14px;
}

/*排行榜*/
.rank_list {
  overflow: hidden;
}
.list_item {
  width: 164px;
  height: 430px;
  margin-right: 20px;
  float: left;
  /*精靈圖，通過background-position調整圖檔對應位置*/
  /*no-repeat屬性是不讓圖檔重複*/
  background: url(../image/rank.png) no-repeat;
  padding: 70px 30px 0px;
}

.two{
  background-position: -309px 0px ;
}
.three{
  background-position: -618px 0px ;
}
.four{
  background-position: -927px 0px ;
}.five{
   background-position: -1238px 0px ;
 }

.rank_list .nomargin {
  margin-right: 0px;
}
.list_item h3{
  font-size: 26px;
  line-height: 58px;
  color: #fff;
  font-weight: 400;
  text-align: center;
}
.list_item i {
  display: block;
  width: 36px;
  height: 2px;
  background-color: #fff;
  margin: 32px auto;
}
.item_del li {
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  margin-bottom: 20px;
}
.item_del .num {
  line-height: 29px;
  float: left;
  width: 20px;
}
.item_del .del_txt{
  float: left;
  width: 144px;
}
.del_txt p{
  line-height: 29px;
  text-overflow: ellipsis;
  overflow: hidden;  /* 溢出隐藏、清除浮動、解決外邊距塌陷等等；這裡是溢出隐藏 */
  white-space: nowrap
}
.del_txt p a{
  color: #fff;
}
.del_txt p a:hover{
  color: #fff;
}

/*底部*/
.foot {
  background: rgb(58,58,58);
}
.foot a{
  color: #999;
  display: block;
}
.bt {
  font-size: 15px;
  font-weight: 500;
  line-height: 77px;
  margin-bottom: 12px;
}
.down_list {
  overflow: hidden;
}
.down_item {
  float: left;
}
.down_item i {
  display: block;
  background: url("../image/foot.png") no-repeat;
  margin: 0px 29px;
  height: 33px;
}
.item01 {
  margin-left: -23px;
}
.item01 i{
  width: 33px;
  background-position: -1px -1px;
}
.item01 a:hover i{
  background-position: -1px -34px;
}
.item02 i{
  width: 41px;
  background-position: -56px -1px;
}
.item02 a:hover i{
  background-position: -56px -34px;
}
.item03 i{
  width: 36px;
  background-position: -130px -1px;
}
.item03 a:hover i{
  background-position: -130px -34px;
}
.item04 i{
  width: 36px;
  background-position: -190px -1px;
}

.item04 a:hover i{
  background-position: -190px -34px;
}
.download{
  width: 438px;
}
.pro {
  width: 370px;
  margin-right: 80px;
}
.down_item span {
  display: block;
  font-size: 14px;
  line-height: 40px;
  text-align: center;

}
.con_top{
  overflow: hidden;
  padding-bottom: 30px;
  border-bottom: 1px solid #353535;
}
.download,.pro {
  float: left;
}
.pro .item01 {
  margin-left: -24px;
}
.pro .item01 i{
  width: 38px;
  height: 32px;
  background-position: -249px -3px;
}
.item01 a:hover i {
  background-position: -249px -34px;
}
.pro .item02 i{
  width: 38px;
  height: 32px;
  background-position: -314px -3px;
}
.item02 a:hover i {
  background-position: -314px -34px;
}
.pro .item03 i{
  width: 38px;
  height: 32px;
  background-position: -380px -3px;
}
.item03 a:hover i {
  background-position: -380px -34px;
}
.pro .item04 i{
  width: 38px;
  height: 32px;
  background-position: -443px -3px;
}
.item04 a:hover i {
  background-position: -443px -34px;
}
.item_spec{
  margin-right:33px;
}
/*合作連結*/
.link{
  width: 303px;
  float: left;

}
.link_list li{
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 14px;
  min-width: 101px;
  float: left;
}
.link_list li a:hover{
  color: #31c27c;
}
.platform {
  width: 464px;
  float: left;
  margin-top:52px ;

}
.platform li {
  margin-right: 30px;
}
.copyright{
  font-size: 12px;
  color: #999;
  padding-top: 23px;
}
.copyright p {
  line-height: 20px;
  text-align: center;
}
.copyright p a{
  display: inline;
}
.copyright p a:hover{
  color: #31c27c;
}
/*頭部*/
.head_con {
  position: relative;
  padding-top: 90px;

}
.logo {
  width: 170px;
  height:46px;
  position: absolute;
  left: 0;
  top:22px;
}
.logo a{
  display: block;
}
.logo img{
  width: 170px;
}
.top_list {
  font-size: 18px;
  overflow: hidden;
  position: absolute;
  left: 198px;
  top:0px;
}
.top_list li {
  float: left;
}
.top_list .current{
  background: #31c27c;
}
.top_list .current a {
  color: #fff;
}
.top_list .current a:hover {
  color: #fff;
}
.top_list a{
  color: #000;
  display: block;
  line-height:90px ;
  padding: 0px 20px;
}
.top_list a:hover {
  color:#31c27c ;
}
.spec {
  position: relative;
}
.spec img{
  position: absolute;
  top:18px;
  left: 56px;
  width: 38px;
  height: 14px;
}

.head_search{
  width: 218px;
  height: 36px;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  position: absolute;
  left: 720px;
  top:26px
}
.sear_input{
  padding-left: 11px;
  height: 36px;
  line-height: 36px;
  border: none;
  outline: none;
  width: 174px;
  float: left;
}
.sear_input::placeholder{
  color: #757575;
  font-size: 10px;
}
button i{
  width: 17px;
  height: 17px;
  display: block;
  background: url("../image/mark-2.png") no-repeat;
  margin-left: 6px;
}
button {
  background: none;
  border: none;
  width: 33px;
  height: 36px;
  float: right;
}
button:hover i{
  background: url("../image/mark-3.png");
}
.head_right{
  height: 40px;
  position: absolute;
  left: 980px;
  top:24px
}
.head_right a{
  display: block;
  float: left;
}
.land{
  font-size: 16px;
  color: #000;
  line-height: 40px;
}
.open_v {
  font-size: 12px;
  color: #fff;
  width: 102px;
  height: 40px;
  line-height: 40px;
  background: #31c27c;
  border-radius: 2px;
  text-align: center;
  margin: 0px 5px 0px 8px;
  position: relative;
}
/*通過僞類，border設定小箭頭*/
.open_v::after {
  content: "";
  width: 0px;
  height: 0px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
  position: absolute;
  top:16px;
  right: 8px;
}
.recharge{
  width: 51px;
  height: 38px;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  text-align: center;
  color: #000;
  font-size: 12px;
  line-height: 38px;
  position: relative;
}
.recharge::after {
  content: "";
  width: 0px;
  height: 0px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #000;
  position: absolute;
  top:14px;
  right: 2px;
}
.subnav {
  overflow: hidden;
  border-top: 1px solid #f2f2f2;
  padding-left: 230px;
}
/*.subnav {*/
/*  overflow: hidden;*/
/*}*/
.subnav li {
  line-height: 51px;
  height: 51px;
  font-size: 14px;
  float: left;
}
.subnav a{
  color: #000;
  display: block;
  line-height: 50px;
  padding: 0px 20px;
}
.subnav li a:hover {
  color: #31c27c;
}
.song-reco, .new_song,.brilliant,.new_disc,.rank,.movie {
  background: url("../image/background02.jpg") repeat-x;
}
/*MV*/
.movie_tab{
  overflow: hidden;
  padding-left: 350px;
  margin-bottom: 39px;
  position: relative;

}
/*.movie_con{*/
/*  position: relative;*/
/*}*/
.movie_tab a{
  font-size: 14px;
  line-height: 22px;
  float: left;
  margin-right: 52px;

}
.movie_tab a:hover{
  color: #31c27c;
}

.index_more{
  position: absolute;
  right: 0;
  top: auto;
}
/*.index_more i:hover{*/
/*  background-position: -120px -60px;*/
/*}*/
.movie_tab .index_more a:hover i{
  background-position: -120px -60px;
}
.icon_index_arrow{
  display: inline-block;
  width: 7px;
  height: 12px;
  background-position: -120px -40px;
  margin-left: 6px;
}
.sprite {
  background-image: url(../image/icon_sprite.630b3e60.png);
}
.check:hover i{
  background-position: -120px -60px;
}

.movie_list{
  overflow: hidden;
}
.movie_list li{
  width: 224px;
  height: 210px;

  margin-bottom: 20px;
  float: left;
  margin-right: 20px;
}
.movie_list li img{
  width: 224px;
  height: 127px;
}
.movie_list .nomargin{
  margin-right: 0px;
}
.movie_list_title {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.movie_list_singer{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #9b9b9b;
}
.movie_list_listen_icon{
  display: inline-block;
  width: 19px;
  height: 12px;
  background-position: -180px -20px;
  vertical-align: -1px;
}
.movie_list_info span{
  margin:0px 10px 0px 0px;
}
.movie_list_listen_icon sprite{
  background-image:  url(../image/icon_sprite.630b3e60.png);
}
.movie_list_info i{
  font-size: 14px;
  color: #9b9b9b;
}
.movie_list_title:hover{
  color: #31c27c;
}
.movie_list_singer:hover{
  color: #31c27c;
}

六、🥇 如何讓學習不再盲目

  1. 入門期間不要盲目看太多書，找一本網上或身邊有經驗程式員推薦的教材，先系統的學習。
  2. 多看幫助文檔，幫助文檔就像一個遊戲的玩法說明通關秘籍，該看就看别太自信。
  3. 菜鳥容易被對象、屬性、方法等詞彙迷惑？那是你連最基礎知識都還沒掌握。
  4. 不要忽視沒一個看起來不起眼的問題，經常總結做到舉一反三。
  5. 沒積累足夠知識和經驗前，你是開發不出一個完整項目的。
  6. 把最新技術挂在嘴邊，還不如把過時技術牢記心中。
  7. 活到老學到老，隻有一招半式是闖不了江湖的。
  8. 看得懂的書，仔細看；看不懂的書，硬着頭皮也要看完。
  9. 書讀百遍其義自見，别指望讀一遍就能掌握。
  10. 請把教程裡的例子親手實踐下，即使案例中有完整源碼。
  11. 把在教程中看到的有意義的例子擴充；并将其切實的運用到自己的工作中。
  12. 不要漏掉教程中任何一個習題——請全部做完并做好筆記。
  13. 水準是在不斷的實踐中完善和發展的，你與大牛差的隻是經驗的積累。
  14. 每學到一個難點的時候，嘗試對朋友或網上分享你的心得,讓别人都能看得懂說明你真的掌握。
  15. 做好儲存源檔案的習慣，這些都是你的知識積累。
  16. 遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多程式設計相關資料，你隻要輸入關鍵字就能找到你的答案。
html靜态頁面 web課程與設計 html期末大作業 學生我那工業作業 期末網頁作業
上一篇: tornado 異步非阻塞 實驗參考前言實驗個人總結
下一篇: 使用Tornado進行網絡異步程式設計

繼續閱讀