静态网页课程设计——贾斯汀比伯歌手介绍(HTML+CSS+JavaScript)

2024-01-08 06:19:17

前言

使用技术:HTML+CSS+JS
主要内容:对贾斯汀比伯这名歌手进行介绍,还有他的几首比较经典的歌曲以及视频观看。

简单介绍

本网站是以介绍贾斯汀比伯为主题而展开,主要由首页、《Changes》和音乐视频组成的。首页下面的是对他介绍的简介、早年经历、从商经历和音乐作品。主要采用了JavaScript、CSS、button、input、html、video、audio、div、盒子、超链接、表单等技术。

基本内容

1、首页

刚进入首页,会有一个弹窗,弹出hello,点击确定进行首页!
在这里插入图片描述

首页上方是一个歌手照片的轮播图,可自由切换。
在这里插入图片描述

往下走,有一个锚点链接,可以对当前页面内容进行跳转。
在这里插入图片描述

接着往下,是对歌手的文字介绍。
在这里插入图片描述

以及歌手所发布的专辑等。
在这里插入图片描述

部分代码如下:

<h2 class="class3">目录:</h2>
      <h3 style="text-indent: 3em"><a href="#1" color:grey>·简介</a></h3>
      <h3 style="text-indent: 3em"><a href="#2"> ·早年经历</a></h3>
      <h3 style="text-indent: 3em"><a href="#3">·从商经历</a></h3>
      <h3 style="text-indent: 3em"><a href="#4"> ·音乐作品</a></h3>
<div id="1"><h2 class="class3">简介</h2></div>
    	<div style="height: 705px ">
    		<a href="javascript:;" ><img src="images/1.jpg" align="right" border="grey" /> </a>         
<p class="class1" ><a href="javascript:;#">贾斯汀比伯(Justin Bieber)</a>,1994年3月1日出生于加拿大斯特拉特福,加拿大歌手。</p> 
<p class="class1">2008年,贾斯汀·比伯被其经纪人斯科特在YouTube发现,随后被亚瑟小子培养进入歌坛。2009年发行第一张个人专辑<a href="javascript:;">《My World》</a>。2010年,贾斯汀·比伯获得美国AMA音乐奖年度艺人。2011年8月29日,出席第28届MTV音乐录影带大奖,获得最佳男歌手录影带奖。9月20日,获得欧洲MTV音乐奖的最佳流行歌手、最佳男歌手以及最受乐迷喜爱三项提名。11月7日比伯获得最佳流行歌手奖和最佳男歌手奖。12月3日,比伯与亚瑟小子在美国迪士尼公园同台献唱。2013年,比伯发行现场专辑<a href="javascript:;">《Believe Acoustic》</a>,并凭借专辑<a href="javascript:;">《Believe》</a>获得了第40届AMA全美音乐奖最佳艺人奖。2016年,凭借<a href="javascript:;">《Where Are U Now》</a>夺得第58届格莱美最佳舞曲录制奖。2016年11月20日,获得2016AMA全美音乐奖最受欢迎流行/摇滚男歌手,凭借<a href="javascript:;">《Sorry》</a>获得年度录影带,凭借<a href="javascript:;">《Purpose》</a>获得最受欢迎流行/摇滚专辑,凭借<a href="javascript:;">《Love Yourself》</a>获得最受欢迎流行/摇滚歌曲。</p>
<p class="class1">2020年1月8日,贾斯汀·比伯在社交媒体上发文,透露自己患上莱姆病。</p></div>
2、歌曲播放页面

我们点击下图部分,可对页面进行切换。
在这里插入图片描述

点击Changes切换到歌曲播放页面,如图:
在这里插入图片描述
点击右侧的播放按钮,可以对歌曲进行播放。

部分代码如下:

<h1 style="text-align: center;" class="class3">贾斯汀比伯(Justin Bieber)</h1>
<div class="imgBox" align="center">
    <img class="img-slide img1" src="images/5.jpg" alt="1">
    <img class="img-slide img2" src="images/6.gif" alt="2">
    <img class="img-slide img3" src="images/7.jpeg" alt="3">
</div>
3、音乐视频页面

点击音乐视频进行音乐视频界面,如图:
在这里插入图片描述

点击视频播放按钮,可以对视频进行播放。
在这里插入图片描述

部分代码如下:

<script type="text/javascript">
    var index=0;
    function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    setInterval(ChangeImg,2000);
</script>

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1at4y1Z7Rv/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

文章来源:https://blog.csdn.net/qq_47188967/article/details/135382119
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。