CSS
一捆铁树枝
积跬步以至千里,积怠惰以致深渊,订阅号 learnweb123 ,欢迎关注!
展开
-
29个常用CSS选择器说明与使用
1、 *:通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。*选择器也可以应用到子选择器中,例如下面的代码:#container * { border:1px solid black; }这样ID为container 的所有子标签元素都被选中了,并且设置了border。2、 #id:id选择器#container {.原创 2020-12-15 16:49:28 · 1193 阅读 · 0 评论 -
CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
/*iPhone6和iPhone8*/@media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) {/*code*/ }/*iPhone6 Plus 和iPhone8 Plus*/@media...原创 2019-06-14 17:25:18 · 4848 阅读 · 0 评论 -
less入门
Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档中对 Less 的使用有详细的介绍,总结一下为:Less = 变量 + 混合 + 函数。下面我就用实际案例来具体介绍less首先,我介绍一下在webstorm中配置less文件自动生成css;一、配置webstorm1.使用 Npm 全局安装 Less$ npm install less -g2.配...原创 2019-03-13 11:33:33 · 699 阅读 · 0 评论 -
前端常用动画CSS代码
/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bou.原创 2020-12-07 17:09:16 · 341 阅读 · 0 评论 -
vue-cli 3.0中使用postcss-px-to-viewport或postcss-pxtorem实现移动端自动适配
postcss-pxtorem和postcss-px-to-viewport都是PostCSS的插件,用于将像素单元生成rem单位或者vw单位。前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。1.安装依赖npm install postcss postcss-loader postcss-pxtorem -D2.设置规原创 2020-08-10 16:17:58 · 2339 阅读 · 0 评论 -
按钮背景为图片,在按钮不可用时,将按钮置灰
这个需求有两种解决方法,一种是通过滤镜来实现,还有一种简单除暴,直接在按钮不可用时,将按钮背景图片换成灰色的背景1.按钮添加灰色滤镜.btn-disabled { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filt原创 2020-05-27 10:14:16 · 1117 阅读 · 0 评论