移动Web Day04

原创 于 2025-06-03 18:25:15 发布 · 393 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

1.体验vw和vh单位

vw

参照手机视口宽度，如图3.2

vh

参照手机视口高度，如图7.36

2.vw布局与vh问题

less写法

3.酷我音乐-准备工作

4.酷我音乐-头部区域

html

    <!-- 头部 -->
     <header>
        <div class="left">
        </div>
        <a href="#">下载APP</a>
     </header>

less

body {
    background-color: #f9fafb
}
//变量
@vw: 3.75vw;

// 头部
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;
    .left {
    width: (235 / @vw);
    height: (50 / @vw);
    background-image: url(https://blog.csdn.net/assets/head.png);
    background-size: contain;
    background-repeat: no-repeat;
    }
    a {
        width: (80  / @vw);
        height: (30 / @vw);
        background-color: #ffe31b;
        border-radius: (15 / @vw);
        text-align: center;
        line-height: (30 / @vw);
        font-size: (14 / @vw);
    }

}

5.酷我音乐-搜索区域

html

     <!-- 搜索 -->
      <div class="search">
        <div class="txt">
            <span class="iconfont icon-sousuo"></span>
            <span>搜索你想听的歌曲</span>
        </div>
      </div>

less

// 搜索
.search {
    padding: (10 / @vw) (15 / @vw);
    height: (52 / @vw);
    // background-color: blueviolet;
    .txt {
        height: (32 / @vw);
        background-color: #f2f4f5;
        border-radius: (16 / @vw);
        text-align: center;
        line-height: (32 / @vw);
        color: #a1a4b3;
        font-size: (14 / @vw);
        .iconfont { 
        font-size: (16 / @vw);
        }
    }


}

6.酷我音乐-banner区域

html

      <!-- banner -->
       <div class="banner">
        <ul>
            <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
        </ul>
       </div>

less

// banner
.banner {
    padding: 0 (15 / @vw);
    height: (108 / @vw);
    // background-color: pink;
    ul {
        li {
            width: (345 / @vw);
            height: (108 / @vw);
            img {
            width: 100%;
            height: 100%;
            // cover完全覆盖
            // 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形
            object-fit: cover;
            border-radius: (5 / @vw);
            }
        }
    }
}

7.酷我音乐-标题公共样式

html

<!-- 排行榜 -->
        <div class="list">
            <div class="title">
                <h4>酷我排行榜</h4>
                <a href="#">更多<span class="iconfont icon-right"></span></a>
            </div>
        </div>

less

// 排行榜
.list {
  margin-top: (20 / @vw);
  padding: 0 (15 / @vw);
}
// 标题 → 公共样式
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: (16 / @vw);
  line-height: (25 / @vw);
  h4 {
    font-size: (20 / @vw);
  }
  a {
    font-size: (12 / @vw);
    color: #a1a4b3;
  }
}

8.酷我音乐-排行榜内容

html

 <!-- 内容 -->
             <div class="content">
                <ul>
                    <li>
                    <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩姨（相信光）</a>
                    </div>
                    </li>
                    <li>
                    <div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我新歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩姨（相信光）</a>
                    </div>
                    </li>
                    <li>
                    <div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我飙升榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩姨（相信光）</a>
                    </div>
                    </li>
                </ul>
             </div>

less

// 排行榜
.list {
  margin-top: (20 / @vw);
  padding: 0 (15 / @vw);
  li {
    display: flex;
    margin-bottom: (16 / @vw);
    height: (105 / @vw);
    background-color: #fff;
    border-radius: (10 / @vw);
    .pic {
      margin-right: (20 / @vw);
      img {
        width: (105 / @vw);
        height: (105 / @vw);
        border-radius: (10 / @vw);
      }
    }
    .txt {
      a {
        display: block;
        font-size: (12 / @vw);
        color: #a1a4b3;
        line-height: 1.8;
      }

      .more {
        font-size: (14 / @vw);
        color: #333;
        .iconfont {
          font-size: (16 / @vw);
        }
      }
    }
  }
}

9.酷我音乐-推荐歌单区域

html

        <!-- 推荐歌单 -->
         <div class="recommend">
            <!-- 标题 -->
            <div class="title">
                <h4>推荐歌单</h4>
                <a href="#">更多<span class="iconfont icon-right"></span></a>

            </div>
            <!-- 内容 -->
            <div class="content">
                    <ul>
                        <li>
                        <div class="pic">
                            <img src="./assets/song01.jpeg" alt="">
                            <div class="cover">18.2W</div>
                        </div>
                        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                        </li>
                        <li>
                        <div class="pic">
                            <img src="./assets/song02.jpeg" alt="">
                            <div class="cover">18.2W</div>
                        </div>
                        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                        </li>
                        <li>
                        <div class="pic">
                            <img src="./assets/song03.jpeg" alt="">
                            <div class="cover">18.2W</div>
                        </div>
                        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                        </li>
                        <li>
                        <div class="pic">
                            <img src="./assets/song02.jpeg" alt="">
                            <div class="cover">18.2W</div>
                        </div>
                        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                        </li>
                        <li>
                        <div class="pic">
                            <img src="./assets/song03.jpeg" alt="">
                            <div class="cover">18.2W</div>
                        </div>
                        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                        </li>
                        <li>
                        <div class="pic">
                            <img src="./assets/song01.jpeg" alt="">
                            <div class="cover">18.2W</div>
                        </div>
                        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                        </li>
                    </ul>
            </div>
         </div>

less

// 推荐歌单
.recommend {
    padding: 0 (15 /  @vw);
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            margin-bottom: (16 / @vw);
            width: (105 / @vw);
            height: (143 / @vw);
            // background-color: pink;
            // 图片
            .pic {
            position: relative;
            width: (105 / @vw);
            height: (105 / @vw);
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: (10 / @vw);
            }
            .cover {
                position: absolute;
                left: 0;
                bottom: 0;
                width: (70 / @vw);
                height: (28 / @vw);
                background-color: rgba(0,0,0,0.8);
                border-radius: 0 (10 / @vw) 0 (10 / @vw);
                text-align: center;
                line-height: (28 / @vw);
                color: #fff;
                font-size: (14 / @vw);
            }
            }
            // 文字
            .txt {
            font-size: (14 / @vw);
            }
        }
    }
}

10.酷我音乐-下载区域

html

         <!-- 安装，下载 -->
        <div class="download">
        <img src="./assets/logo.png" alt="">
        <p>安装酷我音乐 发现更多好音乐</p>
        <span class="iconfont icon-right"></span>
        </div>

less

// 下载
.download {
  position: fixed;
  left: (15 / @vw);
  bottom: (30 / @vw);

  display: flex;
  align-items: center;
  padding: 0 (10 / @vw) 0 (15 / @vw);
  width: (345 / @vw);
  height: (45 / @vw);
  background-color: #fff;
  border-radius: (22 / @vw);
  img {
    margin-right: (10 / @vw);
    width: (36 / @vw);
    height: (36 / @vw);
  }
  p {
    flex: 1;
    font-size: (14 / @vw);
  }
  span {
    width: (32 / @vw);
    height: (32 / @vw);
    background-color: #f2f3f5;
    border-radius: 50%;
    text-align: center;
    line-height: (32 / @vw);
    font-size: (16 / @vw);
  }
}

11.酷我音乐-头部固定

首先我们先给头部定位固定

发现宽不够，所以我再加一个宽度

但是我们发现搜索区域没了，那么我们给搜索区域在放下一点

问题解决

less

// 头部
header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (15 / @vw);
  // 固定定位的盒子，宽度靠内容撑开，希望宽度100%
  width: 100%;
  height: (50 / @vw);
  background-color: #fff;
}

// 搜索
.search {
  // 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可
  margin-top: (50 / @vw);
  padding: (10 / @vw) (15 / @vw);
  height: (52 / @vw);
}

标签
#css #html5 #html
babicu123
关注
HTML音乐网站源码.rar
03-02
HTML音乐网站源码 实现技术：HTML、CSS、JavaScript 页面数量：3页 一个首页两个副页 网页主题：音乐网站 页面实现元素：菜单导航、图片悬停效果、文字悬停效果、轮播图、图片列表、图文列表、图片列表、图片悬停缩放、登录窗口弹出层、右侧图文悬停效果等；源码中有部分注释说明，适合有一定前端基础人群学习参考。 网页效果编辑工具：VScode Dw等前端网页编辑工具均可。
酷我音乐首页前端静态页面
09-16
酷我音乐首页前端静态页面
4-移动端适配-2
qq_40589140的博客
06-26 760
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )vw和vh是相对单位，相对视口尺寸计算结果。
HTML+CSS练习 酷我音乐移动端
okstudy的博客
05-04 404
【代码】HTML+CSS练习 酷我音乐移动端。
酷我音乐播放（html、css）
weixin_52120405的博客
03-07 1675
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="music.css"> </head> <body> <div class="nav"> <div class
【网页设计】HTML做一个属于我的音乐页面（纯html代码）
专注于dreamweaver网页设计制作
01-05 955
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
day04移动web
Willa
05-01 944
了解flex布局（流式布局），并掌握其使用方法。在这博博强烈推荐一款游戏通关掌握flex布局相关属性，本人亲测有效，希望大家今天又进步一点点😊，链接：http://flexboxfroggy.com
前端web移动端学习day04
WU3087676106的博客
03-27 1335
vw和vh是相对单位，相对视口尺寸计算结果，相对于屏幕的逻辑参数。
黑马程序员——移动Web——day04
qq_56444564的博客
02-18 629
vh：lviewport height ( 1vh = 1/100视口高度 )vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。vw：viewport width（1vw = 1/100视口宽度 ）vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )vw和vh是相对单位，相对视口尺寸计算结果。
移动web开发_流式布局___day04小白到大神
weixin_45965632的博客
06-28 336
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Web
Day04-项目的创建和基本配置，2024年最新html5移动web开发指南
m0_60452293的博客
04-10 667
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
酷我音乐移动端Web网页设计
06-05
酷我音乐移动端Web网页设计（ vw布局 ），免费资源，欢迎大家下载学习。
HTML+CSS仿QQ音乐网站[项目源码]
最新发布
11-23
本文介绍了一个基于HTML+CSS的仿QQ音乐网站的设计与实现。文章详细阐述了网站的设计思路、布局结构、技术选型和实现细节。网站采用DIV+CSS布局，包含多个页面，排版整洁，内容丰富，主题鲜明。首页使用CSS排版丰富，色彩鲜明有活力，导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。网站还包含了JS特效，如定时切换和手动切换图片轮播，以及多媒体元素如gif、视频、音乐等。文章还提供了HTML结构代码和CSS样式代码，方便读者参考和学习。
音乐播放器源代码（仿酷我音乐）
05-23
界面模仿了酷我音乐，实现了音乐的播放、暂停、上一首、下一首、三种播放模式，本地歌词同步显示。开发环境android4.0。
java swing 仿酷我音乐盒界面源码
10-10
java swing 仿酷我音乐盒界面。
Web前端认识day-04（关于css的学习笔记）
qq_46516571的博客
08-25 204
Css学习笔记 CSS的基本概念 选择器 标签：,…之类的标签 使用方法：直接输入标签名 类：class名字 使用方法：输入点+class名 ID：ID名 使用方法：输入#+ID名 一般来说我们写css文件的时候用的都是第二种方法，class名 这是因为ID名一般被用作JS的选择器 给class命名也是有规范的，像xxx-xxxx 这样做的好处是让你的代码更清晰 别人也更容易看懂 三种连接方式 行内样式（内嵌样式） 静夜思 直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦
移动web——学习笔记整理
Thaley的博客
01-22 4842
学习笔记整理——移动web(黑马的)
移动web
qq_59313503的博客
04-22 2083
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。一行最多占12列，col-md-1代表一行12个盒子，每个占一份，col-md-3代表一行4个盒子，占3份。/* 默认以盒子中心点 */ /* 改变中心点 */语法：transform：scale（x轴缩放倍数，y轴缩放倍数）；一般情况下，只设置一个，scale值大于1表示放大，小于1表示缩小。translate（x轴反向移动值，y轴方向移动值）
移动web开发-day01-流式布局
weixin_39343432的博客
08-25 378
移动web开发-day01-流式布局 01-移动WEB开发流式布局导读 目录 移动端基础 视口 二倍图 移动端调试 移动端技术解决方案 移动端常见布局 流式布局 京东移动端首页制作 目标 能够知道移动web的开发现状 能够写出标准的viewport 能够使用移动web的调试方法 能够说出移动端常见的布局方案 能够描述流式布局 能够完成京东移动端首页 02-移动端基础 移动端兼容...
移动web开发-day02-flex布局
weixin_39343432的博客
08-26 235
移动web开发-day02-flex布局 00-移动WEB开发flex布局导读 目录 flex布局体验 flex布局原理 flex布局父项常见属性 flex布局子项常见属性 目标 能够说出flex盒子的布局原理 能够使用flex弹性布局的常用属性 01-flex布局体验 传统布局 兼容性好 布局繁琐 不能在移动端很好的布局 flex布局 操作方便，布局简单，移动端应用广泛...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值