运用简单的HTML、CSS建立一个音乐网站模板

the_good_kid

已于 2022-04-29 21:14:53 修改

阅读量1w

点赞数 17

分类专栏：学习文章标签： css html js

于 2020-11-26 17:49:27 首次发布

本文链接：https://blog.csdn.net/qq_45811913/article/details/110198618

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目已开源
如需代码请在码云或者github上下载
请私信或评论联系我
码云：
GitHub：
请下载后在码云、GitHub上点击star或者follow，您的关注是对我最大的支持！
在这里插入图片描述
代码节选如下如下（css为嵌入样式）：

<!DOCTYPE html>
<html>

<head>
    <title>
        HELLOMUSIC
    </title>
    <style>
        .logo {
            list-style-type: none;
            background-color: #e2ffe2;
            overflow: hidden;
            text-shadow: 5px 5px 5px #5f9ea0;
            height: 75px;
        }


        .logo div a:hover {
            background-color: #7fdacd;
        }

        .yi {
            float: left;
        }

        .er {
            float: left;
        }

        .si {
            float: left;
   ></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Touch </a></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Get Lucky</a></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Beyond</a></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Motherhood</a></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Fragments of Time</a></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Doin’ It Right</a></li>
            <li><a href="https://music.douban.com/subject/22951704/" target="_blank">Contact(featuring DJ Falcon)</a>
            </li>
        </ul>
        <hr />
    </div>
    <div class="float2">
        <img id="LSD" align='left' class="transition-all" src="IMG_0009(20201125-123037).JPG" width="160">
        &nbsp &nbsp &nbsp"Random Access Memories" is the fourth official album released by the French duo duo duo punk.
        The album is
        supervised by orchestra members Thomas Bengut and Guy-Manuel de Homan-Christo. It is a standard record. A total
        of
        13 songs were recorded, and they were released on May 17, 2013 through Daft Life Records. The album won the
        Grammy
        Awards for "Album of the Year" and "Best Electronic Dance Album" in January 2014. Silly Punk’s original
        intention of
        making "Random Access Memories" was to pay tribute to the Michael Jackson, Car Chorus, and Stilidan Chorus in
        the
        late 1970s and early 1980s. However, when silly punk recorded "Random Access Memories", it used a different
        recording method from previous studio albums, that is, in the process of recording the album, many musicians
        were
        invited to perform live recording in professional recording studios. Instead of directly sampling other people's
        song fragments. "Random Access Memories" is mainly composed of Chic lead singer Nile Rogers. In terms of
        planning,
        both dumb punk and Nile Rogers respect each other's opinions.
    </div>
    <p style="font-size: 60px;margin-left: 3%;">&nbsp &nbsp &nbsp &nbsp&nbsp &nbsp &nbsp &nbsp</p>
    <br />
    <h1 style="margin-left: 3%;">歌曲介绍</h1>
    <div class="c1" style="margin-left: 5%;">
        <a href="#Holy"><img src="IMG_5535(20201015-145412).JPG" width="160"></a>
    </div>
    <div class="c2" style="margin-left: 3%;">
        <a href="#Love yourself"><img src="IMG_3197(20200615-001951).JPG" width="160"></a>
    </div>
    <div class="c3" style="margin-left: 3%;">
        <a href="#What do you mean"><img src="IMG_5536(20201015-145445).JPG" width="160"></a>
    </div>
    <div class="c4" style="margin-left: 3%;">
        <a href="#Sorry"><img src="IMG_5452(20200924-134609).JPG" width="160"></a>
    </div>
    <div class="c5" style="margin-left: 3%;">
        <a href="#Intentions"><img src="IMG_3187(20190812-183345).JPG" width="160"></a>
    </div>
    <div class="c6" style="margin-left: 3%;">
        <a href="#Come Around Me"><img src="IMG_0009(20201125-123037).JPG" width="160"></a>
    </div>
    <br />
    <br />
    <p style="font-size: 50px;margin-left: 20%;">&nbsp &nbsp &nbsp &nbsp&nbsp &nbsp &nbsp &nbsp</p>
    <div class="tiao">
        <b id="Holy">Holy</b>
        <p>&nbsp &nbsp &nbsp &nbspOn September 15, New York, Grammy Award winner and global superstar Justin Bieber
            officially confirmed the release of a new music. He cooperated with rapper chance the rapper to release
            a
            new
            single "holy". This song marks Bieber's return to pop music. Just a few months ago, Bieber and quavo's
            8x
            platinum single "ideas" topped the radio charts in June, the seventh time in his career that he won the
            billboard pop songs chart. The single was also featured in a short film directed by Colin Tilley.</p>
        <br />
        <b id="Love yourself">Love yourself</b>
        <p>&nbsp &nbsp &nbsp &nbspLove yourself is a popular song sung by Canadian male singer Justin Bieber. The
            lyrics
            are
            jointly composed by Justin Bieber, ed Hiran and Benny blank. The composition is in charge of ED Hiran.
            Benny
            blank is the music producer. Josie Godwin is responsible for the mixing of singing and music. The song
            was
            included in Justin Bieber's fourth studio album, purpose, and released through Isle records on November
            9,
            2015
            as the third single to promote the album.

            The song is Justin Bieber's third No. 1 single on the Billboard's top 100 singles list and won the No. 1
            spot on
            February 13, 2016 for two weeks. In other countries, the song is ranked in Australia, the United
            Kingdom,
            Canada, New Zealand and other regions of the music version champion [6]. In January 2016, the song was
            certified
            as double platinum single with more than 2 million sales in the United States. In May 2016, the song won
            the
            "most popular pop rock song" award at the National Music Awards.</p>
        <br />
        <b id="What do you mean">What do you mean</b>
        <p>&nbsp &nbsp &nbsp《What Do You Mean？ 》It is a popular song sung by Canadian male singer Justin Bieber. The
            lyrics
            and music score of the song are jointly written by Jason Boyd, Justin Bieber and Mason levy. 《What Do
            You
            Mean？
            》As the first single to promote the album, it was released through Island Records on August 28, 2015 and
            included in Justin Bieber's fourth studio album "purpose" released on November 13, 2015.
            《What Do You Mean？ 》It is the 23rd American billboard song to win the first week of the top 100 single,
            and
            it
            is also Justin Bieber's first single on the list. In other regions, the song has won the music charts of
            Britain, France, Europe, Australia, Austria and other 20 regions. January 6, 2015, what do you mean?
            》Won
            the
            "most popular song" award from the 42nd people's Choice Award.

            The single was named one of "101 best songs of 2015" by spin magazine and ranked No.1.</p>
        <br />
        <b id="Sorry">Sorry</b>
        <p>&nbsp &nbsp &nbsp"Sorry" is a popular song sung by Canadian male singer Justin Bieber. The lyrics and
            music
            score
            are jointly written by Julia Mack, Justin Bieber, skyrex, sonny Moore and Michael Tucker. Skyrex and
            blood
            are
            responsible for the music publishing. As the second single to promote the album, the song was released
            by
            Isla
            records on October 23, 2015, and was included in Justin Bieber's fourth studio album, purpose.
            "Sorry" is Justin Bieber's second top 100 single on the billboard of the United States. It won the top
            of
            the
            list on January 23, 2016 and won the title for three consecutive weeks. In other regions, the song also
            won
            the
            top of 13 national music charts, including Ireland, Denmark, the Netherlands, Canada, South Africa,
            Slovakia,
            Sweden and the United Kingdom. In May 2016, the song was nominated for the Billboard Music Award "best
            selling
            song".

            In December 2015, the song was named one of the "top 25 songs of the year" by Billboard magazine,
            ranking
            15th.
        </p>
        <br />
        <b id="Intentions">Intentions</b>
        <p>&nbsp &nbsp &nbsp"Intentions" is a song jointly recorded and sung by Canadian pop singer Justin Bieber
            and
            American rap group migos member quavo. The single was released through universal records on February 14,
            2020
        </p>
        <br />
        <b id="Come Around Me">Come Around Me</b>
        <p>&nbsp &nbsp &nbsp"Come around me" is a song recorded and sung by Canadian pop male singer Justin Bieber.
            It
            is
            included in Justin Bieber's fifth studio album "changes", which is the third song in the album .The song
            is
            one
            of 17 songs from Justin Bieber's fifth studio album changes</p>
    </div>
</body>

</html>

项目已开源
如需代码请在码云或者github上下载
码云：
GitHub：
请下载后在码云、GitHub上点击star或者follow，您的关注是对我最大的支持！

the_good_kid

关注

17
点赞
踩
94

收藏

觉得还不错? 一键收藏
23
评论
运用简单的HTML、CSS建立一个音乐网站模板

代码如下（css为嵌入样式）：<!DOCTYPE html><html><head> <title> HELLOMUSIC </title> <style> .logo { list-style-type: none; background-color: #e2ffe2; overflow: hidde
复制链接

扫一扫