精讲前端实战项目之移动端网易云首页（附源码）

2021-10-31 00:51:00

本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。

一、效果展示

二、技术要求

因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就好了。其中images中存放的是需要用到的图片。

精讲前端实战项目之移动端网易云首页（附源码）

三、源代码讲解

HTML部分

第一步：首先编写首页的搜索框

<header>
        <i class="iconfont">&#xe62f;</i>
        <form action="">
            <i class="iconfont">&#xe660;</i><input type="text" value="搜索音乐、歌词、电台">
        </form>
        <i class="iconfont">&#xe513;</i>
    </header>

第二步：中间的导航栏，包括个性推荐、歌单、主播电台、排行榜

<nav>
  <a href="">个性推荐</a>
  <a href="">歌单</a>
  <a href="">主播电台</a>
  <a href="">排行榜</a>
    </nav>

第三步：中间的主体部分推荐歌单，其中图片的引入是一样的，我就用了几张一样的图片，省的浪费时间下载。

<main>
  <section class="content">
    <article class="banner">
    <img src="../images/banner.png" alt="">
    </article>
    <article class="adcontent">
    <dl>
        <dt class="iconfont">&#xe627;
</dt>
        <dd>私人FM</dd>
    </dl>
    <dl>
        <dt class="iconfont">&#xe611;</dt>
        <dd>开启个性推荐</dd>
    </dl>
    <dl>
        <dt class="iconfont">&#xe513;</dt>
        <dd>云音乐新歌榜</dd>
    </dl>
    </article>
    <article class="title">
    <aside>
        <i class="iconfont">&#xe637;</i>
        <span>推荐歌单</span>
    </aside>
    <aside>
        <i>更多</i>
        <span>&gt;</span>
    </aside>
    </article>
    <article class="imglist">
    <dl>
        <dt>
      <img src="../images/pic_07.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_09.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_11.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_07.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_09.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_11.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_07.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_09.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_11.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_07.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_09.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    <dl>
        <dt>
      <img src="../images/pic_11.png" alt="">
        </dt>
        <dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd>
    </dl>
    </article>
  </section>
    </main>

第四步：最下方的页脚设置

<footer>
  <aside><i class="iconfont">&#xe612;</i><span>发现音乐</span></aside>
  <aside><i class="iconfont">&#xe503;</i><span>我的音乐</span></aside>
  <aside><i class="iconfont">&#xe615;</i><span>朋友</span></aside>
  <aside><i class="iconfont">&#xe504;</i><span>账号</span></aside>
    </footer>

CSS部分

首先要在头标签中引入css样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>网易云</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/webapp.css">
</head>

1.anchor.css

@charset "UTF-8";
*{
    box-sizing: border-box;
}
html,body{
    height:100%;
}
html{
    font-size:26.67vw;
}
body{
    display: flex;
    flex-direction: column;
}
/*header*/
header{
    height:0.49rem;
    background:#d43b33;
    display: flex;
    justify-content: space-between;
}
header>.iconfont{
    width:0.54rem;
    font-size:0.24rem;
    color:#fcf3ff;
    display: flex;
    align-items: center;
}
header form{
    flex:1;
    background:#fff;
    height:0.3rem;
    align-self: center;
    display: flex;
    border-radius:5px;
    overflow:hidden;
}
header form .iconfont{
    padding-left:0.47rem;
    display: flex;
    align-items: center;
    font-size:0.14rem;
    color:#c8c8c8;
}
header form input{
    border:none;
    flex:1;
    font-size:0.14rem;
    color:#c8c8c8;
    padding-left:0.09rem;
}
header>.iconfont:first-child{
    padding-left:0.15rem;
}
header>.iconfont:last-child{
    padding-left:0.18rem;
}
/*nav*/
nav{
    height:0.4rem;
    display: flex;
    justify-content: space-between;
    padding:0 0.12rem;
}
nav a{
    border-bottom:4px solid #fff;
    display: flex;
    align-items: center;
    padding:0.06rem;
}
nav a:first-child{
    color:#c04033;
    border-color:#c04033;
}
/*footer*/
footer{
    height:0.48rem;
    width:100%;
    position:fixed;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display: flex;
    justify-content: space-between;
    padding:0 0.27rem;
}
footer aside{
    display: flex;
    flex-flow:column;
    justify-content: center;
    align-items: center;
}
footer aside .iconfont{
    color:#b2a3a0;
    font-size:0.25rem;
}
footer aside span{
    color:#b2a3a0;
    font-size:0.1rem;
}
footer aside:first-child .iconfont{
    color: #fff;
}
footer aside:first-child span{
    color:#fff;
}

2.reset.css

@charset "utf-8";
html,body,ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,fieldset,select,img,textarea,legend{
    margin:0;
    padding:0;
}
body{
    font-size:16px;
}
img,fieldset{
    border:none;
}
img{
    vertical-align: middle;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{
    font-weight:500;
    font-style:normal;
}
a{
    text-decoration: none;
    color:#000;
}
ul,ol{
    list-style:none;
}
.clearfn:after{
    content:"";
    clear:both;
    display: block;
    overflow:hidden;
    height:0;
    visibility: hidden;
}

3.webapps.css

@charset "UTF-8";
*{
    box-sizing: border-box;
}
html,body{
    height:100%;
}
html{
    font-size:26.67vw;
}
body{
    display: flex;
    flex-direction: column;
}
/*header*/
header{
    height:0.49rem;
    background:#d43b33;
    display: flex;
    justify-content: space-between;
}
header>.iconfont{
    width:0.54rem;
    font-size:0.24rem;
    color:#fcf3ff;
    display: flex;
    align-items: center;
}
header form{
    flex:1;
    background:#fff;
    height:0.3rem;
    align-self: center;
    display: flex;
    border-radius:5px;
    overflow:hidden;
}
header form .iconfont{
    padding-left:0.47rem;
    display: flex;
    align-items: center;
    font-size:0.14rem;
    color:#c8c8c8;
}
header form input{
    border:none;
    flex:1;
    font-size:0.14rem;
    color:#c8c8c8;
    padding-left:0.09rem;
}
header>.iconfont:first-child{
    padding-left:0.15rem;
}
header>.iconfont:last-child{
    padding-left:0.18rem;
}
/*nav*/
nav{
    height:0.4rem;
    display: flex;
    justify-content: space-between;
    padding:0 0.12rem;
}
nav a{
    border-bottom:4px solid #fff;
    display: flex;
    align-items: center;
    padding:0.06rem;
}
nav a:first-child{
    color:#c04033;
    border-color:#c04033;
}
/*content*/
main{
    flex:1;
    background:#fff;
    overflow:auto;
}
main .content .banner{
    height:1.39rem;
}
main .content .banner img{
    height:100%;
    width:100%;
}
main .content .adcontent{
    display: flex;
    align-items: center;
    height:1.03rem;
    border-bottom: 1px solid #999;
}
main .content .adcontent dl{
    width:33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main .content .adcontent dl .iconfont{
    width:0.54rem;
    height:0.54rem;
    border:1px solid #d63934;
    border-radius:50%;
    font-size:0.25rem;
    color:#d2382c;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .content .adcontent dl:nth-child(2) .iconfont{
    font-size:0.35rem;
}
main .content .adcontent dl dd{
    font-size:0.11rem;
    margin-top:0.07rem;
}
main .title{
    height:0.45rem;
    display: flex;
    justify-content: space-between;
    padding:0 0.1rem;
}
main .title aside:first-child{
    padding-top:0.2rem;
}
main .title aside:first-child .iconfont{
    font-size:0.15rem;
    color:#c04736;
}
main .title aside:first-child span{
    font-size:0.15rem;
}
main .title aside:last-child{
    font-size:0.1rem;
    padding-top:0.23rem;
}
main .imglist{
    display: flex;
    flex-flow:wrap;
    justify-content: space-between;
    padding:0 0.1rem;
}
main .imglist dl{
    width:1.14rem;
    margin-top:0.18rem;
}
main .imglist dl dt img{
    width:1.14rem;
    height:1.14rem;
}
main .imglist dl dd{
    font-size:0.12rem;
    line-height:0.16rem;
    margin-top:0.07rem;
}
/*footer*/
footer{
    height:0.48rem;
    width:100%;
    position:fixed;
    bottom:0;
    background:rgba(0,0,0,0.8);
    display: flex;
    justify-content: space-between;
    padding:0 0.27rem;
}
footer aside{
    display: flex;
    flex-flow:column;
    justify-content: center;
    align-items: center;
}
footer aside .iconfont{
    color:#b2a3a0;
    font-size:0.25rem;
}
footer aside span{
    color:#b2a3a0;
    font-size:0.1rem;
}
footer aside:first-child .iconfont{
    color: #fff;
}
footer aside:first-child span{
    color:#fff;
}

四、结语：

原创不易，本人花时间重新整理了一遍，在线求三连

码农公寓

CSS部分

相关文章