当前位置: 首页 > news >正文

移动端前端开发中常用的css

在开发移动端项目的时候,很多样式都是相同的,比如说图标大小,头像大小,页面底部保存(添加按钮),项目主体颜色等等,对于这些在项目中常用到的,通常都会写在公共样式中(public.css)以便代码复用。本文进行进行下总结(个人经验哈)

文本超出隐藏

     <!-- 文本一行超出隐藏 --><div class="box2">xxxxxxxxxxxxxxxxx</div>//css.box2 {width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

两行超出隐藏 

  <div class="box">这是一段很长的文本内容,用来测试多行文本截断的效果。这是一段很长的文本内容,用来测试多行文本截断的效果。这是一段很长的文本内容,用来测试多行文本截断的效果。</div><style>.box {width: 200px;border: 1px solid red;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}</style>

一行三列 

   <div class="box"><div class="avtor"></div><div class=""><div>比如这是标题</div><div>商品描述</div></div><div class="boxItem">¥999999</div></div>.box {border: 1px solid;display: grid;grid-template-columns: auto auto 1fr;align-items: center;gap: 10px;padding: 10px;}.avtor {width: 50px;height: 50px;background-color: hotpink;border-radius: 50%;}.box div:nth-child(3) {justify-self: end;}

遮罩层

    <div class="mask"></div>.mask {position: absolute;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);z-index: 99;}

注意在使用遮罩层的使用,需要放置在根节点同级下。

如何放在有相对定位父盒子里面就不能遮起来整个页面了(绝对定位向上寻找相对定位的父盒子的时候没有则默认相对于body)

   <div style="position: relative;width: 200px;height: 200px;"><div class="mask"></div></div>

 

某个元素需要在遮罩层上使用z-index 值大于遮罩层的z-index的值即可,这里修改下上面box的样式

    .box {border: 1px solid;display: grid;grid-template-columns: auto auto 1fr;align-items: center;gap: 10px;padding: 10px;position: relative;z-index: 100;background-color: #fff;margin-top: 50px;}

 主题色

无论是开发小程序还是app或者说pc端官网,项目整体风格有一个主题颜色。

   <!-- 主题色 --><div class="cName main-col">这是公司名字</div><div class="list"><div class="item ">全部</div><div class="item main-col">公司简介</div><div class="item ">产品分类</div><div class="item ">产品分类</div><div class="item ">产品分类</div></div>//css.main-col{color: blueviolet;}.cName{font-size: 20px;}.list{display: grid;grid-template-columns: repeat(5,auto);}

当需要更换主题风格的时候,只需要修改main-col的颜色即可 

  .main-col{color: rgb(32, 235, 116);}

 底部固定按钮

    <div class="mybtn">保存</div>.mybtn{position: fixed;width: 80%;bottom: 10px;left: 50%;transform: translateX(-50%);background:linear-gradient(to left,#e77a7a,#e26060);text-align: center;border-radius: 15px;padding: 10px 0px ;box-sizing: border-box;margin: auto;color: #fff;}

在移动端开发的时候,可能会还有添加,修改等按钮,这里就可以直接复用public里面这里的代码了

 伪元素小图标

这个具体看项目中有无使用,有的话通常来说都是多个的。

     <div class="header"><div>xxxx</div></div>.header{position: relative;margin-top: 10px;}.header div:nth-child(1){padding-left: 10px;}.header div:nth-child(1)::before{position: absolute;content: '';top: 0;left: 0;width: 3px;height: 100%;background: linear-gradient(to bottom,#7bdfa8,#a2f192);border-radius: 10px 10px 0 0;}

目前就想到这些,后续想起来继续补充。end 

相关文章:

移动端前端开发中常用的css

在开发移动端项目的时候&#xff0c;很多样式都是相同的&#xff0c;比如说图标大小&#xff0c;头像大小&#xff0c;页面底部保存(添加按钮&#xff09;&#xff0c;项目主体颜色等等&#xff0c;对于这些在项目中常用到的&#xff0c;通常都会写在公共样式中&#xff08;pub…...

C/C++内存分布

内存分布示意图&#xff1a; 内存分布各区域详解&#xff1a; 内核空间&#xff1a; 放置操作系统相关的代码和数据。&#xff08;用户不能直接进行操作 ------ 可以通过调用系统提供的 api 函数&#xff09; 栈区&#xff1a; 又叫堆栈&#xff0c;非静态局部变量/函数参数/…...

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

版本: 原因 在 Dart Sass 3.0.0 中, @import 规则将被弃用,推荐使用 @use 和 @forward 规则来替代。 1.@use替代@import @use 规则允许你引入其他 Sass 文件中的变量、混合器和函数,并且可以避免命名冲突。 示例: style.scss @use variables;body {color: variables.$pr…...

【计算机网络】用户从输入网址到网页显示,期间发生了什么?

1.URL解析 浏览器分解URL&#xff1a;https://www.example.com/page 协议&#xff1a;https域名&#xff1a;www.example.com路径&#xff1a;/page 2.DNS查询&#xff1a; 浏览器向DNS服务器发送查询请求&#xff0c;将域名解析为对应的IP地址。 3.CDN检查(如果有)&#…...

使用adb设置wifi相关

其他的可以参考以下指令 Android 使用adb操作WiFi连接扫描等相关指令_adb wifi-CSDN博客 但是如果你的wifi账号出现中文的时候&#xff1a; 例如&#xff1a;ssid "wolf的网络" 这种类型的时候&#xff0c;直接使用adb指令是有问题的&#xff0c;基本都会出现乱码…...

MySQL数据库创建、删除、修改

一&#xff1a;建库建表 我们以学校体系进行建表。将数据库命名为school。 以下代码中的大写均可小写不影响。如CREATE DATABASE与create database相同 四个关键的实体分别是学院、老师、学生和课程&#xff0c;其中&#xff0c;学生跟学院是从属关系&#xff0c;这个关系从…...

【Android】动画原理解析

一,基础动画 基础动画,有四种,分别是平移(Translate)、缩放(Scale)、Rorate(旋转)、Alpha(透明度),对应Android中以下四种。 1,Animation基类 1,基本概念 1,插值器 插值器的作用,是控制动画过程的参数,可以理解为 时间(t)与动画进程(d)的函数,动画仅…...

C++从入门到实战(十四)初识STL与STL简介

C从入门到实战&#xff08;十四&#xff09;初识STL与STL简介 前言一、什么是 STL&#xff1f;二、STL 的版本三、STL六大组件&#xff08;目前了解即可&#xff0c;后面会逐步讲解&#xff09;1. 容器&#xff08;Containers&#xff09;—— 装数据的“盒子”2. 算法&#xf…...

力扣-142.环形链表II

题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 不允许修改 链表。 class Solution { public:ListNode *detectCycle(ListNode *head) {ListNode *fast head;ListNode *slow head;while (fast) {…...

ERC-20与ERC-721:区块链代币标准的双星解析

一、代币标准的诞生背景 在以太坊生态中&#xff0c;代币标准是构建去中心化应用&#xff08;DApps&#xff09;的基石。ERC-20与ERC-721分别代表同质化与非同质化代币的两大核心标准&#xff0c;前者支撑着90%以上的加密资产流通&#xff0c;后者则开启了数字资产唯一性的新时…...

图像管理与人脸识别工具深度解析

这篇Python应用程序代码实现了一个功能丰富的图像管理和人脸识别工具&#xff0c;它集成了多种实用功能&#xff0c;包括人脸检测与裁剪、屏幕截图以及生成PDF等核心功能。我将深入分析这个应用程序的架构、功能和实现方式&#xff0c;帮助读者理解其设计思路和关键技术点。 C…...

【图片合并PDF】一次性将多个文件夹里的图片批量按文件夹为单位合并PDF,多个文件夹图片合并PDF,基于WPF的实现方案

​​设计行业​​:设计师需要将项目设计稿按文件夹整理并合并为PDF交付客户 摄影行业​​:摄影师按主题分类的照片需要合并为PDF存档或分享 ​​企业文档管理​​:市场调研部门需要将分散在不同文件夹的调研图片合并为PDF报告 教育领域​​:教师需要将学生的作业图片按班…...

Matlab 数控车床进给系统的建模与仿真

1、内容简介 Matlab217-数控车床进给系统的建模与仿真 可以交流、咨询、答疑 2、内容说明 略 摘 要:为提高数控车床的加工精度,对数控 车床进给系统中影响加工精度的主要因素进行了仿真分析研 动系统的数学模型,利用MATLAB软件中的动态仿真工具 究:依据机械动力学原理建立了…...

HOW - 在 Mac 上的 Chrome 浏览器中调试 Windows 场景下的前端页面

文章目录 为什么需要模拟 Windows 环境&#xff1f;一、修改 User-Agent 模拟 Windows 浏览器方法 1&#xff1a;通过 Chrome 开发者工具修改 UA方法 2&#xff1a;使用浏览器插件 二、模拟 Windows 的字体和滚动条样式1. 模拟 Windows 字体2. 强制显示滚动条&#xff08;模拟 …...

微信小程序执行C语言库的详细方案

以下是微信小程序中执行C语言库的详细技术方案&#xff0c;分为环境准备、开发流程、优化技巧三个部分&#xff1a; 一、环境准备阶段 1. 工具链安装 # 安装Emscripten核心工具链 git clone https://github.com/emscripten-core/emsdk.git cd emsdk ./emsdk install latest .…...

如何用分布式防御抵扣大规模DDoS攻击?

DDoS攻击是当前最严峻的网络安全威胁之一&#xff0c;其通过海量请求耗尽目标资源&#xff0c;导致服务瘫痪。面对攻击规模的指数级增长&#xff0c;传统的单点防御已难以应对。本文将结合最新技术趋势&#xff0c;探讨分布式防御体系在抵御大规模DDoS攻击中的核心策略与实践。…...

【MySQL】存储引擎 - MyISAM详解

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…...

如何在Jmeter中调用C程序?

在JMeter中调用C语言程序可以通过以下几种方式实现&#xff1a; 方法一&#xff1a;使用OS Process Sampler JMeter的“OS Process Sampler”可以用来调用外部程序&#xff0c;包括C语言编写的可执行文件。 步骤&#xff1a; 准备C语言程序&#xff1a; 编写C语言代码并编译…...

PyTorch 版本、torchvision 版本和 Python 版本的对应关系

PyTorch 版本、torchvision 版本和 Python 版本的对应关系 在深度学习领域&#xff0c;PyTorch 及其配套库 torchvision 的使用极为广泛。但不同版本的 PyTorch、torchvision 与 Python 之间存在严格的对应关系&#xff0c;若版本搭配不当&#xff0c;会导致代码运行出错…...

构建高可维护、易测试的异步任务系统:基于 Celery + Redis + Eventlet 的模块化架构实践

引言&#xff1a;为什么我们需要一个结构清晰的异步任务系统&#xff1f; 在现代软件开发中&#xff0c;异步任务已经成为提升响应性能、解耦业务逻辑、支持高并发的重要手段。尤其对于测试工程师而言&#xff0c;异步任务往往意味着&#xff1a; 任务执行不可控状态追踪困难…...

《智能网联汽车 自动驾驶功能场地试验方法及要求》 GB/T 41798-2022——解读

目录 1. 适用范围与核心目标 2. 试验核心要求 2.1 试验场地与环境 2.2 试验设备与数据采集 2.3 试验车辆要求 3. 试验过程与通过条件 4. 关键试验场景与方法 4.1 交通信号识别及响应 4.2 基础设施与障碍物识别 4.3 行人及非机动车场景 4.4 紧急避险与风险策略 5. 特…...

删除链表倒数第N个节点

Leetcode&#xff08;19&#xff09;&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 分析&#xff1a; 首要目标就是找到第N个节点的前一个节点&#xff0c;因为只有通过这个节点&#xff08;cur&#xff09;才可进行对…...

创建型模式:抽象工厂(Abstract Factory)模式

一、概念与核心思想​ 抽象工厂(Abstract Factory)模式是创建型设计模式的重要成员,它提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类。该模式将对象的创建逻辑封装在抽象工厂及其具体实现类中,客户端通过抽象工厂接口获取所需的对象族,实现对象创…...

预训练模型实战手册:用BERT/GPT-2微调实现10倍效率提升,Hugging Face生态下的迁移学习全链路实践

更多AI大模型应用开发学习内容&#xff0c;尽在聚客AI学院。 一. 预训练模型&#xff08;PTM&#xff09;核心概念 1.1 什么是预训练模型&#xff1f; 预训练模型&#xff08;Pre-trained Model, PTM&#xff09;是在大规模通用数据上预先训练的模型&#xff0c;通过自监督学…...

基于Flink的用户画像 OLAP 实时数仓统计分析

1.基于Flink的用户画像 OLAP 实时数仓统计分析 数据源是来自业务系统的T日数据&#xff0c;利用kakfa进行同步 拼接多个事实表形成大宽表&#xff0c;优化多流Join方式&#xff0c;抽取主键和外键形成主外键前置层&#xff0c;抽取外键和其余内容形成融合层&#xff0c;将4次事…...

php java go python面向对象的设计原则和常用设计模式

一、面向对象设计原则&#xff08;OOP Design Principles&#xff09; 是写出高内聚、低耦合、可维护系统的基础&#xff0c;重点是 SOLID 五大原则 其他补充原则。 &#x1f4cc; SOLID 五大设计原则&#xff1a; 原则名称全称核心思想示例关键词S 单一职责原则Single Respo…...

第十三节:图像形态学操作-腐蚀与膨胀

引言 图像形态学是数字图像处理领域中的一个重要分支&#xff0c;它主要研究图像中物体的形状和结构。作为形态学操作的基础&#xff0c;腐蚀(Erosion)和膨胀(Dilation)是两种最核心的操作&#xff0c;广泛应用于图像预处理、特征提取、目标检测等多个领域。OpenCV作为最流行的…...

数据结构 - 9( 位图 布隆过滤器 并查集 LRUCache 6000 字详解 )

一&#xff1a;位图 位图是一种高效的数据结构&#xff0c;它通过比特来表示某个值的存在与否&#xff0c;通常以连续的二进制位数组存储。每个比特位对应一个特定的状态&#xff0c;这种表示方式在内存效率和操作速度上具有显著优势&#xff0c;尤其适用于海量数据、整数以及…...

在Hugging Face网站像Github一样克隆repository到本地的具体步骤

首先我们找到自己想要的仓库&#xff0c;在搜索栏进行搜索 之后我们可以看到这里有三个点&#xff0c;鼠标点击&#xff0c;选择Clone repository 最后按照上面的步骤进行复制粘贴到电脑上执行就行&#xff0c;我们可以看到有两种选择HTTPS和SSH&#xff0c;如果HTTPS不行就选择…...

如何使用Java从PDF文件中提取图像(教程)

Java本身不直接支持PDF文件操作&#xff0c;因此需要使用外部Java PDF库。本教程将向您展示如何通过5个简单步骤&#xff0c;使用JPedal Java PDF库从PDF文件中提取图像。 使用Java从PDF中提取图像 • 将JPedal库添加到您的类路径或模块路径&#xff08;下载试用版jar文件&…...

通过混合机器学习和 TOPSIS 实现智能手机身份验证的稳健行为生物识别框架

1. 简介 随着日常工作、个人生活和金融操作对智能手机的依赖性不断增强,对弹性安全身份验证系统的需求也日益增长。尽管 PIN 码、密码和静态生物识别等传统身份验证方法仍可为系统提供一定的安全级别,但事实证明,它们容易受到多种威胁,包括敏感数据泄露、网络钓鱼、盗窃和…...

day010

文章目录 1. 在Ubuntu中使用visudo2. 别名 alias2.1 查看已配置的别名2.2 配置grep别名2.3 配置rm别名2.4 临时使用配置别名的命令 3. 系统校验检查3.1 md5校验3.2 aide 高级入侵检测环境3.2.1 安装aide3.2.2 修改aide配置文件3.2.3 根据配置文件生成初始的指纹信息库3.2.4 使用…...

Coco AI 开源应用程序 - 搜索、连接、协作、您的个人 AI 搜索和助手,都在一个空间中。

一、软件介绍 文末提供程序和源码下载 Coco AI 是一个统一的搜索平台&#xff0c;可将您的所有企业应用程序和数据&#xff08;Google Workspace、Dropbox、Confluent Wiki、GitHub 等&#xff09;连接到一个功能强大的搜索界面中。此存储库包含为桌面和移动设备构建的 Coco 应…...

MySQL 8.0 OCP(1Z0-908)英文题库(11-20)

目录 第11题题目分析正确答案 第12题题目分析正确答案 第13题题目分析正确答案 第14题题目分析正确答案 第15题题目分析正确答案 第16题题目分析正确答案 第17题题目分析正确答案&#xff1a; 第18题题目分析正确答案 第19题题目分析正确答案 第20题题目分析正确答案 第11题 W…...

国标GB28181软件EasyGBS雪亮工程打造智能高效的视频监控新体系

一、背景 雪亮工程是构建公共安全视频监控联网应用的系统工程&#xff0c;旨在通过整合各类视频监控资源&#xff0c;实现城乡视频监控一体化&#xff0c;提升社会治安防控能力。随着城市化进程的加快和社会治理需求的不断提高&#xff0c;雪亮工程的建设规模不断扩大&#xf…...

视频添加字幕脚本分享

脚本简介 这是一个给视频添加字幕的脚本&#xff0c;可以方便的在指定的位置给视频添加不同大小、字体、颜色的文本字幕&#xff0c;添加方式可以直接修改脚本中的文本信息&#xff0c;或者可以提前编辑好.srt字幕文件。脚本执行环境&#xff1a;windowsmingwffmpeg。本方法仅…...

springCloud/Alibaba常用中间件之GateWay网关

文章目录 SpringCloud:依赖版本补充GateWay:网关三大核心之Router:路由1、导入基础依赖2、进行服务注册3、路由映射4、测试访问GateWay的端口是否可以访问 三大核心之Predicate:断言配置文件自定义Predicate&#xff08;断言&#xff09; 三大核心之Filter:过滤配置文件自定义全…...

ABP vNext + Dapr 实现云原生微服务治理

ABP vNext Dapr 实现云原生微服务治理 &#x1f680; 前言 &#x1f4dd; 随着云原生与微服务架构的快速发展&#xff0c;相关工具和框架也在不断演进。ABP vNext 是一套成熟而现代的 .NET 应用开发框架&#xff0c;在模块化、领域驱动设计等方面提供强大支持。而 Dapr 作为…...

【报错】view size is not compatible with input tensor‘s size and stride

完整报错 Traceback (most recent call last): File "D:\360MoveData\Users\HONOR\whu\TwoStageTraining.py", line 590, in <module> criterionseg_criterion, save_dir./models, writerwriter_first_stage) File "D:\360MoveData\Users\HONOR\whu\TwoS…...

maven如何搭建自己的私服(windows版)?

环境准备 安装 JDK &#xff1a;确保系统已安装 JDK 8 或更高版本。可以通过以下步骤安装 JDK&#xff1a; 下载 JDK 安装包&#xff0c;可以从Oracle 官方网站下载适用于 Windows 的 JDK 安装程序。 运行安装程序&#xff0c;按照提示完成安装。安装过程中可以指定安装路径&a…...

CDGP|数据全生命周期的“收数、治数、用数、保数”体系详解

在数据成为重要资产的今天&#xff0c;如何高效地管理和利用数据已成为企业和组织的核心竞争力之一。数据全生命周期管理涵盖了从数据收集、治理、应用到保护的各个环节&#xff0c;形成了一个闭环体系。本文将重点介绍数据全生命周期中的“收数、治数、用数、保数”四个关键环…...

在UI原型设计中,低、高保真原型图有什么区别?

在数字产品开发中&#xff0c;原型&#xff08;Prototype&#xff09; 是连接创意与落地的桥梁。它通过可视化的方式验证功能、交互与用户体验&#xff0c;避免开发资源浪费。而低保真&#xff08;Lo-Fi&#xff09;与高保真&#xff08;Hi-Fi&#xff09;原型&#xff0c;则是…...

万物互联时代:ONVIF协议如何重构安防监控系统架构

前言 一、ONVIF协议是什么 ONVIF&#xff08;Open Network Video Interface Forum&#xff0c;开放式网络视频接口论坛&#xff09;是一种全球性的开放行业标准&#xff0c;由安讯士&#xff08;AXIS&#xff09;、博世&#xff08;BOSCH&#xff09;和索尼&#xff08;SONY&…...

初识Linux · 传输层协议TCP · 上

目录 前言&#xff1a; TCP结构体 首部长度 确认应答机制 捎带应答机制 超时重传机制 连接管理机制 三次握手 SYN_SENT SYN_RCVD ESTABLISHED TCP为什么是三次握手 四次挥手 什么是四次挥手 状态理解 CLOSE_WAIT LAST_ACK TIME_WAIT 前言&#xff1a; 前文有…...

基于SpringBoot的校园周边美食探索及分享平台的设计与实现

资源详情&#xff1a; 私信我或点击链接获取&#xff1a; 基于SpringBoot的校园周边美食探索及分享平台的设计与实现资源-CSDN文库 摘要 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联…...

系统架构设计-真题2024下半年总结

系统架构设计-真题2024下半年总结 综合知识&#xff08;选择题&#xff09;考点分布选择题详细解释ABSD方法简介 选项分析生活化例子概念讲解系统的质量目标系统的商业目标系统开发人员的商业目标 简单记法总结基于内容推荐的优点选项分析正确答案总结 综合知识&#xff08;选择…...

《React Native性能优化:从卡顿到丝滑的蜕变之旅》

《React Native性能优化:从卡顿到丝滑的蜕变之旅》 前言:当你的React Native应用开始"便秘"… “这破应用怎么又卡了?!”——如果你也曾在测试自己的React Native应用时发出这样的呐喊,那么你不是一个人在怒吼。想象一下这样的场景:你精心打造的APP在低端安卓…...

flutter build apk出现的一些奇怪的编译错误

我换了新电脑后重新编译基于livekit 的 flutter livekit工程&#xff0c;然后编译的时候一直报flutter_webrtc的 0.11.7 版本的dart代码有一个接口未实现&#xff0c;我比较了所以环境和版本实现找不到问题&#xff0c;根本不正常哪里导致的问题 &#xff0c;以前的电脑的环境一…...

枚举 · 例8扩展-校门外的树:hard

登录—专业IT笔试面试备考平台_牛客网 代码区&#xff1a; #include<algorithm> #include<iostream> #include<vector>using namespace std; struct TREE{int left,right; }; bool compare(const TREE&a,const TREE& b ){if(a.left!b.left){return…...

监控系统进阶方案:OpenObserve的Docker部署与远程访问配置指南

文章目录 前言1. 安装Docker2. 创建并启动OpenObserve容器3. 本地访问测试4. 公网访问本地部署的OpenObserve4.1 内网穿透工具安装4.2 创建公网地址 5. 配置固定公网地址 前言 今天&#xff0c;我想分享一个在云原生可观测性领域备受关注的开源项目——OpenObserve。在复杂的云…...