按钮 1 定义按钮 <!--使用<button>元素定义按钮--> <button class="btn">Button</button> <!--使用<a>元素定义按钮--> <a class="btn" href="#">Link</a> <!--使用<input>元素定义按钮--> <!--没 ...
转载 2021-08-06 21:13:00
79阅读
本小节主要讲述在 React中使用css scss 以及其他第三方如bootstrap的css样式配置 1 前言在 JSX 中,如果需要写行内样式,不能为 style 设置字符串的值,而是应该写成 style={{ color:'red',zIndex:3}} 在一个使用案例中上一篇中有写到,未设置样式前 设置style 样式后 import React
徽章 1 定义徽章 通常使用标签,添加badge类来设计徽章。 徽章可以嵌在标题中,并通过标题样式来适配其大小,因为徽章的大小是使用em单位来设计的,所以有良好的弹性。 徽章还可以作为链接或按钮的一部分来提供计数器。 提示:徽章不仅仅只能在标题、链接和按钮中添加,可以根据场景在其他元素中添加,以实现 ...
转载 2021-08-07 12:16:00
530阅读
表单 1 定义表单控件 表单控件(例如<input>、<select>、<textarea>)统一采用**.form-control**类样式进行处理优化,包括常规外观、focus选中状态、尺寸大小等。并且表单一般都放在表单组(form-group)中,表单组也是bootstrap 4为表单控件设置 ...
转载 2021-08-07 19:40:00
135阅读
amazeui中css组件、js组件、web组件的区别 一、总结 一句话总结: 1、可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插件没什么太大区别,官方原话也说可以这么调用的。 2、能编写自定义模板通过js代码调用:Web组件与J
转载 2018-06-06 12:43:00
149阅读
2评论
这篇文章大致是为了回答几个问题:迁移到微前端,我们到底要什么?业界的「微前端」体系通常包括哪些部分?贴近研发同学侧的「微前端框架」通常用什么样的技术?我们团队的项目现在能上「微前端」吗?需要做什么改造、到什么地步?作者 zthxxx(以下全文读完大约 20 min)微前端已经不是一个新概念了,大家或多或少都听说过接触过,这里不再去做一堆定义,只是对目前业界做法的调研总结 / 概览,这篇文章面向的是
一、项目来源慕课网—手把手从0打造电商网页开发 网址:https://www.imooc.com/learn/1236 源码:右侧资料下载 二、摘要1.基本框架搭建(三、1-3) 2.实现html+css效果,一些要点笔记(三、4-8) 3.js效果步骤分析(三、9-10) 4.做完感受(四) 三、开始构建1.先搭建基本页面结构,并用link连接到首页 2.搭建页面骨骼 页面分为三大块,导航,首部
转载 2024-01-26 08:39:15
30阅读
普通开关按钮UI效果:将元素设置为背景,再利用元素的::before/::after绘制为开关触点。交互思路:为元素添加状态样式,更迭背景色以及触点偏移值实现开关转换。当然可以额外添加一个checkbox元素,利用[checked]属性充当状态样式可以省去一些事件监听上的工作<style> .na-switch {     width: 48px;     height: 24px;
CSS
转载 2021-03-09 17:55:45
327阅读
2评论
本篇文章介绍带边框的三角形与div形成的tooltip气泡。
转载 2012-07-22 21:51:00
256阅读
2评论
在 React 中, React 认为结构和逻辑是密不可分的, 所以在 React 中结构代码也是通过 JS 来编写的 正是受到 React 这种思想的影响, 所以就有很多人开发了用 JS 来编写 CSS 的库 比较火热的库有:styled-components / emotion 利用 JS 来编
原创 2022-05-10 21:40:00
144阅读
为什么要拆分样式文件?更易于查找样式规则.简化维护,方便管理.还可以针对某一页面提供特定的样式.为什么要添加桥接样式?你可以随时添加或移除样式而不需要修改HTML文档.为什么要定义两种媒体类型?NN4不支持@import,故识别不到桥接样式.@import ‘header.css’;@import ...
转载 2014-07-21 14:03:00
80阅读
2评论
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一、总结 1、css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画。 2、基本使用(这个好): <div class="am-animation-fade">...</div> 3、一直旋转的icon:<
转载 2018-05-09 02:54:00
128阅读
2评论
css和sassI have had this on again/off again relationshi
原创 2021-07-15 14:28:41
186阅读
使用CSS3纯代码来实现模拟时钟,及指针动画功能。 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形;表盘 Transform:变换,旋转,扭曲;刻度盘,指针形状 Animation:时分秒指针转动。 :before/:after :伪元素基本思路:<div id="clock" class=""> <ul> <li cla
转载 2023-07-21 17:08:22
95阅读
自从互联网诞生以来,就一直跟网站样式打交道,CSS一直存在并且已经按照自己的节奏发展,本文就带大家了解一下CSS的发展史。
原创 2022-03-17 22:35:48
779阅读
VUE基础部分组件css样式例子<style lang="less"> // 这里记得改名,然后给div也加名字 .comName-container { padding: 10 20px 20px; background-color: lightskyblue; min-height: 250px; flex: 1; } </style>并且App.vue
在被问到这个概念的时候其实是有点不明所以的,从来没想过CSS还能玩出什么花样。最多是一些预处理器的方便性吧。在进行一些了解后才发现,原来自己日常所习惯且喜欢的书写css的方式就是有原子化在里面的,只是可能用的不够极致// example:有圆形、三角、正方形 三个box,有红色,白色、黑色三种颜色分别搭配。用组件化和原子化来书写分别有几种方法呢?原子化和组件化的优劣及诸多便利且不去探讨,感兴趣的可
原创 2022-02-17 10:20:59
411阅读
Css Module (推荐) React 的脚手架已经内置了 css modules 的配置: .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等; 在以前我们的文件是这样的 index.css 如果使用了 CSS
原创 2022-05-10 12:12:00
511阅读
在开发 Vue.js 或 Nuxt.js 项目时,使用 CSS 动效组件库可以快速实现丰富的动画效果。以下是几个常用的 CSS 动效组件库和 Vue/Nuxt 动效组件库:1. CSS 动效组件库这些库提供了丰富的 CSS 动画效果,可以直接在 Vue 或 Nuxt 项目中使用。Animate.css Animate.css 是一个非常流行的 CSS 动画库,提供了大量的预设动画效果,如 fade
原创 6月前
224阅读
w AO模式 Append Overwrite 附加重写
转载 2017-02-24 10:05:00
59阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5