web网页之薛之谦

全世界最开心的开心果

已于 2022-06-28 17:21:20 修改

阅读量568

点赞数 4

文章标签：前端 javascript css

于 2022-06-28 17:16:09 首次发布

本文链接：https://blog.csdn.net/cimengmenga/article/details/125506363

版权

先展示一下我自己写得成果，业余选手，写得不好

因为自己是薛之谦粉丝，所以就想写一个关于薛之谦的网页

网页有一个背景音乐，图片是可以循环播放的

*{
	margin: 0px;
	padding: 0px;

}

#div0{

	width: 100%;
	height: 100%;
	background: url("img/yekonge.jpg") no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}

#div1{
    width: 100%;
    height: 40px;
}
#div2{
	position: absolute;
    width: 1020px;
    height: 40px;
    position: relative;
    margin: auto;
}
#div2 ul{
    list-style: none;
}
#div2 ul li{
    float: left;
    line-height: 40px;
    text-align: center;
}

#div2>ul>li>ul{
    position: absolute;
    top:40px;
    display: none;
    width: 204px;
	background: url("img/yekonge.jpg");
}
#div2 ul li:hover ul {
    display: block;
}
a{
    text-decoration: none;
    color: white;
    display: block;
    width: 204px;
    height: 40px;

}
a:hover {
	color: darkturquoise;
    float: left;
}
h3{
	line-height: 20px;
	color: floralwhite;
}
#div3{
	position: absolute;
	float: left;
	margin-top: -10px;
	margin-left: 100px;
	width: 200px;
	height: 650px;
	text-align: center;
	padding: 40px 20px 20px 0px ;
	font-size: 16px;
}
#div3 a{
	width: 220px;
	height: 40px;
	
}
#div3 p{
	margin-top: 0px;
}
#div3 ul{
	text-align: center;
	line-height: 40px;
	list-style: none;
}
#div3 li{
	text-align: center;
	width: 220px;
	height: 40px;
}
#div5{
	margin-top: 0px;
	margin-left: 330px;
	color: aliceblue;
	line-height: 30px;
	width: 70%;
	height: 700px;
}
img{
	float: right;
	margin-right: 100px;
	margin-top: 50px;
	margin-left: 50px;
	display: block;
	width: 350px;
	height:233px;
}
#div5 h1{
	margin: 30px 20px 30px 10px ;
	text-align: center;
}
#div5 p{
	margin-left: 100px;
}

这是css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全世界最好的薛之谦2</title>
		<link rel="stylesheet" href="main0.css"/>
	</head>
	<body>
		<div id="div0">
			<script type="text/javascript">
				alert("欢迎来到全世界最好的薛之谦的主场！！");
			</script>
			<audio autoplay="autoplay" loop="loop" preload="preload" src = "music/薛之谦 - 天外来物.mp3"></audio>
			<div id="div1">
			    <div id="div2">
			        <ul>
						<li>
						    <a href="#">演艺经历</a>
						</li>
						
			            <li>
			                <a href="#">明星关系</a>
							<ul>
							    <li><a href="#">妻子</a></li>
							    <li><a href="#">子女</a></li>
							</ul>
			            </li>
			
			            <li>
			                <a href="#">个人生活</a>
			                <ul>
			                    <li><a href="#">经历店铺</a></li>
			                    <li><a href="#">感情生活</a></li>
			                </ul>
			            </li>
			
			            <li>
			                <a href="#">主要作品</a>
			                <ul>
			                    <li><a href="#">音乐单曲</a></li>
								<li><a href="#">参演电视剧</a></li>
								<li><a href="#">演唱会记录</a></li>
								<li><a href="#">综艺节目</a></li>
			                </ul>
			            </li>
			
			            <li>
			                <a href="#">获奖经历</a>
			            </li>
			        </ul>
			    </div>
			</div>
			
			<div id="div3" class="">
				<ul>
					<li><h3>音乐专辑</h3></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="#">怪咖</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="#">初学者</a></li>
					<li><a href="#">一半</a></li>
					<li><a href="#">绅士</a></li>
				</ul>
			</div>
			<div id="div5" class="">
				<img id="change" src="img/6.jpg"" alt="" />
				<script>
					var image = new Array();			
					image[0] = "img/1.jpg";			
					image[1] = "img/2.jpg";
					image[2] = "img/3.jpg";
					image[3] = "img/4.jpg";
					var i = -1;							
					document.getElementById("change").src = image[0];
					function changeImg(){					
						i = (i + 1) % image.length;		
						document.getElementById("change").src = image[i];
					}
					var b = self.setInterval("changeImg()", 3000);
				</script>
				<h1>薛之谦（Joker Xue）</h1>
				薛之谦（Joker Xue），1983年7月17日出生于上海市，中国内地流行乐男歌手、音乐制作人、影视演员，毕业于格里昂酒店管理学院。<br />
				2005年，因参加选秀节目《我型我秀》而正式出道。<br />
				2006年，发行首张同名专辑《薛之谦，随后凭借歌曲《认真的雪》获得广泛关注。<br />
				2007年，凭借专辑《你过得好吗》获得MusicRadio中国TOP排行榜内地年度最受欢迎男歌手奖。<br />
				2008年，发行专辑《深深爱过你》，同年在上海举行个人首场演唱会“谦年传说”。<br />
				2013年，专辑《几个薛之谦》获得MusicRadio中国TOP排行榜内地推荐唱片；同年，发行专辑《意外》。<br />
				2014年，获得第21届东方风云榜最佳唱作人奖；同年他还获得音悦V榜年度盛典年度创作歌手奖。<br />
				2015年6月，薛之谦首度担当制作人并发行原创EP《绅士》；同年，他还主演都市励志剧《妈妈像花儿一样》。<br />
				2016年，凭借EP《绅士》、《一半》获得第16届全球华语歌曲排行榜最受欢迎男歌手、五大最受欢迎男歌手奖、上海地区杰出歌手奖及最受欢迎创作歌手奖，而歌曲《初学者》则获得年度二十大金曲奖。<br />
				2017年4月，开启“我好像在哪见过你”全国巡回演唱会；同年，薛之谦获得第7届全球流行音乐年度盛典年度最佳男歌手及MusicRadio榜中国TOP排行榜内地最佳男歌手。<br />
				2018年7月，薛之谦“摩天大楼”世界巡回演唱会于北京站启程，整个巡演横跨4大洲，8个国家，21个城市，累计上演场次23场。<br />
				2019年，发行专辑《尘》。2020年12月31日，发行第11张个人专辑《天外来物》。
			</div>
		
		
		</div>
		
		
	</body>
</html>

这是html代码，里面有一点点js的内容

里面有一些的图片和音乐的地址需要自己改一下子的

整个文件的连接我放下面啦！

链接：https://pan.baidu.com/s/1r7pZviQI4mrLHIFeFfUhHQ
提取码：1111