原子css 和 组件化css如何搭配使用
如果让你来实现下面这种页面,该怎么实现呢

原子化和css组件化方式写法,可以搭配起来使用,常用的css
原子css
比如 下面这些类似flex 布局,lstn curser-pointer 等常用的或者
具备一定规律性的padding margin 样式可以抽取为单独的原子类使用
// 移除ul的点
.lstn {list-style-type: none;
}// 高度满屏
.h100vh {height: 100vh;
}// 透明度
.opacity-30 {opacity: 0.3;
}.opacity-50 {opacity: 0.5;
}.opacity-70 {opacity: 0.7;
}// 横向排列
.flex {display: flex;flex-wrap: wrap;
}.flex-grow {flex-grow: 1;
}// 纵向排列
.flex-col {flex-direction: column;flex-wrap: wrap;
}.text-white {color: #fff;
}.bg-red {background-color: red;
}.bg-orange {background-color: orange;
}.justify-around {justify-content: space-around;
}.justify-between {justify-content: space-between;
}.justify-center {justify-content: center;
}.nowrap {flex-wrap: nowrap;
}.color-white {color: white;
}.fw-600 {font-weight: 600;
}// 字体大小
.fz16 {font-size: 16px;
}.fz20 {font-size: 20px;
}.fz25 {font-size: 25px;
}.fz40 {font-size: 40px;
}//内边距.pt50 {padding-top: 50px;
}.px5 {padding: 0 5px;
}.px40 {padding: 0 40px;
}.py15 {padding: 0 15px;
}.py40 {padding: 0 40px;
}.p20 {padding: 20px;
}.p25 {padding: 25px;
}//外边距
.mt15 {margin-top: 15px;
}.mr10 {margin-right: 10px;
}.my15 {margin: 0 15px;
}.my20 {margin: 20px auto;
}// 宽度相关
.w100 {width: 100%;
}.w23 {width: 23px;
}// 图标相关
.icon20 {width: 20px;height: 20px;
}.icon80 {width: 80px;height: 80px;
}.position-relative {position: relative;
}.position-absolute {position: absolute;
}.ovh {overflow: hidden;
}
.radius50 {border-radius: 50%;
}
// 箭头指向
.cursor-pointer {cursor: pointer;
}// 文字居中
.text-center {text-align: center;
}
对于比较大的公共类,比如一些比较通用的组件,可以抽取为一个大的组件类
.card {background-color: var(--card-bg);margin-bottom: 30px;border-radius: var(--card-radius);box-shadow: 0 0 33px 2px rgba($color: #000000, $alpha: .1);
}
而一些比如字体17px 背景颜色非特别的红白蓝绿这种颜色的,或者阴影这些可以在组件化代码当中编写
// 第二屏
.section2 {// 文章列表.article {.article_item {height: 240px;// 图片在右边.article_item--right {flex-direction: row-reverse;}.article_item_img {height: 240px;width: 370px;img {transition: transform .6s ease-in-out;transform-origin: center;&:hover {transform: scale(1.2)}}}}}// 导航相关.nav_info {//作者信息.author_info {.name {font-size: 22px;}.follow_btn {height: 35px;background-color: var(--btn-bg);}}}
<section class="container h100vh section2 pt50"><div class="row"><!--文章列表--><div class="article col-md-9 px5"><!--文章项--><div class="article_item card flex article_item--left"><div class="article_item_img flex ovh flex-col justify-center"><img src="./img/404.jpg" class="w100" alt=""></div><div class=" flex flex-col justify-center flex-grow py40"><div> Mac 切换 github 账号</div><div>发表于 1 个月前 |工具 |mac•github</div><div>本文详细讲述了如何在 Mac 环境下 切换 github 账号</div></div></div><div class="article_item card flex nowrap article_item--right"><div class="article_item_img ovh flex flex-col justify-center"><img src="./img/404.jpg" class="w100" alt=""></div><div class=" flex flex-col justify-center flex-grow py40"><div> Mac 切换 github 账号</div><div>发表于 1 个月前 |工具 |mac•github</div><div>本文详细讲述了如何在 Mac 环境下 切换 github 账号</div></div></div></div><!--导航信息--><div class="col-md-3 px5"><div class="nav_info"><!--站长信息--><div class=" author_info card p25"><div class=" icon80 radius50 bg-orange my20"></div><div class=" text-center ">毛竹</div><p class="text-center">怕什么真理无穷,进一寸有一寸的欢喜。</p><div class=" flex justify-between"><div class=" text-center"><p>文章</p><p class="fz20">159</p></div><div class=" text-center"><p>标签</p><p class="fz20">517</p></div><div class=" text-center"><p>分类</p><p class="fz20">57</p></div></div><div class="follow_btn content-center cursor-pointer text-white"><img src="./img/icon/github.png" class="icon20 mr10" alt=""> Follow Me</div><div class=" content-center mt15"><img src="./img/icon/github.png" class="cursor-pointer w23" alt=""><img src="./img/icon/email.png" class="cursor-pointer w23 my15" alt=""><img src="./img/icon/twitter.png" class="cursor-pointer w23" alt=""></div></div><!--公告信息--><div class="p25 card"><div class="fz16">公告</div><div class=" text-center">Ask Me Anything</div><img class=" w100" src="./img/202109211725265.png" alt=""></div><!--最新文章--><div class="card p25"><div class="fz16">最新文章</div><div class=""><div class=""></div><div class=""></div><div class=""></div></div></div></div></div></div></section>
写代码思路:
1、提取出原子类:有哪些常用类,哪些类名可以抽取出来?
2、提取公共组件类:有哪些公共组件类
3、针对特殊,没有规律,不需要复用的样式进行组件化编写
简单点就是先用原子类搭建好基本结构,然后再进行组件化样式的编写
相关文章:
原子css 和 组件化css如何搭配使用
如果让你来实现下面这种页面,该怎么实现呢 原子化和css组件化方式写法,可以搭配起来使用,常用的css 原子css 比如 下面这些类似flex 布局,lstn curser-pointer 等常用的或者 具备一定规律性的padding margin 样式可以抽取为单独…...
Python 实现Selenium录屏的一种方法(图片整合成动态图)
由于UI层自动化的不稳定性,经常会遇到执行中断或用例失败的问题,以下是一些常见的措施。 1.详细的日志 2.定位出错时截图 3.Pytest的缓存机制(可以记录成功了哪些失败了哪些) 4.自动重试机制(如pytest-rerunfailures) 5.用例录像 用例录像是最直观的一…...
【设计模式——学习笔记】23种设计模式——策略模式Strategy(原理讲解+应用场景介绍+案例介绍+Java代码实现)
文章目录 案例引入传统方案实现实现分析 介绍基本介绍登场角色 案例实现案例一类图实现 案例二类图实现问答 策略模式在JDK源码中的使用总结文章说明 案例引入 有各种鸭子,比如野鸭、北京鸭、水鸭等。 鸭子有各种行为,比如走路、叫、飞行等。不同鸭子的…...
通讯商二要素Api接口验证真伪
随着互联网的普及和各种社交平台、电商平台、金融平台的发展,许多业务都需要用户进行实名认证,这也就涉及到了手机号码和姓名的验证问题。为了解决这个问题,现在有很多运营商提供的二要素API接口能够进行手机号码和姓名的验证,本文…...
React源码解析18(6)------ 实现useState
摘要 在上一篇文章中,我们已经实现了函数组件。同时可以正常通过render进行渲染。 而通过之前的文章,beginWork和completeWork也已经有了基本的架子。现在我们可以去实现useState了。 实现之前,我们要先修改一下我们的index.js文件&#x…...
MongoDB的下载和安装
一、MongoDB下载 下载地址:https://www.mongodb.com/try/download/community 二、安装 因为选择下载的是 .zip 文件,直接跳过安装,一步到位。 选择在任一磁盘创建空文件夹(不要使用中文路径),解压之后把…...
如何卖 Click to WhatsApp 广告最有效
2022年,大多数直接面向消费者的品牌都面临相同挑战—— Facebook 和 Instagram 的广告成本大幅增加。Business Insider 报导指出,2021年 Facebook 广告每次点击的平均成本(average cost per click)达到0.974美元,按年升…...
【UE4 RTS】10-RTS HUD Setup
前言 本篇博文主要制作了一个控件蓝图界面,用于显示当前的游戏时间 效果 步骤 1. 新建一个名为“Widgets”的文件夹 在该文件夹中新建一个控件蓝图,命名为“GameTime_HUD” 打开“GameTime_HUD”,添加如下控件 2. 打开玩家控制器“RTS_Pla…...
Python生成指定大小文件:txt/图片/视频/csv
如题,做测试的懂的都懂,不多解释 相比其他大佬,本脚本基于gpt编写后整理,生成的文件更真实,能够打开预览,看过其他人的生成脚本,只是一个符合大小,但是是空白或不能打开的文件。 话…...
Arcgis中影像图切片有白斑或者白点
效果 步骤 1、3dmax渲染或者其它原片 2、Arcgis中加载图片 原数据效果 3、定义投影和转换坐标系等等 我这边测试数据是EPSG:4326的坐标系 4、导出jp2(JPG2000)格式 转换后效果 5、发布服务 6、效果对比...
nlohmann json:通过[ ]运算符读取设置object/array
除了可以通过at,还可以通过[ ]运算符来读取和设置object/array #include <iostream> #include <nlohmann/json.hpp> using namespace std; using json = nlohmann::json;int main() {json data = R"({"name": "xiaoming","age&quo…...
rust学习-tokio::time
示例 use std::time::Duration; use tokio::{task, time::interval};#[tokio::main] async fn main() {let mut interval interval(Duration::from_secs(1));let handle task::spawn(async move {loop {interval.tick().await;println!("tick");}});handle.await.…...
Java 中 List 集合排序方法
方式一: 调用List接口自己的sort方法排序 public static void main(String[] args) {List<Integer> numListnew ArrayList<>();numList.add(999);numList.add(123);numList.add(456);numList.add(66);numList.add(9);Collections.sort(numList); //使…...
prometheus监控k8s服务并告警到钉钉
一、监控k8s集群 要监控k8s集群需要使用到以下服务用于收集监控的资源信息,node_exporter用于监控k8s集群节点的资源信息,kube-state-metrics用于监控k8s集群的deployment、statefulset、daemonset、pod等的状态,cadvisor用于监控k8s集群的p…...
Go和Java实现解释器模式
Go和Java实现解释器模式 下面通过一个四则运算来说明解释器模式的使用。 1、解释器模式 解释器模式提供了评估语言的语法或表达式的方式,它属于行为型模式。这种模式实现了一个表达式接口,该接口 解释一个特定的上下文。这种模式被用在 SQL 解析、符…...
域名配置HTTPS
一、注册域名 这个可以在各大平台注册,具体看一下就会注册了,自己挑选一个自己喜欢的域名。 步骤一般也就是先实名,实名成功了才能注册域名。 二、办理SSL证书 这里使用的是阿里云的SSL免费证书 1、申请证书 二、填写申请 三、域名绑定生…...
机械设计cad,ug编程设计,ug模具设计,SolidWorks模具设计
模具设计培训课程: 【第一阶段:CAD识图制图】 [AutoCAD机械制图]:全面讲解AUTOCAD应用知识,常用命令讲解与运用,二维平面图绘制,三维成型零件的绘制与设计,制作工程图 【第二阶段:U…...
嵌入式开发的学习与未来展望:借助STM32 HAL库开创创新之路
引言: 嵌入式开发作为计算机科学领域的重要分支,为我们的日常生活和产业发展提供了无限的可能。STMicroelectronics的STM32系列芯片以其出色的性能和广泛的应用领域而备受关注。而STM32 HAL库作为嵌入式开发的高级库,为学习者提供了更高效、更…...
WPS-0DAY-20230809的分析和利用复现
WPS-0DAY-20230809的分析和初步复现 一、漏洞学习1、本地复现环境过程 2、代码解析1.htmlexp.py 3、通过修改shellcode拿shell曲折的学习msf生成sc 二、疑点1、问题2、我的测试测试方法测试结果 一、漏洞学习 强调:以下内容仅供学习和测试,一切行为均在…...
MongoDB(三十九)
目录 一、概述 (一)相关概念 (二)特性 二、应用场景 三、安装 (一)编译安装 (二)yum安装 1、首先制作repo源 2、软件包名:mongodb-org 3、启动服务:…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
