HTML+CSS实现网易云音乐首页（手机版）

怎么利用HTML和CSS实现手机版的响应式页面（静态）呢？当然是要利用css的弹性盒子（display）和vm与rem啦，话不多说，请看下面的效果图和代码。效果图：用到的图片：实现前端页面的HTML代码（注：图片中没有的图标，是用的阿里巴巴矢量图标库的矢量图标）：<!DOCTYPE html><html><head><meta charset="utf-8

yujiaj

5888人浏览 · 2021-07-01 14:26:14

yujiaj · 2021-07-01 14:26:14 发布

怎么利用HTML和CSS实现手机版的响应式页面（静态）呢？当然是要利用css的弹性盒子（display）和vm与rem啦，话不多说，请看下面的效果图和代码。

效果图：

用到的图片：

实现前端页面的HTML代码（注：图片中没有的图标，是用的阿里巴巴矢量图标库的矢量图标）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>首页</title>
		<!-- 引用阿里巴巴矢量图标 -->
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<!-- 引用CSS样式 -->
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!--头部-->
		<div class="top_big">
			<div class="top">
				<i class="iconfont font22"><img src="img/top-01.png"/></i>
				<input type="search" name="" class="iconfont font22" value="" placeholder="&#xe6e7;&nbsp;&nbsp;搜索音乐、歌词、电台" />
				<i class="iconfont font22"><img src="img/top-02.png"/></i>
			</div>
		</div>
		
		<!--主体内容-->
		<div class="main">
			<!--导航-->
			<div class="main_nav">
				<a href="#">个性推荐</a>
				<a href="#">歌单</a>
				<a href="#">主播电台</a>
				<a href="#">排行榜</a>
			</div>
			
			<!--焦点图-->
			<div class="banner">
				<img src="img/banner.png"/>
			</div>
			
			<!--内容二-->
			<div class="main_two">
				<span>
					<img src="img/content-01.png"/>
					<p>私人FM</p>
				</span>
				<span>
					<img src="img/content-02.png"/>
					<p>开启个性推荐</p>
				</span>
				<span>
					<img src="img/content-03.png"/>
					<p>云音乐新歌榜</p>
				</span>
			</div>
			
			<!--推荐歌单-->
			<div class="recommend">
				<div class="recommend_top">
					<span>
						<img src="img/content-10.png"/>
						<span>推荐歌单</span>
					</span>
					<a href="#" class="iconfont font22">更多&#xe62d;</a>
				</div>
				
				<div class="recommend_content">
					<span>
						<i>
							<a href="#">
								<img src="img/content-04.png"/>
								<p>华语女声||那些入耳入心的代表曲</p>
							</a>
						</i>
						<i>
							<a href="#">
								<img src="img/content-05.png"/>
								<p>【钢琴后摇】&nbsp;初雪点地，窸窣低语</p>
							</a>
						</i>
						<i>
							<a href="#">
								<img src="img/content-06.png"/>
								<p>云音乐热歌榜</p>
							</a>
						</i>
					</span>
					
					<span>
						<i>
							<a href="#">
								<img src="img/content-04.png"/>
								<p>华语女声||那些入耳入心的代表曲</p>
							</a>
						</i>
						<i>
							<a href="#">
								<img src="img/content-05.png"/>
								<p>【钢琴后摇】&nbsp;初雪点地，窸窣低语</p>
							</a>
						</i>
						<i>
							<a href="#">
								<img src="img/content-06.png"/>
								<p>云音乐热歌榜</p>
							</a>
						</i>
					</span>
				</div>
			</div>
		</div>
		
		<!--脚部-->
		<div class="footer">
			<i>
				<span class="iconfont font22">&#xe63b;</span>
				<p>发现音乐</p>
			</i>
			<i>
				<span class="iconfont font22">&#xe724;</span>
				<p>我的音乐</p>
			</i>
			<i>
				<span class="iconfont font22">&#xe604;</span>
				<p>朋友</p>
			</i>
			<i>
				<span class="iconfont font22">&#xe618;</span>
				<p>账号</p>
			</i>
		</div>
	</body>
</html>

下面就是重要的CSS代码啦：（主要还是利用CSS的弹性盒子（display）属性和VM与REM属性的）

/*全局样式*/
*{margin:0;padding: 0;box-sizing: border-box;}
li{list-style:none;}
a{text-decoration: none;}
i{font-style: normal;}
img{display:block;border:none;}
html,body{height:100%;}
html{font-size:26.66667vw;}
body{font-size:14px;}
.left{float: left;}
.right{float: right;}

/*头部*/
.top_big{
	width:100%;
	height:0.44rem;
	color: #cbcbcb;
	font-size: 26px;
	position: absolute;
	top:0;
	left:0;
	background:#d43b33;
	z-index: 999;
}
.top{
	display: flex;
	justify-content: space-between;
	height: 100%;
	align-items: center;
	padding:0 0.125rem 0 0.14rem;
}
.top>i:first-child>img{
	width: 0.19rem;
    height: 0.25rem;
}
.top>i:last-child>img{
	width: 0.23rem;
    height: 0.23rem;
}
.top>input{
	width: 2.67rem;
    height: 0.3rem;
    color: #dbdbdb;
    font-size: 14px;
    text-align: center;
    border: none;
	outline: none;
	border-radius: 0.05rem;
}

/*主体内容*/
/*导航*/
.main{
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 0.44rem 0 0 0;
	padding-bottom: 0.7rem;
}
.main_nav{
	width: 100%;
	height: 0.4rem;
	display: flex;
	line-height: 0.4rem;
	font-size: 14px;
	justify-content: space-between;
	padding: 0 0.25rem 0 0.13rem;
	border-bottom:  0.005rem solid #cdc2c8;
}
.main_nav a{
	color: #393939;
	text-align: center;
}
.main_nav a:first-child{
	width: 0.7rem;
	height: 100%;
	color: #bb4537;
	border-bottom: 0.02rem solid #ca403d;
	box-sizing: border-box;
}

/*焦点图*/
.banner,.banner>img{
	width: 100%;
	height: 1.38rem;
}

/*内容二*/
.main_two{
	width: 100%;
	height: 1.04rem;
	display: flex;
	justify-content: space-between;
	padding: 0.15rem 0.345rem 0.15rem 0.43rem;
	border-bottom: 0.005rem solid #e0e1e3;
	margin-bottom: 0.2rem;
}
.main_two>span{
	width: 0.72rem;
	height: 100%;
	font-size: 12px;
	text-align: center;
	position: relative;
}
.main_two>span>img{
	width: 0.55rem;
	height: 0.55rem;
	display: inline-block;
	vertical-align: middle;
}
.main_two>span>p{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

/*推荐歌单*/
.recommend{
	width: 100%;
	padding: 0 0.1rem 0 0.1rem;
}
.recommend_top{
	height: 0.16rem;
	color: #323335;
	display:flex;
	justify-content: space-between;
}
.recommend_top>span>img{
	width: 0.16rem;
	height: 0.16rem;
	display: inline-block;
	margin-right: 0.06rem;
}
.recommend_top>span>span{font-size: 14px;}
.recommend_top>a{font-size: 12px;color: #696b6a;}
.recommend_content{
	width: 100%;
	padding-top: 0.2rem;
}
.recommend_content span{
	display:flex;
	justify-content: space-between;
}
.recommend_content i{
	width: 1.13rem;
	height: 1.52rem;
	font-size: 12px;
	position: relative;	
}
.recommend_content i>a>img{
	width: 100%;
	height: 1.13rem;
}
.recommend_content i>a{color: #424345;}
.recommend_content i>a>p{
	height: 0.34rem;
	position: absolute;
	bottom: 0;
	left: 0;
}
.recommend_content span:first-child{margin-bottom: 0.18rem;}

/*脚部*/
.footer{
	width: 100%;
	height: 0.49rem;
	position: absolute;
	bottom:0;
	left:0;
	background-color: rgba(0,0,0,0.75);
	display:flex;
	justify-content: space-between;
	padding: 0.07rem 0.28rem 0 0.28rem;
	
}
.footer>i{
	width: 0.5rem;
	height: 0.42rem;
	color: #a6a8a7;
	text-align: center;
	font-size: 10px;
}
.footer>i>span{font-size: 25px;}
.footer>i:first-child{color: #fff;}

下面给大家放上源文件的地址链接：https://pan.baidu.com/s/1j9_zvovted9zeNSOPoCxUQ
提取码：y1yw

好了，快去试试吧。