网易云音乐开发--主页静态页面搭建

news2024/11/17 19:35:23

如何用VScode来开发小程序

 wxml和wxss来高亮小程序

窗口设置

 轮播图制作

就是通过swiper来设置轮播图 

iconfont字体图标使用 

这里要借助阿里的iconfonticonfont-阿里巴巴矢量图标库

 

找到自己喜欢的图标,添加到购物车

 添加到项目

这样就可以统一的管理图标的库 

打开这个对应的图标网址

然后复制到wxss里面

然后引入这个文件就可以了。

而这个文件其他页面都要用到,因此放到全局去引用它

  然后添加相对应的图标class类名,然后写样式 

完成样式书写 

推荐歌曲区域静态搭建

完成上半部分搭建

推荐内容区域,display:flex无效果,因此我们可以查询微信小程序,使用 enable-flex来设置

 

添加这俩个属性就可以移动使用了

单行文本溢出隐藏  ……代替

display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

多行文本溢出隐藏,省略号代替

verflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对其模式 */
    -webkit-box-orient: vertical;
    /* 行数 */
    -webkit-line-clamp: 2;

完成推荐模块静态制作 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/486048.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows环境安装Elasticsearch和Kibana

文章目录 1 Elasticsearch1.1 下载1.2 解压并添加环境变量1.3 访问1.4 cmd命令1.5 中文分词器1.5.1 下载1.5.2 安装1.5.2.1 命令安装1.5.2.2 手动安装1.5.2.3 验证分词 1.6 使用curl批量导入 2 安装 kibana2.1 下载kibana2.2 中文界面2.3 操作索引2.3.1 增加索引2.3.1.1 单条新…

电商--订单支付中存在的问题以及思考

文章目录 前言背景订单支付大致流程订单支付流程中的注意细节防止订单重复创建为何会出现重复创建订单处理措施 掉单导致的重复支付为何会出现这种场景处理措施 已支付流水退款为何会出现这种场景 前言 最近感觉应该把自己在工作中遇到的一些比较有意思的核心流程进行总结以此…

win10远程桌面控制Ubuntu服务器 - 内网穿透实现公网远程

文章目录 前言视频教程1. ubuntu安装XRDP2.局域网测试连接3. Ubuntu安装cpolar内网穿透4.cpolar公网地址测试访问5.固定域名公网地址 转载自远程穿透文章:Windows通过RDP异地远程桌面Ubuntu【内网穿透】 前言 XRDP是一种开源工具,它允许用户通过Windows…

软件测试之测试的分类(重点:黑盒测试、白盒测试、单元测试、集成测试、系统测试)

文章目录 1. 按照测试对象进行划分1)界面测试2)可靠性测试3)容错性测试4)文档测试5)兼容性测试6)易用性测试7)软件安装卸载的测试8)安全测试9)性能测试10)内存…

代码随想录算法训练营第五十天| 123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

文章目录 123.买卖股票的最佳时机III188.买卖股票的最佳时机IV:star: 123.买卖股票的最佳时机III 至多买卖两次 分清楚动态规划所有状态至关重要,这是求dp数组的前提 和之前买卖股票问题解题思路相似,只是多增加了第二天的状态 总结:买卖股票…

Docker代码环境打包

1. 介绍 Docker是一种开源的容器化平台,它可以在操作系统级别运行应用程序。通过将应用程序及其依赖项封装成一个可移植的容器,Docker使得应用程序可以在任何环境中轻松部署、运行和管理。使用Docker,开发人员可以避免在不同环境中出现的配置…

测试从业第 3 年,我看到了终点......

先说明,今天的内容,是写给想成为高级测试开发、自动化测试专家的人看的,因为,它可能颠覆你的认知。 众所周知,如今无论是大厂还是中小厂,自动化测试基本是标配了,毕竟像双11、618 这种活动中庞…

vue-element-admin入门

vue-element-ui的基本使用 vue-element-admin下载vue-element-admin对接后端接口mock接口信息编写后端接口对接测试移除mock替换接口 vue-element-admin下载 这里下载的是基础模板,要下载完整版的可以去官网下载 # clone the project git clone https://github.co…

leetcode刷题日志4.0

目录 前言: 1.三个数的最大乘积 2.错误的集合 3.机器人能否返回原点 4.最长连续递增序列 5.验证回文串 II 6.交替位二进制数 前言: 五一假期结束了,大家玩的开心吗?不过我们还得回到我们的日常生活学习工作当中,…

X86架构与Arm架构的主要区别分析

​ X86架构和ARM架构是主流的两种CPU架构,X86架构的CPU是PC服务器行业的老大,ARM架构的CPU则是移动端的老大。 X86架构和arm架构实际上就是CISC与RISC之间的区别,很多用户不理解它们两个之间到底有哪些区别,实际就是它们的领域不…

《算法训练营》语言基础(゚Д゚

👂 无论你多怪异我还是会喜欢你(《刺客伍六七》动画推广版片尾曲) - 周子琰 - 单曲 - 网易云音乐 一起补基础! φ(゜▽゜*)♪ 👂 My Nams Suzie - Susie/Farfashah …

20230503-win10-U盘安装WIN10-22h2

20230503-win10-U盘安装WIN10-22h2 一、软件环境 zh-cn_windows_10_consumer_editions_version_22h2_updated_april_2023_x64_dvd_80cec13e.isofirpe 1.8.2标签:firpe win10 22h2分栏:WINDOWS 二、硬件环境 8G或以上的有PE功能的启动U盘一个台式机需…

【2023年第十一届泰迪杯数据挖掘挑战赛】C题:泰迪内推平台招聘与求职双向推荐系统构建 27页论文及实现代码

【2023年第十一届泰迪杯数据挖掘挑战赛】C题:泰迪内推平台招聘与求职双向推荐系统构建 27页论文及实现代码 相关链接 (1)建模方案 【2023年第十一届泰迪杯数据挖掘挑战赛】C题泰迪内推平台招聘与求职双向推荐系统构建 建模及python代码详解…

String类的学习笔记(中):介绍字符串的不可变性和字符串常量池

本文介绍了String类字符串的不可变性和字符串常量池,主要包括 如何保证字符串不可变, 如何对字符串的修改. 为什么字符串要设置不可变, 字符串常量池的创建和了解,简单的字符串常量池图, 以及如何将字符串手动添加到字符串常量池 字符串不可变性和字符串常量池 一.字符串的不可…

考研数学经验分享

考研数二经验 先说一下自我情况吧,我是23计算机专硕考研,本科是河北一本双非,考的是数二英二和408。相对其他专业来说,计算机的专业课408由于要学四本书,所以会占用大部分时间,因此也会挤掉一些数学和英语的…

文本识别、截图识别保存和多文件识别

一、源码 github源码 二、介绍 采用Tesseract OCR识别 采用多线程进行图片识别 界面 选择 文件是可以识别本地的多张图片文件夹是识别文件夹里面的所有图片的内容截图 可以复制到剪切板、可以识别也可以直接保存 重置 是清除选择的图片和识别结果语言选择 是选择不同的模型…

AX7A200教程(7): 基于DDR3的串口发送和接收(64次突发)(二)

本章节主要使用ddr3做为缓存,串口接收的数据通过ddr缓存后通过发送模块发送出去。我们之前的串口发送数据通过ddr缓存是一个突发长度,本篇文章将会传输64个突发长度。整体的功能框图所下图所示 因本博文使用的是上个章节的图片数据,所以数据大…

微服务学习——分布式搜索

初识elasticsearch 什么是elasticsearch elasticsearch是一款非常强大的开源搜索引擎,可以帮助我们从海量数据中快速找到需要的内容。 elasticsearch结合kibana、Logstash、Beats,也就是elastic stack(ELK)。被广泛应用在日志数据分析、实时监控等领域…

Nmap入门到高级【第十一章】

预计更新第一章. Python 简介 Python 简介和历史Python 特点和优势安装 Python 第二章. 变量和数据类型 变量和标识符基本数据类型:数字、字符串、布尔值等字符串操作列表、元组和字典 第三章. 控制语句和函数 分支结构:if/else 语句循环结构&#…

linux系统下如何调试C/C++程序【越早知道越好】

前言 研发语言是C或者C的小伙伴,无论是从事服务端开发,还是客户端开发,都需要掌握linux系统下关于C/C代码的调试能力。 正文 入门示例 首先,我们通过一段存在问题的代码来演示整个调试过程以及问题分析定位的方法和手段。 示例代码…