原子css 和 组件化css如何搭配使用

news2025/1/15 21:33:47

如果让你来实现下面这种页面,该怎么实现呢
在这里插入图片描述
原子化和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、针对特殊,没有规律,不需要复用的样式进行组件化编写

简单点就是先用原子类搭建好基本结构,然后再进行组件化样式的编写

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

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

相关文章

排序算法————基数排序(RadixSort)

基数排序的概念&#xff1a; 什么是基数排序&#xff1f;&#xff1f;&#xff1f;基数排序是一种和快排、归并、希尔等等不一样的排序...它不需要比较和移动就可以完成整型的排序。它是时间复杂度是O&#xff08;K*N&#xff09;&#xff0c;空间复杂度是O&#xff08;KM&…

【软件测试】UI自动化框架,数据驱动 vs 关键字驱动怎么选

一、UI自动化测试用例剖析 让我们先从分析一端自动化测试案例的代码开始我们的旅程。以下是我之前写的一个自动化测试的小Demo。这个Demo基于Selenium与Java。 自动化测试小Demo 它要测试的东西其实是要看一下百度搜索能不能返回兴业银行的官网。我们分析一下这段代码都包含些…

C++笔记之字节数组的处理

C笔记之字节数组的处理 code review! 文章目录 C笔记之字节数组的处理1.字节数组打印2.将字节数组转换为十六进制字符串并打印3.将字符串转为字节数组4.将字节数组转为字符串5.字节数组和字符数组的区别6.字节数组用于二进制数据存储7.字节数组用于网络通信数据传输8.使用 un…

【字节跳动青训营】后端笔记整理-2 | Go实践记录:猜谜游戏,在线词典,Socks5代理服务器

**本人是第六届字节跳动青训营&#xff08;后端组&#xff09;的成员。本文由博主本人整理自该营的日常学习实践&#xff0c;首发于稀土掘金&#xff1a;&#x1f517;Go实践记录&#xff1a;猜谜游戏&#xff0c;在线词典&#xff0c;Socks5代理服务器 | 青训营 我的go开发环境…

群晖7.X版安装cpolar内网穿透

群晖7.X版安装cpolar内网穿透套件 文章目录 群晖7.X版安装cpolar内网穿透套件前言1. 下载cpolar的群晖系统套件1.1 在“套件中心” 选择“手动安装”1.2 完成套件安装 2. 进入cpolar软件信息页3. 点击“免费注册”轻松获得cpolar账号 前言 随着群晖系统的更新换代&#xff0c;…

第一百二十七天学习记录:我的创作纪念日

机缘 今天收到CSDN官方的来信&#xff0c;想想也可以对我前面的学习记录进行一个总结。 关于来到CSDN的初心&#xff0c;也就是为了让自己养成一个良好的学习总结的习惯。这里要感谢我C语言视频教程的老师&#xff0c;是他建议学生们在技术博客中进行记录。对于技术博客&…

【Plex】FRP内网穿透后 App无法使用问题

能搜索到这个文章的&#xff0c;应该都看过这位同学的分析【Plex】FRP内网穿透后 App无法使用问题_plex frp无效_Fu1co的博客-CSDN博客 这个是必要的过程&#xff0c;但是设置之后仍然app端无法访问&#xff0c;原因是因为网络端口的问题 这个里面的这个公开端口&#xff0c;可…

EVE-NG MPLS L2VPN BGP lsp

导入了新的H3C 镜像&#xff0c;bgp 正常了。 目录 1 拓扑 2 配置步骤 2.1 配置接口IP 和路由协议 2.2 配置MPLS LDP 2.3 配置L2VPN BGP 2.4 配置 xconnect-group 2.5 验证L2VPN 1 拓扑 2 配置步骤 2.1 配置接口IP 和路由协议 PE1 interface LoopBack 0ip address 1…

LNMP环境搭建wordpress以及跳转后台报404解决

基于上文配置好的LNMP环境继续搭建wordpress 目录 一.到官网下载tar.gz包&#xff0c;并上传到Linux上&#xff0c;也可以通过复制链接地址进行下载 二. 将wordpress中的所有文件移动到你nginx.conf中指定目录中 三.为wordpress配置数据库 四.到浏览器进行注册 1.刚开始…

使用QT纯代码创建(查找)对话框详细步骤与代码

一、创建项目文件 打开Qt Creator->文件->新建文件或项目->选择Qt Widgets Application 为项目起名字 输入类的名字 二、 了解每个文件的作用 项目创建完毕之后就会出现以下几个文件&#xff0c;先来分别介绍以下这些文件的作用。 Headers->finddialog.h——很显…

Java:函数式(Functional)接口

文章目录 1 什么是函数式接口2 如何理解函数式接口3 举例Java 内置函数式接口1 之前的函数式接口2 四大核心函数式接口3.4.3 其它接口 内置接口代码演示 5 练习 1 什么是函数式接口 只包含一个抽象方法&#xff08;Single Abstract Method&#xff0c;简称SAM&#xff09;的接…

虚拟机/双系统Ubuntu扩容

虚拟机Ubuntu扩容 1.需要删除所有的快照 2.扩展虚拟机磁盘大小 虚拟机(M)→设置(s)→硬盘(SCSI)→扩展磁盘容量 3.Ubuntu内调整分区大小 安装gparted分区工具&#xff1a;sudo apt-get install gparted 启动gparted并resize分区 4.最后最好建一个快照&#xff0c;不然gg了…

系统架构设计专业技能 · 计算机网络(三)【系统架构设计师】

系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估&#xff08;二&#xff09;【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…

【FPGA零基础学习之旅#10】按键消抖模块设计与验证(一段式状态机实现)

&#x1f389;欢迎来到FPGA专栏~按键消抖模块设计与验证 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望大…

Android应用开发(37)LTPO帧率测试基于Surfaceview(暂存)

Android应用开发学习笔记——目录索引 参考android官网&#xff1a; Frame rate | Android media | Android Developers多重刷新率 | Android 开源项目 | Android Open Source ProjectWindowManager.LayoutParams | Android Developers 目前市面上旗舰手机基本都是…

wangEditor5实现@评论功能

需求描述&#xff1a;在输入框输入后显示用户列表&#xff0c;实现人功能 当前环境&#xff1a;vue3viteelementPluswangEditor5 需要插件&#xff1a;wangeditor/plugin-mention 安装插件&#xff1a;npm i wangeditor/plugin-mention 输入框组件分两部分&#xff1a;1. wa…

【electron】electron安装过慢和打包报错:Unable to load file:

文章目录 一、安装过慢问题:二、打包报错&#xff1a;Unable to load file: 一、安装过慢问题: 一直处于安装过程 【解决】 #修改npm的配置文件 npm config edit#添加配置 electron_mirrorhttps://cdn.npm.taobao.org/dist/electron/二、打包报错&#xff1a;Unable to load…

CAS服务端入门使用实践

CAS服务端入门使用实践 一、前言 1.简介 CAS 是一个企业多语言单点登录解决方案&#xff0c;支持大量附加身份验证协议和功能&#xff0c;满足身份验证和授权需求的综合平台。 2.环境 Windows 10JDK 1.8git version 2.41.0.windows.3Tomcat 9.0.78Maven 3.5.3cas-overlay-…

类与对象(加深)

目录 1.类的6个默认成员函数 2. 构造函数 2.1 概念 2.2 特性 3.析构函数 3.1 概念 3.2 特性 4. 拷贝构造函数 4.1 概念 4.2 特征 5.赋值运算符重载 5.1 运算符重载 5.2 赋值运算符重载 6.const成员 7.取地址及const取地址操作符重载 1.类的6个默认成员函数 如果…

51.C++继承

今天进行了新的学习关于c继承的知识。 目录 1.继承 基类and派生类 访问控制和继承 单继承 多继承 2.同名隐藏 1.继承 在C中&#xff0c;继承是一种面向对象编程的重要特性&#xff0c;用于构建类之间的层次关系。通过继承&#xff0c;一个类可以从另一个类继承其…