CSS3
关注
分享
扫一扫
文章平均质量分 82
MuGuiLin
Web Development。
展开
-
在Vue中 使用sass，配置scss全局函数、变量，配合 vw vh 做移动端自适应布局
前言以前做移动端项目布局都是rem来做的，但rem需要在页面中引入js，根据设备的宽度来修改根节点<html>标签的font-size样式属性（相对长度单位。相对于根元素(即html元素)font-size计算值的倍数）才能配使用！rem单位js代码：(function(doc, win) { var docEl = doc.documentElement, r...原创 2019-09-06 15:56:53 · 7192 阅读 · 1 评论 -
纯CSS 自定义radio单选按扭、checkbox复选框 默认样式
纯CSS 自定义修改原生html中的radio单选按扭标签、checkbox复选框标签的默认样式，选中之前、之后状态的颜色，边框色，选中动画等，可根自己的需要调整。原创 2022-09-29 17:52:04 · 4349 阅读 · 0 评论 -
在umijs中的.umirc.ts文件常用配置 和 postcss-px-to-viewport插件的配置
它是 PostCSS 的一个插件，它从像素单位生成视口单位（vw、vh、vmin、vmax）。PostCss-Px-To-Viewport 插件可将css中的px单位 自动转换 成viewport（vw/vh）单位npm地址：https://www.npmjs.com/package/@ttou/postcss-px-to-viewport1、安装postcss-px-to-viewport插件npm install -D postcss-px-to-viewport或：yarn add.原创 2021-07-01 15:04:17 · 5848 阅读 · 0 评论 -
你不知道的CSS！
在Web开发中，做为前端开发人员来说，切图、写样式、页面布局这些都最基础的，也是必须要会的，但在实际开发过程中，除了一些常用的CSS样式属性以外，还有些CSS样式属性不经常用，但是却很实用，而长时间不用就会忘记，所以在这里总结一下，以后用到时方便查阅。原创 2020-07-31 15:51:32 · 1958 阅读 · 1 评论 -
CSS、JS 使DIV水平 和 垂直居中的各种方法
在Web开发中，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div。 在这里，我总结出一些在工作中用到过的方法，和大家一起分享，疏漏之处，欢迎指导！实例代码：HTML: CSS:.po原创 2017-09-25 14:20:04 · 9457 阅读 · 0 评论 -
CSS3 响应适动态加载 外部style样式文件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3 响应适动态加载 外部style样式文件</title> <!--屏幕宽度大于760px时 使用样式1--> <link rel="stylesheet" t...原创 2017-08-15 22:12:50 · 1505 阅读 · 0 评论 -
Web前端开发 icon图标 转 web字体图标
在我们大多数的项目当中，icon图标是必不可少的，有的一个一个单独切片，或者将它们拼接组合起来（图片合成技术：css sprite）从而减少请求，方便调用等，但是随着项目的逐渐扩展壮大，图标越来越多，到最后难以维护， 比如以后要改某个图标的位置x , y，大小，顔色，新增。。。等等这样的方式就显得比较有限制性了。IcoMoon是一个可以通过个性化设置来创建自定义图标（字体）原创 2017-07-28 10:32:58 · 2369 阅读 · 0 评论 -
Stylus—CSS预处理框架
随着项目越来越复杂，CSS的预处理越来越重要，css维护工作会越来越困难，造成这些困难的很大原因源于CSS 是一门非程序式语言，没有变量、函数、作用域等概念。为了更好的管理、维护CSS代码，可以使用stylus、sass、less等技术, 这里选择的的stylus。参考网址：http://stylus-lang.com开源地址：https://github.原创 2017-08-10 17:13:33 · 1188 阅读 · 0 评论 -
Web移动端Css Fixed方式的布局方案
移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fixed + Input BUG现象让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用如下布局（以转载 2017-04-10 22:47:05 · 6743 阅读 · 0 评论 -
HTML5 CSS3 响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计...原创 2016-08-09 17:27:59 · 1042 阅读 · 0 评论 -
CSS3 background-attachment：属性
background-attachment :定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动inherit: 继承初始值: scroll继承性: 否适用于: 所有元素HTML代码：<!DOCTYPE html><h...原创 2016-07-18 18:46:28 · 774 阅读 · 0 评论 -
CSS3的 transition属性、transform属性，怎么才能让他同时执行多个不同的过渡、动画（变换属性）效果
如何给一个dom元素，同时设置多个不同的CSS变换(transform)属性，CSS3的 transition属性、transform属性，怎么才能让他同时执行多个不同的过渡、动画（变换属性）在属性中间用空格隔开即可， 旋转 缩放 扭曲 等同时执行多个效果！div{ width: 100px; height: 100px; background: red; <!--这里是设置变换过渡时间--> transition: al...原创 2016-07-14 15:09:08 · 57970 阅读 · 2 评论