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

news/2024/7/20 4:11:18 标签: 小程序, 微信小程序

如何用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.niftyadmin.cn/n/285521.html

相关文章

CSS布局基础(传统布局小结)

传统布局小结 传统布局方式标准流浮动流定位伪类元素CSS应用对象应用到自身应用到其他元素 传统布局方式 传统布局采用 标准流 浮动流 定位的方式实现布局效果,也就是通常所说的 DIV CSS 布局。 标准流 标准流中的元素在 页面默认的 维度,块级元素…

数据结构(C语言版)-第2章

来源书籍&#xff1a; 数据结构(C语言版)(第2版微课版) 秦锋 汤亚玲主编 清华大学出版社 2021年12月 书籍链接&#xff1a;http://www.tup.tsinghua.edu.cn/booksCenter/book_09444301.html# 1.线性表 1.1 线性表上基本运算的实现 1.1.1 顺序表的初始化 #include <stdio…

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

文章目录 一、水平排列的图片链接样式及核心要点1、实现效果2、HTML 结构3、CSS 样式 二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果 一、水平排列的图片链接样式及核心要点 1、实现效果 实现如下样式 , 水平排列的图片链接 , 第一个图片占宽度的 50% , 第二第三个 …

2023-05-03 线性模型与区间DP

线性模型与区间DP 1 线性模型 基本概念 这里的线性是指状态的排布是线性的线性模型是动态规划中最常用的模型 一般的代码模型是&#xff1a; for(int i 0; i < n; i) {for(j 0; j < i; j) {// Todo: 更新dp的具体逻辑} }最典型的一个例题&#xff1a;最长上升子序…

Python实现邮件收发

Python实现邮件收发 一、发送邮件 SMTP是邮件发送协议&#xff0c;可以发送纯文本邮件、HTML邮件以及带附件的邮件。 from email.mime.text import MIMEText from email.header import Header from email import encoders from email.utils import parseaddr, formataddr fr…

【音视频处理】RTMP、HLS、HTTP-FLV、WebRTC、RTSP的区别?直播协议详解

大家好&#xff0c;欢迎来到停止重构的频道。 本期我们详细讨论直播的相关协议&#xff0c;包括&#xff1a;HTTP-FLV、HLS、RTMP、Web-RTC、RTSP等等。 我们将会详细介绍这些协议的工作原理、应用场景、及延迟的原因。 我们按这样的顺序讨论​ 1、 RTMP、HTTP-FLV 2、 …

Ubuntu常用命令总结

目录 1&#xff09;安装包命令及下载包命令 2&#xff09;阅读协议内容 3&#xff09;执行sh文件&#xff1a; 4&#xff09;创建虚拟环境 5&#xff09;激活虚拟环境 6&#xff09;虚拟环境中安装包 7&#xff09;安装上传代码工具 8&#xff09;代码上传 9&#xff09…