仿酷狗音乐移动端静态页面-1-CSDN博客

本文链接：https://blog.csdn.net/qq_43352505/article/details/129080538

本文展示了如何使用HTML和CSS创建酷狗音乐的移动端启动和登录页面。重点在于移动端布局的技巧，如使用`viewport`元标签，vw和vh单位以适应不同设备屏幕，以及处理margin合并的问题。启动页面包含一个定时器，5秒后自动跳转至登录页面。登录页面设计包括不同登录方式的选择，如微博、QQ和微信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿酷狗音乐移动端静态页面-1

记录自己学习web的日常

代码部分

1 启动页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.bg {
				width: 100vw;
				height: 100vh;
				background-image: url(kugouimg/start/bg1.png);
				background-size: cover;
				overflow: hidden;
			}

			.center {
				width: 76vw;
				/* height: 20vh; */
				/* background-color: #ff00ff; */
				margin: 25vh auto;
				display: flex;
				justify-content: space-between;
			}

			.login {
				/* display: inline; */
				width: 25vw;
			}

			.text {
				width: 48vw;
				/* padding-left: 6vw; */
				margin: auto 0;
			}

			h1 {
				color: #fff;
				font-size: 12vw;
				margin-bottom: 2vw;
			}

			p {
				font-size: 5vw;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="center">
				<img src="kugouimg/start/logo.png" alt="" class="login">
				<div class="text">
					<h1>酷狗音乐</h1>
					<p>音 乐 总 有 新 玩 法</p>
				</div>
			</div>
		</div>
		<script>
			// 启动页面定时跳转
			setTimeout("window.location.href = 'login.html'", 5000);
			//防止页面后退
			history.pushState(null, null, document.URL);
			window.addEventListener('popstate', function() {
				history.pushState(null, null, document.URL);
			});
		</script>
	</body>
</html>

2 登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				width: 100vw;
				height: 100vh;
				background-image: url(./kugouimg/login/bg1.png);
				background-size: cover;
				overflow: hidden;
			}
			.center {
				width: 70vw;
				/* height: 20vh; */
				/* background-color: #ff00ff; */
				margin: 15vh auto;
				display: flex;
				justify-content: space-between;
			}
			
			.logo {
				/* display: inline; */
				width: 20vw;
			}
			
			.text {
				width: 48vw;
				/* padding-left: 6vw; */
				margin: auto 0;
			}
			
			.h1 {
				color: #fff;
				font-size: 9vw;
				margin-bottom: 2vw;
			}
			
			p {
				font-size: 5vw;
				color: #fff;
			}
			.btn-part{
				width: 70vw;
				margin: 25vh auto 0 auto;
				/* display: flex; */
				/* background-color:yellow; */
			}
			.btn{
				width: 70vw;
				height: 5vh;
		    border-radius: 2.5vh;
				border: none;
				color: #fff;
				font-size: 3vh;
			}
			.login{
				background-color: #0c97e6;
			}
			.reg{
				background-color: #0ce6c4;
				margin-top: 1vh;
			}
			.alert{
				margin-top: 8vh;
				text-align: center;
				font-size: 2vh;
			}
			.other-login{
				width: 70vw;
				height: 10vh;
				margin: 6vh auto 0 auto;
				/* background-color: yellow; */
				display: flex;
				justify-content: space-between;
			}
			.other-login img{
				width: 6vh;
				/* margin: 0 auto; */
			}
			.other-login div{
				width: 23vw;
				padding: 0 3vh;
			}
			.other-login p{
				margin-top: 1vh;
				font-size: 2vh;
				padding-left: 2vw;
			}
			.statement{
				margin-top: 4vh;
				text-align: center;
				font-size: .5vh;
			}
			.statement a{
				text-decoration: none;
			}
		</style>
	<body>
		<div class="bg">
			<div class="center">
				<img src="./kugouimg/login/logo.png" alt="" class="logo">
				<div class="text">
					<p class="h1">酷 狗 音 乐</p>
					<p>音 乐 总 有 新 玩 法</p>
				</div>
			</div>
			<div class="btn-part">
				<button class="btn login">登 录</button>
				<button class="btn reg">注 册</button>
			</div>
			<p class="alert">其 他 登 录 方 式</p>
			<div class="other-login">
				<div class="blog">
					<img src="./kugouimg/login/sina.png" alt="">
					<p>微博</p>
				</div>
				<div class="qq">
					<img src="./kugouimg/login/qq.png" alt="">
					<p>QQ</p>
				</div>
				<div class="wechat">
					<img src="./kugouimg/login/weixin.png" alt="">
					<p>微信</p>
				</div>
			</div>
			<p class="statement">登 录 代 表 你 同 意 <a href="#">酷 狗 服 务</a> 和 <a href="#">隐 私 条 款</a></p>
		</div>
	</body>
</html>

一些需要注意的点

1、移动端布局

在head中声明

<meta name="viewport" content="width=device-width, initial-scale=1.0">

可以有效的防止图片在布局中变形失真。
2. 移动端布局要注意ui给的设计图与实际终端的像素的比例，如果自己进行开发训练，可以使用vw，vh来作为单位。这里vw表示移动终端的屏幕宽度，1vw代表站移动终端宽度的1%，即100vw等于终端屏幕宽度。vh作为高度单位，同上。vw，vh始终跟随移动终端的尺寸进行动态变化。