html实训QQ音乐官网首页制作

QQ音乐官网首页

html

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="Shortcut Icon" href="./images/QQm.jpg">
	<meta charset="UTF-8">
	<title>qqmusic</title>
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<!-- <img class="khd" src=".images/khd.jpg" alt=""> -->
	<div class="khdx">
		<img class="khd" src="./images/khd.jpg" alt="">
	</div>
	<!-- 头部分 -->
	<div class="header">
		<a href="https://y.qq.com/" target="_blank">
			<img class="logo" src="./images/logo.png" alt="">
		</a>
		<div class="header_menu">
			<ul>
				<li>音乐馆</li>
				<li>我的音乐</li>
				<li>客户端</li>
				<li>音乐号</li>
				<li>VIP</li>
			</ul>
		</div>
		<div class="search">
			<input class="a" type="text" value="蒙面唱将猜猜猜">
			<a href="https://y.qq.com/portal/search.html#page=1&searchid=1&remoteplace=txt.yqq.top&t=song&w=%E8%92%99%E9%9D%A2%E5%94%B1%E5%B0%86%E7%8C%9C%E7%8C%9C%E7%8C%9C"target="_blank"><img class="find" src="./images/search.png" alt="搜索"></a>
			<span class="login">登录</span>
		</div>
		<span class="green">开通绿钻豪华版</span>
		<span class="pay">开通付费包</span>
	</div>
	<!-- banner部分 -->
	<div class="banner">
		<div class="all">
			<div class="title">新歌发布</div>
			<div class="title_menu">
				<div class="l">
				<ul>
					<li>内地</li>
					<li>港台</li>
					<li>欧美</li>
					<li>韩国</li>
					<li>日本</li>
				</ul>
				</div>
				<div class="r">全部></div>
			</div>
			<div class="singer">
				<div>
					<img src="./images/11.jpg" alt="">
					<div>
						<span class="sing">我们的时光</span>
							<br>
						<span class="singp">TFBOYS</span>
					</div>
				</div>
				<div>
					<img src="./images/12.jpg" alt="">
					<div>
						<span class="sing">异想</span>
							<br>
						<span class="singp">陈翔</span>
					</div>
				</div>
				<div>
					<img src="./images/13.jpg" alt="">
					<div>
						<span class="sing">陪你听全世界</span>
							<br>
						<span class="singp">丢火车乐队</span>
					</div>
				</div>
				<div>
					<img src="./images/14.jpg" alt="">
					<div>
						<span class="sing">中国新歌声第二季 第4期</span>
							<br>
						<span class="singp">中国新歌声</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- middle部分 -->
	<div class="middle">
		<div class="title1">热门歌单</div>
			<div class="things">
				<div>
					<img src="./images/21.jpg" alt="">
					<div>
						<span class="thing">权威:香港英皇旗下歌手全收...</span>
							<br>
						<span class="bofang">播放量:42.5万</span>
					</div>
				</div>
				<div>
					<img src="./images/22.jpg" alt="">
					<div>
						<span class="thing">自创语言:历史老师听了也蒙...</span>
							<br>
						<span class="bofang">播放量:11.0万</span>
					</div>
				</div>
				<div>
					<img src="./images/23.jpg" alt="">
					<div>
						<span class="thing">YouTube点击量TOP100的ED...</span>
							<br>
						<span class="bofang">播放量:35.4万</span>
					</div>
				</div>
				<div>
					<img src="./images/24.jpg" alt="">
					<div>
						<span class="thing">一个人在家吃泡面绝对会哭...</span>
							<br>
						<span class="bofang">播放量:172.8万</span>
					</div>
				</div>
			</div>
	</div>
	<!-- bodyer部分 -->
	<div class="bodyer">
		<div class="next">
			<div class="title2">MV首播</div>
				<div class="title_menu1">
					<div class="l1">
						<ul>
							<li>全部</li>
							<li>内地</li>
							<li>港台</li>
							<li>欧美</li>
							<li>韩国</li>
							<li>日本</li>
						</ul>
					</div>
					<div class="r1">全部></div>
				</div>
				<div class="singer1">
					<div>
						<img src="./images/31.jpg" alt="">
						<div>
							<span class="sing1">Summer Storm</span>
								<br>
							<span class="singp1">제시카</span>
								<br>
							<span class="singp2">13.9万
							</span>
						</div>
					</div>
					<div>
						<img src="./images/32.jpg" alt="">
						<div>
							<span class="sing1">海胆</span>
								<br>
							<span class="singp1">陈奕迅</span>
								<br>
							<span class="singp2">10.3万</span>
						</div>
					</div>
					<div>
						<img src="./images/33.jpg" alt="">
						<div>
							<span class="sing1">我心翱翔</span>
								<br>
							<span class="singp1">SNH48</span>
								<br>
							<span class="singp2">1.8万</span>
						</div>
					</div>
					<div>
						<img src="./images/34.jpg" alt="">
						<div>
							<span class="sing1">你点的歌救了我(影视版)(《噗通...)</span>
								<br>
							<span class="singp1">A-Lin</span>
								<br>
							<span class="singp2">6272</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- footer部分 -->
	<div class="footer">
		<div class="later">
			<div class="first">
				<div class="load">
					<div class="explain">
						<span>下载QQ音乐客户端</span>
					</div>
					<div class="locn1">
						<div class="PC">
							<img src="./images/01.png" alt="PC版">
								<br>
							<span>PC版</span>
						</div>
						<div class="Mac">
							<img src="./images/02.png" alt="Mac版">
								<br>
							<span>Mac版</span>
						</div>
						<div class="Android">
							<img src="./images/03.png" alt="Android版">
								<br>
							<span>Android版</span>
						</div>
						<div class="iPhone">
							<img src="./images/04.png" alt="iPhone版">
								<br>
							<span>iPhone版</span>
						</div>
					</div>
				</div>
				<div class="product">
					<div class="explain">
						<span>特色产品</span>
					</div>
					<div class="locn2">
						<div class="Ksong">
							<img src="./images/05.png" alt="全民K歌">
								<br>
							<span>全民K歌</span>
								<br>
							<span>车载互联</span>
						</div>
						<div class="Super">
							<img src="./images/06.png" alt="Super Sound">
								<br>
							<span>Super Sound</span>
								<br>
							<span>QQ演出</span>
						</div>
						<div class="Qplay">
							<img src="./images/07.png" alt="QPlay">
								<br>
							<span>QPlay</span>
						</div>
					</div>
				</div>
				<div class="compete">
					<div class="explain">
						<span>合作链接</span>
					</div>
					<div class="locn3">
						<div class="left">
							<ul>
								<li>CJ E&M</li>
								<li>最新版QQ</li>
								<li>QQ浏览器</li>
								<li>星钻</li>
							</ul>
						</div>
						<div class="mid">
							<ul>
								<li>腾讯视频</li>
								<li>腾讯社交广告</li>
								<li>画报</li>
								<li>腾讯微云</li>
							</ul>
						</div>
						<div class="right">
							<ul>
								<li>手机QQ空间</li>
								<li>电脑管家</li>
								<li>黄钻活动</li>
								<li>更多</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="about">
				<span class="last">
					关于腾讯 | About Tencent | 服务条款 | 用户服务协议 | 隐私政策 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航
				</span>
					<br>
				<span class="last">
					Copyright  1998 - 2017 Tencent. All Rights Reserved.
				</span>
					<br>
				<span class="last">
					腾讯公司©版权所有 腾讯网络文化经营许可证
				</span>
			</div>
		</div>
	</div>
</body>
</html>

css

* {
	margin: 0;
	padding: 0;
}

img:hover {
	transform: scale(1.1);
}

.khdx {
	width: 205px;
	height: 162px;
	top:100px;
	background-color: red;
    /*display:block;*/
    position:fixed;
    right:50px;
}

.khd {

}

.header {
	width: 990px;
	margin: 0 auto;
}

.header>a {
	text-decoration: none;
}

.logo {
	width: 150px;
	height: 40px;
	margin-top: 10px;
	float: left;
}

.header_menu {
	display: inline-block;
	width: 350px;
}

.header ul {
	display: flex;
	justify-content: space-between;
}

.header_menu ul li {
	list-style: none;
	width: 80px;
	height: 50px;
	padding: 3px;
	text-align: center;
	line-height: 50px;
}

.header_menu ul li:hover {
	background-color: #31c27d;
	color: #ffffff;
	cursor: pointer;
}

.header_menu ul li:active {
	opacity: 0.7;
}

.search {
	display: inline-block;
}

.search .a {
	color:#cccccc;
}

.login {
	font-size: 13px;
}

.find {
	position: absolute;
	margin-top: 4px;
	margin-left: -22px;
}

.login {
	margin-left: 10px;
}

.green {
	display: inline-block;
	width: 120px;
	height: 23px;
	text-align: center;
	line-height: 23px;
	background-color: #31c37c;
	border-radius: 5%;
	margin-left: 10px;
	font-size: 13px;
}

.pay{
	display: inline-block;
	width: 100px;
	height: 23px;
	text-align: center;
	line-height: 23px;
	border: 1px solid #fafafa;
	border-radius: 5%;
	margin-left: 10px;
	font-size: 13px;
}

.login:hover,.green:hover,.pay:hover {
	cursor: pointer;
}

.banner {
	width: 100%;
	height: 580px;
	background-image: url(../images/10.jpg);
}



.all {
	width: 990px;
	height: 520px;
	margin: 0 auto;
}

.title {
	width: 200px;
	height: 50px;
	padding: 45px;
	text-align: center;
	margin:0 auto;
	font-size: 45px;
	color: #ffffff;
}

.title_menu {
	display: inline-block;
	width: 990px;
}

.all .l{
	float: left;
	margin-left: 280px;
}

.all .r {
	float: right;
	color:#939393;
	font-size: 5px;
}

.all .r:hover {
	color: #ffffff;
}

.all ul {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.title_menu ul li {
	list-style: none;
	width: 80px;
	height: 20px;
	padding: 3px;
	text-align: center;
	line-height: 20px;
	color:#939393;
	font-size: 5px;
}

.title_menu ul li:hover {
	color: #fff;
}

.singer {
	display: flex;
	width: 990px;
	height: 350px;
}

.singer div img {
	width: 247px;
	height: 247px;
}

.singer>div {
	text-align: center;
}

.singer>div>div {
	position: absolute;
	margin-top: -4px;
	width: 247px;
	height: 65px;
	background-color: #000;
	opacity: 0.7;
}

.sing {
	color: #ffffff;
	font-size: 10px;
}

.singp {
	color: #939393;
	font-size: 5px;
}

.title:hover,.title_menu>div:hover,.singer>div:hover {
	cursor: pointer;
}

.middle {
	width: 990px;
	height: 520px;
	margin: 0 auto;
}

.title1 {
	width: 200px;
	height: 50px;
	padding: 45px;
	text-align: center;
	margin:0 auto;
	font-size: 45px;
	color: #000000;
}

.things {
	display: flex;
	width: 990px;
	height: 350px;
}

.things div img {
	width: 247px;
	height: 247px;
}

.things>div {
	text-align: center;
}

.things>div>div {
	position: absolute;
	margin-top: -4px;
	width: 247px;
	height: 65px;
	background-color: #000;
	opacity: 0.7;
}

.thing {
	color: #ffffff;
	font-size: 10px;
}

.bofang {
	color: #939393;
	font-size: 5px;
}

.things>div:hover {
	cursor: pointer;
}

.bodyer {
	width: 100%;
	height: 410px;
	background-color: #e6e6e6;
}

.next {
	width: 990px;
	height: 520px;
	margin: 0 auto;
}

.title2 {
	width: 200px;
	height: 50px;
	padding: 45px;
	text-align: center;
	margin:0 auto;
	font-size: 45px;
	color: #000000;
}

.title_menu1 {
	display: inline-block;
	width: 990px;
}

.next .l1{
	float: left;
	margin-left: 292px;
}

.next .r1 {
	float: right;
	color:#939393;
	font-size: 5px;
}

.next ul {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.title_menu1 ul li {
	list-style: none;
	width: 65px;
	height: 20px;
	padding: 3px;
	text-align: center;
	line-height: 20px;
	color:#939393;
	font-size: 5px;
}

.title_menu1 ul li:hover {
	color:#000000;
}

.next .r1:hover {
	color:#000000;
}

.singer1 {
	display: flex;
	width: 990px;
	height: 350px;
}

.singer1 div img {
	width: 247px;
	height: 150px;
}

.singer1>div {
	text-align: center;
}

.singer1>div>div {
	width: 247px;
	height: 65px;
	/*background-color: #000;*/
	opacity: 0.7;
}

.sing1 {
	color: #5d4e53;
	font-size: 10px;
}

.singp1 {
	color: #bfbdbe;
	font-size: 5px;
}

.singp2 {
	color: #bfbdbe;
	font-size: 5px;
}

.title_menu1>div:hover,.singer1 img:hover,.singer1 span:hover {
	cursor: pointer;
}

.footer {
	width: 100%;
	height: 350px;
	background-color: #333333;
	padding-top: 60px;
}

.first {
	margin: 0 auto;
	width: 990px;
	display: flex;
	justify-content: space-between;
}

.explain {
	color:#7f7f7f;
}

.locn1 {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
	width: 270px;
}

.locn1>div {
	width: 60px;
	/*text-align: center;*/
	font-size: 6px;
	color: #7f7f7f;
}

.locn2 {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
	width: 270px;
}

.locn2>div {
	width: 88px;
	/*text-align: center;*/
	font-size: 6px;
	color: #7f7f7f;
}

.locn3 {
	display: flex;
	width: 320px;
	justify-content: space-between;
}

.locn3 ul li {
	list-style: none;
	font-size: 10px;
	margin-top: 3px;
	color: #7f7f7f;
}

.locn3>div {
	margin-top: 50px;
}

.about {
	width: 990px;
	text-align: center;
	margin: 100px auto;
}

.last {
	font-size: 7px;
	color:#7f7f7f;
}

图片

01.png
02.png
03.png
04.png
05.png
06.png
07.png
10.jpg
11.jpg
12.jpg
13.jpg
14.jpg
21.jpg
22.jpg
23.jpg
24.jpg
31.jpg
32.jpg
33.jpg
34.jpg
khd.jpg
qq.jpg
QQm.jpg
search.png
logo.png

  • 53
    点赞
  • 266
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值