HTML5 final assignment: music website design - Windmill music stack online music playback HTML + CSS

@. code out the future 2021-08-06 18:10:38 阅读数:606

本文一共[544]字,预计阅读时长:1分钟~
html5 html final assignment music

HTML5 Final homework : Music website design —— Windmill music stack online music playback HTML+CSS

Towards the end of the term , You're still working on HTML Web design homework , The teacher's homework requirements are big ?HTML There is no way to start web homework ? The total number of pages required is too much ? No suitable template ? And so on and so forth . The problem you want to solve , In this blog post, you can basically meet your needs ~

original HTML+CSS+JS Page design , web College students web design homework source code , This is a good web page making , Smart picture , Very suitable for beginners to learn to use .

Introduction to works

1. Introduction to web works :HTML Web design homework for college students at the end of the term , You can download what you like , The article page supports mobile phones PC Responsive layout . There are mainly : Sign in 、 register 、 Home page 、 List of pp. 、 Details page Wait a total 5 A page html download .

2. Web work editing : This work is the subject matter of students' personal home page design , The code is simple student level html+css Layout making , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm All editors are available )

3. The layout of web works : The overall layout of the web page is LOGO、 Navigation 、 Main content layout . There are many layouts of sub pages , Interest content uses picture list layout , The score page inserts a table , Contact us to set the left alignment using the image alignment .

4. Technical aspects of web works : Use CSS Made a background picture of the web page 、 Color change effect of mouse passing and selected navigation 、 Underline, etc . The home page has made a message form , At the same time, it is easy to use JavaScript Made a form to judge ( The form cannot be empty when submitting )

One 、 Demonstration of works

1.

 Insert picture description here

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Windmill Inn </title>
<meta name="keywords" content=" Windmill Inn , player , Player download , music , Music download , Music player ,MV,MTV, hd MV, hot MV,MV download ,mv Watch it online " />
<meta name="description" content=" Windmill music store is a free music service launched by windmill music store company , Massive music library online audition 、 The most popular new song is launched online 、 High quality music audition 、 Download genuine music 、MV Watch, etc , It is the first choice for Internet music playing and downloading " />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/player.css" />
<link rel="Shortcut Icon" href="images/favicon.ico" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script> if ((!to3d()) || document.documentMode == 10 || document.documentMode == 11){
 window.location="error/error.html"; } </script>
</head>
<body>
<!-- The header template calls Start -->
<!-- Head Start -->
<div id="header">
<!-- Top bar Start -->
<div class="nav_topbar">
<div class="nav_topbar_cont">
<ul>
<li><a href=""> My home page </a></li><li><a href=""> Personal center </a></li><li><a href=""> Help center </a></li>
</ul>
<!-- The user login -->
<a class="user_login" href="javascript:;"><em></em> The user login <i class="arrow"></i></a>
<div style="display:none;" class="user_login_box">
<p class="shadow_cover"></p>
<div class="user_login_inner">
<form class="signin_form">
<input class="ipt" type="text" value=" user name " name="log">
<input class="ipt" type="password" value=" password " name="pwd">
<input name="rememberme" id="rememberme" checked="checked" value="forever" type="checkbox"> Remember the password
<input class="login_btn" type="submit" name="submit" value=" Sign in ">
</form>
<p>
<a href=""><i class="sign"></i> register </a> |
<a href=""><i class="lock"></i> Forget the password ?</a>
</p>
</div>
</div>
<!-- The user login -->
</div>
</div>
<!-- Top bar end -->
<!-- Head navigation Start -->
<div id="headCont">
<div class="main_nav">
<!--LOGO-->
<div class="logo"><a href=""><img src="images/logo.png" width="60" height="60" alt="logo"></a></div>
<div class="logoName">
<a href=""><img src="images/logoName.png" width="120" height="60" alt="logoName"></a>
</div>
<!-- Main navigation -->
<ul class="navigation" id="main_nav">
<li> <!--class="on" -->
<a href=""><span> Music Hall </span><span> Music Hall </span></a>
</li>
<li>
<a href="?cat=6"><span>MV</span><span>MV</span></a>
</li>
<li>
<a href="?cat=7"><span> My music </span><span> My music </span></a>
</li>
<li>
<a href="?cat=8"><span> Download client </span><span> Download client </span></a>
</li>
<audio id="audioPlayer"></audio>
</ul>
<div class="user_info">
<div class="user_photo"><a href=""><img src="images/user_photo.png" /></a></div>
<a class="nikeName" href=""> Sailors are afraid of water </a>
<a class="user_info_list" href=""><span>8</span><span> song sheet </span></a>
<a class="user_info_list" href=""><span>3</span><span> listen in </span></a>
<a class="user_info_list" href=""><span>0</span><span> Audience </span></a>
</div>
</div>
<!-- Secondary navigation -->
<nav class="sub_nav">
<div class="nav_list">
<ul>
<li>
<a href="" class="smallogo">
<span class="mini_logo"></span>
</a>
</li>
<li><a href="" class="home"> home page </a></li>
<div class="sub_list" id="sub_list">
<p class="active">
<a href="?cat=9"> Exclusive launch </a><a href="?cat=10"> Gedan square </a>
<a href="?cat=11"> singer </a>
<a href="?cat=12"> Album </a><a href="?cat=13"> radio </a>
</p>
<p>
<a href="?cat=6">MV recommend </a><a href="?cat=6">MV library </a>
<a href="?cat=6">MV project </a><a href="?cat=6"> Music scene </a>
</p>
<p>
<a href="?cat=7"> Home page </a><a href="?cat=7"> song sheet </a>
<a href="?cat=7"> listen in </a><a href="?cat=7"> Audience </a>
<a href="?cat=7">MV Collection </a>
</p>
<p>
<a href="?cat=8"> The computer version </a><a href="?cat=8">pad edition </a>
<a href="?cat=8"> Mobile version </a>
</p>
</div>
<!-- Search box Start -->
<div class="search_box">
<form role="search" method="get" id="searchform" class="searchform" action="">
<input type="submit" value="" class="search_btn" id="searchsubmit" />
<input type="text" class="search" value=" Search for good music " name="s" id="s" />
</form>
<!-- Search drop-down menu -->
<div class="hot_search" id="hot_search">
<div>
<span><a href="javascript:;"> Eason Chan </a><font>171 ten thousand </font></span>
<div>
<span><a href="javascript:;"> Jay Chou </a><font>164 ten thousand </font></span>
<div>
<span><a href="javascript:;">G.E.M. Deng Zi chess </a><font>107 ten thousand </font></span>
<div>
<span><a href="javascript:;"> bubble </a><font>90 ten thousand </font></span>
<div>
<span><a href="javascript:;"> Jj Lin </a><font>62 ten thousand </font></span>
<div>
<span><a href="javascript:;"> Benxi </a><font>57 ten thousand </font></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Search drop-down menu -->
</div>
<!-- Search box end -->
</ul>
</div>
</nav>
</div>
<!-- Head navigation end -->
</div>
<!-- Head end -->
<!-- The header template calls end -->
<!-- Music Hall modular Start default-->
<section class="section_cont">
<!-- Shuffling figure Start -->
<div class="main_banner">
<div class="main_banner_bg"></div>
<div class="main_banner_wrap">
<canvas id="myCanvas" width="150" height="150"></canvas>
<div class="main_banner_box" id="m_box">
<a href="javascript:void(0)" class="banner_btn js_pre">
<span class="banner_btn_arrow"><i></i></span>
</a>
<a href="javascript:void(0)" class="banner_btn btn_next js_next">
<span class="banner_btn_arrow"><i></i></span>
</a>
<ul>
<li id="imgCard0">
<a href=""><span style="opacity:0;"></span></a>
<img src="main_banner/big0020150102211033.jpg" alt="">
<p style="bottom:0"> Jay Chou fan version MV</p>
</li>
<li id="imgCard1">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0120150101183428.jpg" alt="">
<p> The second episode of the talk show </p>
</li>
<li id="imgCard2">
<a href=""><span style="opacity:0.4;" ></span></a>
<img src="main_banner/big0320150101183351.jpg" alt="">
<p> Happy to see big names :” Rong “ The sound of glory ,” dimension “ I'm the only one </p>
</li>
<li id="imgCard3">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0420150101224343.jpg" alt="">
<p> Wang Leehom has worked hard for four years </p>
</li>
<li id="imgCard4">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0720150102210934.jpg" alt="">
<p>MV selected :《 Wu Mei 》 The goddess group competes in beauty </p>
</li>
</ul>
<!-- Firefox reflection layer -->
<p id="rflt"></p>
<!-- Firefox reflection layer -->
</div>
<!-- Serial number button -->
<div class="btn_list">
<span class="curr"></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!-- Shuffling figure end -->
<!-- Start online Start -->
<div class="new_songs new_common">
<!-- title Start -->
<div class="new_songs_title new_common_title">
<span></span>
<a href="?cat=12" class="more"></a>
<a id="albumNext" href="javascript:;"></a>
<a id="albumPrev" href="javascript:;"></a>
<em>/ 2</em><em class="pageNum">1</em>
</div>
<!-- title end -->
<!-- The first 1 page -->
<ul class="show">
<li class="albumBox">
<div class="album">
<p>
<a href="?p=19"><img width="220" height="220" src=" pic/album1-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" Hello , bye - I'm still alive " /> <span><em> Hello , bye </em><em> I'm still alive </em><i></i></span></a>
</p>
<a href="?p=19"><span> song </span><strong>4</strong></a>
<a href="?p=19"><span> audition </span><strong>1950<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=16"><img width="220" height="220" src=" pic/album2-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" hat-trick - Wei Chen " /> <span><em> hat-trick </em><em> Wei Chen </em><i></i></span></a>
</p>
<a href="?p=16"><span> song </span><strong>5</strong></a>
<a href="?p=16"><span> audition </span><strong>1860<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=13"><img width="220" height="220" src=" pic/album3-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" Ouch! , pretty good - Jay Chou " /> <span><em> Ouch! , pretty good </em><em> Jay Chou </em><i></i></span></a>
</p>
<a href="?p=13"><span> song </span><strong>12</strong></a>
<a href="?p=13"><span> audition </span><strong>3750<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=10"><img width="220" height="220" src=" pic/album4-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" New earth - Jj Lin " /> <span><em> New earth </em><em> Jj Lin </em><i></i></span></a>
</p>
<a href="?p=10"><span> song </span><strong>12</strong></a>
<a href="?p=10"><span> audition </span><strong>4020<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=7"><img width="220" height="220" src=" pic/album5-220x220.jpg" class="attachment-220x220 wp-post-image" alt="album5" /> <span><em> Under thirty </em><em> Revival </em><i></i></span></a>
</p>
<a href="?p=7"><span> song </span><strong>12</strong></a>
<a href="?p=7"><span> audition </span><strong>2060<em> ten thousand </em></strong></a>
</div>
</li>
</ul>
<!-- The first 2 page -->
<ul class="albumList">
<li class="albumBox">
<div class="album">
<p>
<a href="?p=34"><img width="220" height="220" src=" pic/album6-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" To women " /> <span><em> To women </em><em> Xu ruohu </em><i></i></span></a>
</p>
<a href="?p=34"><span> song </span><strong>4</strong></a>
<a href="?p=34"><span> audition </span><strong>3180<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=31"><img width="220" height="220" src=" pic/album7-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" Guilt " /> <span><em> Guilt </em><em>A-Lin</em><i></i></span></a>
</p>
<a href="?p=31"><span> song </span><strong>6</strong></a>
<a href="?p=31"><span> audition </span><strong>3952<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=28"><img width="220" height="220" src=" pic/album8-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" Too song In the winter " /> <span><em> Too song In the winter </em><em> Hu Yanbin </em><i></i></span></a>
</p>
<a href="?p=28"><span> song </span><strong>12</strong></a>
<a href="?p=28"><span> audition </span><strong>2125<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=25"><img width="220" height="220" src=" pic/album9-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" Learn to love " /> <span><em> Learn to love </em><em> Zhou Xingzhe </em><i></i></span></a>
</p>
<a href="?p=25"><span> song </span><strong>12</strong></a>
<a href="?p=25"><span> audition </span><strong>2464<em> ten thousand </em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=22"><img width="220" height="220" src=" pic/album10-220x220.jpg" class="attachment-220x220 wp-post-image" alt=" A smile in the dark " /> <span><em> Dare to love and dare to be </em><em> Dingdang </em><i></i></span></a>
</p>
<a href="?p=22"><span> song </span><strong>20</strong></a>
<a href="?p=22"><span> audition </span><strong>3412060<em> ten thousand </em></strong></a>
</div>
</li>
</ul>
</div>
<!-- Start online end -->
<!--MV premiere Start -->
<div class="new_mv new_common">
<!-- title Start -->
<div class="new_mv_title new_common_title index_mv_title">
<span></span>
<a href="?cat=6" class="more"></a>
<ul>
<li><a class="cur" href="javascript:;"> premiere </a></li>
<li><a href="javascript:;"> Inland </a></li>
<li><a href="javascript:;"> Hong Kong and Taiwan </a></li>
</ul>
</div>
<!-- title end -->
<div class="new_mv_body index_mv_body">
<!--1 premiere -->
<div class="mvList" style="display:block;">
<ul class="sb">
<li>
<a href="?p=106">
<img width="220" height="125" src=" pic/mv_1x2_10.jpg" class="attachment-220x125 wp-post-image" alt="mv_1x2_10" /> <strong> Say in your ear </strong>
<strong> Zhou Xingzhe </strong>
<span>
<font> Say in your ear &#8211; Zhou Xingzhe </font>
<font><i></i></font>
<font><i></i>1042425<em>2 pic4-12-31</em></font>
</span>
</a>
</li>
<li>
<a href="?p=104">
<img width="220" height="125" src=" pic/mv_1x2_9.jpg" class="attachment-220x125 wp-post-image" alt=" Blue Christmas - Xu ruohu " /> <strong> Blue Christmas </strong>
<strong> Xu ruohu </strong>
<span>
<font> Blue Christmas &#8211; Xu ruohu </font>
<font><i></i></font>
<font><i></i>6392509<em>2 pic4-12-23</em></font>
</span>
</a>
</li>
<li>
<a href="?p=102">
<img width="220" height="125" src=" pic/mv_1x2_8.jpg" class="attachment-220x125 wp-post-image" alt=" No change, no longer the old - Sun Zihan " /> <strong> It shouldn't be old anymore </strong>
<strong> Sun Zihan </strong>
<span>
<font> It shouldn't be old anymore &#8211; Sun Zihan </font>
<font><i></i></font>
<font><i></i>1237569<em>2 pic4-12-31</em></font>
</span>
</a>
</li>
<li>
<a href="?p=100">
<img width="220" height="125" src=" pic/mv_1x2_18.jpg" class="attachment-220x125 wp-post-image" alt=" The year the flowers bloom - Wei Chen " /> <strong> The year the flowers bloom </strong>
<strong> Wei Chen </strong>
<span>
<font> The year the flowers bloom - Wei Chen </font>
<font><i></i></font>
<font><i></i>1377190<em>2 pic4-10-03</em></font>
</span>
</a>
</li>
<li>
<a href="?p=98">
<img width="220" height="125" src=" pic/mv_1x2_6.jpg" class="attachment-220x125 wp-post-image" alt="Play play - Jolin Tsai " /> <strong>Play play </strong>
<strong> Jolin Tsai </strong>
<span>
<font>Play play &#8211; Jolin Tsai </font>
<font><i></i></font>
<font><i></i>8377190<em>2 pic4-11-02</em></font>
</span>
</a>
</li>
<li>
<a href="?p=56">
<img width="220" height="125" src=" pic/mv_1x2_1.jpg" class="attachment-220x125 wp-post-image" alt=" Unfortunately, if - Jj Lin " /> <strong> Unfortunately, if </strong>
<strong> Jj Lin </strong>
<span>
<font> Unfortunately, if &#8211; Jj Lin </font>
<font><i></i></font>
<font><i></i>8457190<em>2 pic4-12-19</em></font>
</span>
</a>
</li>
<li>
<a href="?p=52">
<img width="220" height="125" src=" pic/mv_1x2_2.jpg" class="attachment-220x125 wp-post-image" alt=" Split heart - Wang Lihong " /> <strong> Split heart </strong>
<strong> Wang Lihong </strong>
<span>
<font> Split heart &#8211; Wang Lihong </font>
<font><i></i></font>
<font><i></i>10577190<em>2 pic5- pic- pic</em></font>
</span>
</a>
</li>
<li>
<a href="?p=48">
<img width="220" height="125" src=" pic/mv_1x2_3.jpg" class="attachment-220x125 wp-post-image" alt=" What kind of man - Jay Chou " /> <strong> What kind of man </strong>
<strong> Jay Chou </strong>
<span>
<font> What kind of man &#8211; Jay Chou </font>
<font><i></i></font>
<font><i></i>15377190<em>2 pic4-12-26</em></font>
</span>
</a>
</li>
<li>
<a href="?p=44">
<img width="220" height="125" src=" pic/mv_1x2_4.jpg" class="attachment-220x125 wp-post-image" alt=" What's next to you - Wei Chen " /> <strong> What's next to you </strong>
<strong> Wei Chen </strong>
<span>
<font> What's next to you &#8211; Wei Chen </font>
<font><i></i></font>
<font><i></i>7377190<em>2 pic4-12-23</em></font>
</span>
</a>
</li>
<li>
<a href="?p=38">
<img width="220" height="125" src=" pic/congcongnanian.jpg" class="attachment-220x125 wp-post-image" alt=" Fleet of Time - Faye Wong " /> <strong> Fleet of Time </strong>
<strong> Faye Wong </strong>
<span>
<font> Fleet of Time &#8211; Faye Wong </font>
<font><i></i></font>
<font><i></i>12377190<em>2 pic4-11-03</em></font>
</span>
</a>
</li>
</ul>
</div>
<!--2 Inland -->
<div class="mvList">
<ul>
<li>
<a href="?p=121">
<img width="220" height="125" src=" pic/mv_1x2_17.jpg" class="attachment-220x125 wp-post-image" alt=" about - Liu Yan " /> <strong> about </strong>
<strong> Liu Yan </strong>
<span>
<font> about &#8211; Liu Yan </font>
<font><i></i></font>
<font><i></i>1449662<em>2 pic4-10-14</em></font>
</span>
</a>
</li>
<li>
<a href="?p=116">
<img width="220" height="125" src=" pic/mv_1x2_141.jpg" class="attachment-220x125 wp-post-image" alt="Lucky Lucky- I'm still alive " /> <strong>Lucky Lucky</strong>
<strong> I'm still alive </strong>
<span>
<font>Lucky Lucky &#8211; I'm still alive </font>
<font><i></i></font>
<font><i></i>2251664<em>2 pic4-10-27</em></font>
</span>
</a>
</li>
<li>
<a href="?p=113">
<img width="220" height="125" src=" pic/mv_1x2_16.jpg" class="attachment-220x125 wp-post-image" alt=" forever ( Dance version )- Jane zhang " /> <strong> forever ( Dance version )</strong>
<strong> Jane zhang </strong>
<span>
<font> forever ( Dance version ) &#8211; Jane zhang </font>
<font><i></i></font>
<font><i></i>719622<em>2 pic4-10-22</em></font>
</span>
</a>
</li>
<li>
<a href="?p=110">
<img width="220" height="125" src=" pic/mv_1x2_15.jpg" class="attachment-220x125 wp-post-image" alt=" Chicken, chicken - Wang Rong " /> <strong> Chicken, chicken </strong>
<strong> Wang Rong </strong>
<span>
<font> Chicken, chicken &#8211; Wang Rong </font>
<font><i></i></font>
<font><i></i>4578418<em>2 pic4-10-29</em></font>
</span>
</a>
</li>
<li>
<a href="?p=102">
<img width="220" height="125" src=" pic/mv_1x2_8.jpg" class="attachment-220x125 wp-post-image" alt=" No change, no longer the old - Sun Zihan " /> <strong> It shouldn't be old anymore </strong>
<strong> Sun Zihan </strong>
<span>
<font> It shouldn't be old anymore &#8211; Sun Zihan </font>
<font><i></i></font>
<font><i></i>1237569<em>2 pic4-12-31</em></font>
</span>
</a>
</li>
<li>
<a href="?p=100">
<img width="220" height="125" src=" pic/mv_1x2_18.jpg" class="attachment-220x125 wp-post-image" alt=" The year the flowers bloom - Wei Chen " /> <strong> The year the flowers bloom </strong>
<strong> Wei Chen </strong>
<span>
<font> The year the flowers bloom - Wei Chen </font>
<font><i></i></font>
<font><i></i>1377190<em>2 pic4-10-03</em></font>
</span>
</a>
</li>
<li>
<a href="?p=64">
<img width="220" height="125" src=" pic/mv_1x2_13.jpg" class="attachment-220x125 wp-post-image" alt=" Silly - Zhao Yihuan " /> <strong> Silly </strong>
<strong> Zhao Yihuan </strong>
<span>
<font> Silly &#8211; Zhao Yihuan </font>
<font><i></i></font>
<font><i></i>1243769<em>2 pic4-10-29</em></font>
</span>
</a>
</li>
<li>
<a href="?p=60">
<img width="220" height="125" src=" pic/mv_1x2_11.jpg" class="attachment-220x125 wp-post-image" alt=" There is a kind of courage called giving up - Dingdang " /> <strong> There is a kind of courage called giving up </strong>
<strong> Dingdang </strong>
<span>
<font> There is a kind of courage called giving up &#8211; Dingdang </font>
<font><i></i></font>
<font><i></i>1358666<em>2 pic4-10-29</em></font>
</span>
</a>
</li>
<li>
<a href="?p=44">
<img width="220" height="125" src=" pic/mv_1x2_4.jpg" class="attachment-220x125 wp-post-image" alt=" What's next to you - Wei Chen " /> <strong> What's next to you </strong>
<strong> Wei Chen </strong>
<span>
<font> What's next to you &#8211; Wei Chen </font>
<font><i></i></font>
<font><i></i>7377190<em>2 pic4-12-23</em></font>
</span>
</a>
</li>
<li>
<a href="?p=38">
<img width="220" height="125" src=" pic/congcongnanian.jpg" class="attachment-220x125 wp-post-image" alt=" Fleet of Time - Faye Wong " /> <strong> Fleet of Time </strong>
<strong> Faye Wong </strong>
<span>
<font> Fleet of Time &#8211; Faye Wong </font>
<font><i></i></font>
<font><i></i>12377190<em>2 pic4-11-03</em></font>
</span>
</a>
</li>
</ul>
</div>
<!--3 Hong Kong and Taiwan -->
<div class="mvList">
<ul>
<li>
<a href="?p=143">
<img width="220" height="125" src=" pic/mv_1x2_30.jpg" class="attachment-220x125 wp-post-image" alt=" Glorious years (feat. Zhang Xinjie )" /> <strong> Glorious years </strong>
<strong>(feat. Zhang Xinjie )</strong>
<span>
<font> Glorious years &#8211; (feat. Zhang Xinjie )</font>
<font><i></i></font>
<font><i></i>6494100<em>2 pic4-09-05</em></font>
</span>
</a>
</li>
<li>
<a href="?p=140">
<img width="220" height="125" src=" pic/mv_1x2_28-220x125.jpg" class="attachment-220x125 wp-post-image" alt=" Find yourself - Voice of China season three " /> <strong> Find yourself </strong>
<strong> Voice of China season three </strong>
<span>
<font> Find yourself &#8211; Voice of China season three </font>
<font><i></i></font>
<font><i></i>584354<em>2 pic4-09-12</em></font>
</span>
</a>
</li>
<li>
<a href="?p=137">
<img width="220" height="125" src=" pic/mv_1x2_25.jpg" class="attachment-220x125 wp-post-image" alt=" tornado -G.E.M. Deng Zi chess " /> <strong> tornado </strong>
<strong>G.E.M. Deng Zi chess </strong>
<span>
<font> tornado &#8211; G.E.M. Deng Zi chess </font>
<font><i></i></font>
<font><i></i>3204658<em>2 pic4-09-26</em></font>
</span>
</a>
</li>
<li>
<a href="?p=106">
<img width="220" height="125" src=" pic/mv_1x2_10.jpg" class="attachment-220x125 wp-post-image" alt="mv_1x2_10" /> <strong> Say in your ear </strong>
<strong> Zhou Xingzhe </strong>
<span>
<font> Say in your ear &#8211; Zhou Xingzhe </font>
<font><i></i></font>
<font><i></i>1042425<em>2 pic4-12-31</em></font>
</span>
</a>
</li>
<li>
<a href="?p=104">
<img width="220" height="125" src=" pic/mv_1x2_9.jpg" class="attachment-220x125 wp-post-image" alt=" Blue Christmas - Xu ruohu " /> <strong> Blue Christmas </strong>
<strong> Xu ruohu </strong>
<span>
<font> Blue Christmas &#8211; Xu ruohu </font>
<font><i></i></font>
<font><i></i>6392509<em>2 pic4-12-23</em></font>
</span>
</a>
</li>
<li>
<a href="?p=98">
<img width="220" height="125" src=" pic/mv_1x2_6.jpg" class="attachment-220x125 wp-post-image" alt="Play play - Jolin Tsai " /> <strong>Play play </strong>
<strong> Jolin Tsai </strong>
<span>
<font>Play play &#8211; Jolin Tsai </font>
<font><i></i></font>
<font><i></i>8377190<em>2 pic4-11-02</em></font>
</span>
</a>
</li>
<li>
<a href="?p=69">
<img width="220" height="125" src=" pic/mv_1x2_21.jpg" class="attachment-220x125 wp-post-image" alt=" I exist - Nicholas Tse " /> <strong> I exist </strong>
<strong> Nicholas Tse </strong>
<span>
<font> I exist &#8211; Nicholas Tse </font>
<font><i></i></font>
<font><i></i>592295<em>2 pic4-10-14</em></font>
</span>
</a>
</li>
<li>
<a href="?p=56">
<img width="220" height="125" src=" pic/mv_1x2_1.jpg" class="attachment-220x125 wp-post-image" alt=" Unfortunately, if - Jj Lin " /> <strong> Unfortunately, if </strong>
<strong> Jj Lin </strong>
<span>
<font> Unfortunately, if &#8211; Jj Lin </font>
<font><i></i></font>
<font><i></i>8457190<em>2 pic4-12-19</em></font>
</span>
</a>
</li>
<li>
<a href="?p=52">
<img width="220" height="125" src=" pic/mv_1x2_2.jpg" class="attachment-220x125 wp-post-image" alt=" Split heart - Wang Lihong " /> <strong> Split heart </strong>
<strong> Wang Lihong </strong>
<span>
<font> Split heart &#8211; Wang Lihong </font>
<font><i></i></font>
<font><i></i>10577190<em>2 pic5- pic- pic</em></font>
</span>
</a>
</li>
<li>
<a href="?p=48">
<img width="220" height="125" src=" pic/mv_1x2_3.jpg" class="attachment-220x125 wp-post-image" alt=" What kind of man - Jay Chou " /> <strong> What kind of man </strong>
<strong> Jay Chou </strong>
<span>
<font> What kind of man &#8211; Jay Chou </font>
<font><i></i></font>
<font><i></i>15377190<em>2 pic4-12-26</em></font>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--MV premiere end -->
<!-- New song recommendation Start -->
<!-- title Start -->
<div class="songs_rcmd_title">
<div class="rcmd_left_title rcmd_title">
<span></span>
<a href="" class="play_btn"></a>
<a href="" class="add_btn"></a>
<a href="" class="more"></a>
</div>
<div class="rcmd_center_title rcmd_title">
<span></span>
<a href="" class="play_btn"></a>
<a href="" class="add_btn"></a>
<a href="" class="more"></a>
</div>
<div class="rcmd_right_title rcmd_title">
<span></span>
<a href="" class="play_btn"></a>
<a href="" class="add_btn"></a>
<a href="" class="more"></a>
</div>
</div>
<!-- title end -->
<!-- Recommended content Start -->
<div class="songs_rcmd" id="songs_rcmd">
<div class="songs_rcmd_cont">
<ul class="rcmd_left rcmd_cont" id="latest">
<li>
<a href="?p=196" class="musicName"> Love master &#8211; Cui Zige </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=194" class="musicName"> The time is now &#8211; Wang Lihong </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=192" class="musicName"> Love and sincerity &#8211; Ancient megabase </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=190" class="musicName"> Wild son &#8211; Su Yunying </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=188" class="musicName"> What's going on &#8211; Zhang jie </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=186" class="musicName"> Trees in winter &#8211; I'm still alive </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=184" class="musicName"> I laughed until I cried &#8211; A-Lin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=181" class="musicName"> You are so hard to forget &#8211; Li yuchun </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=180" class="musicName"> For thousands of years &#8211; Sun Nan </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
</ul>
<ul class="rcmd_center rcmd_cont" id="popular">
<li>
<a href="?p=216" class="musicName"> Unfortunately, if &#8211; Jj Lin </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=214" class="musicName"> Everything is ok &#8211; Karen mok </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=212" class="musicName"> What kind of man &#8211; Jay Chou </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=210" class="musicName"> Walk alone &#8211; Revival </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=207" class="musicName">Play play &#8211; Jolin Tsai </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=205" class="musicName"> hat-trick &#8211; Wei Chen </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=203" class="musicName"> The song of waves &#8211; Mr Wang </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=2 pic" class="musicName"> Amnesia goldfish &#8211; Catherine Yang </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=199" class="musicName"> Say go go travel &#8211; Li Xingliang </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
</ul>
<ul class="rcmd_right rcmd_cont" id="rank">
<li>
<a href="?p=234" class="musicName"> Writing in the past &#8211; Jay Chou </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=232" class="musicName"> The rose in the palm &#8211; Jj Lin </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=230" class="musicName"> Yangmingshan &#8211; Jay Chou </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=228" class="musicName"> Let first love be like yesterday &#8211; You Hongming </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=226" class="musicName"> Guilt &#8211; A-Lin</a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=224" class="musicName"> The memories of two people lived alone &#8211; Ada </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=222" class="musicName"> Blue Christmas &#8211; Xu ruohu </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=220" class="musicName"> I suddenly miss you very much (Live) &#8211; Ancient megabase </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
<li>
<a href="?p=218" class="musicName"> This time I will never let go (Live) &#8211; Sun Nan </a>
<a class="shareIcon" href="javascript:;"></a>
<a class="playIcon" href="javascript:;"></a>
</li>
</ul>
</div>
</div>
<!-- Recommended content end -->
<!-- Selected collection Start -->
<div class="omnibus hot_singer">
<div class="omnibus_cont new_common">
<div class="omnibus_title new_common_title">
<span></span>
<a href="" class="more"></a>
</div>
<ul id="omnibus_list">
<li class="post_big">
<a href="">
<img src="images/20141010110027.jpg.jpg" alt="" width="305" height="290">
<i></i>
</a>
<a href=""> Divine comedy has abused me thousands of times , I treat Shenqu like my first love </a>
</li>
<li class="post_small">
<a href="">
<img src="images/20141010110103.jpg" alt="" width="130" height="130">
<span></span>
</a>
<a href=""> When you are lonely, there is a second dimension </a>
</li>
<li class="post_small">
<a href="">
<img src='images/20141010110157.jpg' alt="" width="130" height="130">
<span></span>
</a>
<a href=""> Cute baby loves singing </a>
</li>
<li class="post_small">
<a href="">
<img src="images/20141010110216.jpg" alt="" width="130" height="130">
<span></span>
</a>
<a href=""> Not crazy , Not young </a>
</li>
<li class="post_small">
<a href="">
<img src='images/20141010110239.jpg' alt="" width="130" height="130">
<span></span>
</a>
<a href="">00 After that , Please note that !</a>
</li>
<li class="post_small">
<a href="">
<img src='images/20141013142335.jpg' alt="" width="130" height="130">
<span></span>
</a>
<a href=""> Let the festival break for a while </a>
</li>
<li class="post_small">
<a href="">
<img src="images/20141013142414.jpg" alt="" width="130" height="130">
<span></span>
</a>
<a href=""> If you laugh too much, you will get pregnant </a>
</li>
</ul>
</div>
<div class="hot_singer_cont new_common">
<div class="hot_singer_title new_common_title">
<span></span>
<a href="" class="more"></a>
</div>
<ul class="singer_list">
<li>
<a href="?p=369" class="singerPhoto">
<img src=" images/0025NhlN2yWrP4.jpg" alt="" width="70" height="70"></a>
<a href="?p=369" class="singer"> Jay Chou </a>
</li>
<li>
<a href="?p=357" class="singerPhoto">
<img src="images/001BLpXF2DyJe2.jpg" alt="" width="70" height="70"></a>
<a href="?p=357" class="singer"> Jj Lin </a>
</li>
<li>
<a href="?p=363" class="singerPhoto">
<img src=" images/003Nz2So3XXYek.jpg" alt="" width="70" height="70"></a>
<a href="?p=363" class="singer"> Eason Chan </a>
</li>
<li>
<a href="?p=367" class="singerPhoto">
<img src=" images/002azErJ0UcDN6.jpg" alt="" width="70" height="70"></a>
<a href="?p=367" class="singer"> Zhang jie </a>
</li>
<li>
<a href="?p=360" class="singerPhoto">
<img src='images/001fNHEf1SFEFN.jpg' alt="" width="70" height="70"></a>
<a href="?p=360" class="singer"> Deng Zi chess </a>
</li>
<li>
<a href="?p=345" class="singerPhoto">
<img src=" images/000CK5xN3yZDJt.jpg" alt="" width="70" height="70"></a>
<a href="?p=345" class="singer"> Xu Song </a>
</li>
<div style="clear:both;"></div>
</ul>
<ul class="singer_classify">
<li><a href="" class="singer"> Chinese male singer </a></li>
<li><a href="" class="singer"> Chinese female singers </a></li>
<li><a href="" class="singer"> Chinese girl group </a></li>
<li><a href="" class="singer"> Japanese and Korean male singers </a></li>
<li><a href="" class="singer"> Japanese and Korean female singers </a></li>
<li><a href="" class="singer"> Japan and South Korea </a></li>
<li><a href="" class="singer"> European and American male singers </a></li>
<li><a href="" class="singer"> European and American female singers </a></li>
<li><a href="" class="singer"> Europe and the United States </a></li>
</ul>
</div>
<div style="clear:both"></div></div>
<!-- Selected collection end -->
</section>
<!-- Music Hall modular end -->
<!-- The bottom template calls Start -->
<!-- Left side player Start -->
<div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div id="jquery_jplayer_N"class="jp-jplayer"></div>
<div class="jp-gui">
<!--<div class="jp-video-play"> <button class="jp-video-play-icon" role="button" tabindex="0"> Play </button> </div>-->
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"></div>
<div class="jp-duration" role="timer" aria-label="duration"></div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-previous" role="button" tabindex="0"> Last song </button>
<button class="jp-play" role="button" tabindex="0"> Play </button>
<button class="jp-next" role="button" tabindex="0"> Next song </button>
<button class="jp-stop" role="button" tabindex="0"> Pause </button>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0"> Mute </button>
<button class="jp-volume-max" role="button" tabindex="0"> Maximum volume </button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0"> repeat </button>
<button class="jp-shuffle" role="button" tabindex="0"> Random </button>
<!--<button class="jp-full-screen" role="button" tabindex="0"> Full screen </button>-->
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title"></div>
</div>
</div>
</div>
<div class="jp-playlist">
<div class="jp-playlist-box">
<ul>
<!-- This method uses an unordered list displayplaylist() Playlist -->
<li></li>
</ul>
</div>
</div>
<div class="jp-no-solution">
<span> Upgrade required </span>
Does your browser support playback , Please update the version
<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plug-in unit </a>.
</div>
</div>
<!-- Song list scroll bar -->
<div class="scrollBar">
<div class="bar"></div>
</div>
<!-- Player expand hide button -->
<button type="button" class="folded_bt" title=" Click shrink " id="btnfold">
<span></span>
</button>
<div id="listRemove"></div><!-- Remove all songs button -->
<div id="listClose"></div><!-- Expand and shrink the list of songs -->
</div>
<!-- Left side player end -->
<!-- Bottom Start -->
<div class="footer" id="footer">
<div class="footer_cont">
<div class="footer_cont_left">
<p>
<a href=""> About us </a>|<a href=""> Copyright notice </a>|<a href=""> Join us </a>|
<a href=""> Contact us </a>|<a href=""> Historical cooperation </a>|<a href=""> Record company </a>|
<a href=""> Advertising services </a>|<a href=""> link </a>|<a href=""> Help center </a>
</p>
<p>
Copyright 2 pic5-2 pic6 <a href="">www.xxffcc.com</a> All Rights Reserved
</p>
</div>
<div class="footer_cont_right">
<span> Pay attention to our </span>
<ul>
<li><a href=""><span></span></a></li><li><a href=""><span></span></a></li>
<li>
<a href="" class="twoCode">
<span></span>
<img class="tCode" src=" images/twoCode.jpg" width="100" height="100" alt=" QR code " />
</a>
</li>
<li><a href=""><span></span></a></li><li><a href=""><span></span></a></li>
</ul>
</div>
<div id="toTop"></div>
</div>
</div>
<!-- Bottom end -->
<script type="text/javascript" src=" js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!-- player js-->
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/playlist.js"></script>
<script type="text/javascript" src="js/player_database.js"></script>
<!-- player js-->
<!-- The bottom template calls end -->
</body>
</html>

Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web front end Zero basis - Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
Suitable for children's shoes from entry to advanced ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here


5、 ... and 、 The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

*1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduates HTML Templates 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

*3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

6、 ... and 、 more HTML Final homework ( Download the finished product )

>>> Poke me >>> Click to enter 200 For example, the final assignment

200 Multiple cases HTML5 Final assessment big homework source code contain personal 、 food 、 company 、 School 、 tourism 、 Online retailers 、 Pets 、 Electrical appliances 、 The tea 、 Home Furnishing 、 The hotel 、 dance 、 Comic 、 star 、 clothing 、 sports 、 cosmetics 、 logistics 、 Environmental protection 、 Books 、 Wedding dress 、 military 、 game 、 festival 、 To give up smoking 、 The movie 、 Photography 、 Culture 、 hometown 、 flower 、 gift 、 automobile 、 other It can meet the web design needs of College Students' Web homework , You can download what you like !
 Insert picture description here
 Insert picture description here

版权声明:本文为[@. code out the future]所创,转载请带上原文链接,感谢。 https://car.inotgo.com/2021/08/20210806180548272E.html