代码人生

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

CSS3-核心高级技巧

浏览 147 扫码 分享 2023-11-18 22:52:06
  • 概要
    • 双飞翼布局
    • 基于移动端的 PX 与 REM 转换兼容方案

    概要

    image.png

    双飞翼布局

    image.png
    image.png
    image.png
    image.png

    image.png
    手机端使用 box-sizing border-box
    image.png
    image.png

    基于移动端的 PX 与 REM 转换兼容方案

    image.png
    image.png
    移动端的给 html 根元素设置 font-size: 10 / 16 = 0.625rem 浏览器的默认字号大小是 16px

    image.png
    image.png

    image.png
    image.png
    可以自行上传 svg 并进行操作的网站:https://icomoon.io/app/#/select
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    用 css 实现的 icon 网站:http://cssicon.space/#/
    image.png
    image.png
    帮助布局字体的 js 库
    image.png

    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    若有收获,就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • el-table 组件多列合并单元格,可以指定某列
    • el-table 组件自定义表头列表中某个单元格的样式
    • el-table 组件多列排序
    • AngularJS4
    • AngularCLI-安装和使用
    • 走进AngularJS4的大门
    • CSS-武艺
    • CSS-后处理器
    • CSS-基础网页布局、圣杯布局、双飞翼布局
    • CSS-手动设置文字换行
    • CSS-绘制特殊图形
    • CSS3-核心高级技巧
    • CSS3D-仿淘宝造物节----实战五
    • CSS3绘制3D魔方
    • CSS分层
    • CSS的十八般技巧(搬砖)
    • LESS-入门
    • OO-CSS----面向对象的CSS
    • SASS-入门
    • 参考
    • css-文字彩色轮播效果
    • stylus-使用技巧
    • svg和css实现波浪动效
    • 从网站-https---codepen-io--看到的一个彩带的动效
    • 从网站-https---zipl-pro-中学到的-css-使用技巧
    • 使用-space-between-布局时,最后一行保持左对齐
    • 百度使用的将页面全局元素置成灰色的方法
    • 针对谷歌浏览器清除表单自动填充时自带的黄色背景
    • Cordova-轻抚
    • Cordova-创建一个新的应用
    • Flutter-好奇
    • flutter-官方资源入门视频推荐
    • flutter-踩坑记录
    • 使用-VS-Code-进行-flutter-项目创建以及调试
    • 使用-VSCode-进行-flutter-开发
    • HTML-集锦
    • html5与html4的区别
    • JavaScript-基础语法-朗朗
    • ES6----变量的解构赋值的用途
    • ES6-字符串操作-includes(),-startsWith(),-endsWith()-函数
    • ES6-模板字符串-``
    • Function-prototype-bind()
    • JavaScript-逻辑与(&&)-与-逻辑或(--)-的逻辑运算规则理解
    • console-table-方法可以将某些复合类型的数据转为表格显示
    • 凡是使用别名执行eval,eval内部一律是全局作用域。
    • 原始类型与实例对象的自动转换
    • 多种运算符的优先级
    • Python-套路
    • Python-环境搭建
    • React
    • React-JSX详解与实战
    • React-不同表单元素的使用
    • React-也许答案并不是DOM
    • React-事件函数和this
    • React-介绍
    • React-可控控件和不可控控件
    • React-属性和状态的对比
    • React-属性的介绍与应用
    • React-开发环境的配置
    • React-源码分析
    • React-生命周期
    • React-第一个HelloWorld
    • React-运行中的状态
    • React-销毁阶段介绍
    • React-非DOM属性介绍
    • 状态的介绍和应用
    • TypeScript
    • TypeScript--static和引用类型的使用方法
    • TypeScript-Mixins-混合、插入
    • TypeScript-namespace-模块
    • TypeScript-三斜线指令和错误信息列表
    • TypeScript-介绍与环境的搭建
    • TypeScript-函数--lambads-和-this-关键字的使用
    • TypeScript-函数-函数类型
    • TypeScript-函数-可变参数
    • TypeScript-函数-可选和默认参数
    • TypeScript-函数-访问修饰符-public-(公开的)--private-(私有的)
    • TypeScript-函数-重载
    • TypeScript-基本数据类型 基本数据结构
    • TypeScript-封装的实现
    • TypeScript-接口-Interfaces---函数类型
    • TypeScript-接口-Interfaces---创建接口
    • TypeScript-接口-Interfaces---可选属性
    • TypeScript-接口-Interfaces---实现接口
    • TypeScript-接口-Interfaces---接口继承与混合类型
    • TypeScript-接口-Interfaces---数组类型
    • TypeScript-模块-modules-了解
    • TypeScript-模块-modules-应用
    • TypeScript-泛型-泛型的应用
    • TypeScript-泛型-泛型类
    • TypeScript-泛型-泛型类型
    • TypeScript-泛型-认识泛型
    • TypeScript-类(Classes)的创建与继承
    • TypeScript-装饰器
    • Vue-基本操作
    • Vue-computed计算属性
    • Vue-源码浅析
    • Vue-生命周期
    • Vue1-0入门
    • Vue2-0新变化
    • VueDirective-指令
    • Vue事件处理
    • Vue列表渲染
    • Vue动画
    • Vue双向绑定和条件判断
    • Vue异步获取数据
    • Vue组件
    • codepen-有趣源码搬运
    • 一个旋转、透明的立方球体
    • 烟火效果5
    • 烟花效果-京东活动源码copy
    • 烟花效果-可点击发射的
    • 烟花效果3
    • 烟花效果4
    • 烟花效果6
    • 烟花效果7
    • vue-项目实战-坑的深浅
    • -eslintrc-js-文件-rules-增加设置
    • Vue-cli-介绍
    • Vue-cli-使用
    • 效果 gif 图
    • VueJS-介绍1----MVVM框架
    • VueJS-介绍2----VueJS是什么
    • VueJS-介绍3----如何做技术选型
    • VueJS-介绍4----VueJS-的核心思想
    • el-table--组件自定义表头列表中某个单元格的样式
    • el-table-组件多列合并单元格,可以指定某列
    • el-table-组件多列排序
    • el-table-组件多级可无限嵌套的递归表头
    • 资料
    • 资料
    • vue-cli-脚手架自动构建项目
    • 资源
    • vue-router
    • vue-创建组件
    • 前言
    • vue-实战各种小技巧(长期更新)
    • vue-表单操作
    • vue-通过-webpack-的-require-context()-实现读取路由文件,动态添加路由的功能
    • 使用-Pug-和-Stylus-的-Vue-组件示例,以及一些-pug、-stylus-的使用技巧
    • 前端如何去-mock-数据
    • 慕课网示例整个项目简介整个项目简介
    • 若依前后端分离框架踩坑之路
    • 项目目录设计
    • 一灯小实战
    • CSS3D-实战五--造物节
    • NodeJS实战二--使用NodeJS实现前后端的联调
    • 实战三--前端开发工程化
    • 前端架构师
    • BFF-整个完整的-web-前端框架构建-第一节-启蒙课
    • BFF-整个完整的-web-前端框架构建-第二节
    • BFF-整个完整的-web-前端框架构建(一)
    • BFF-整个完整的-web-前端框架构建(三)
    • BFF-整个完整的-web-前端框架构建(二)
    • 前端进阶学习笔记
    • FIS从入门到放弃
    • Generator函数的概念----yield-关键字的解析----async-函数(async,await)
    • JS-设计模式----单例模式
    • Node-入门----究极入门资源
    • NodeJS-试卷解析
    • Ubuntu-只能访客登录修复方法
    • VUE-源码解析
    • WebPack从入门到放弃
    • Webpack-2-&-3--核心技巧
    • Webpack-入门介绍
    • Webpack1-入门 实战
    • Web高性能动画及渲染原理
    • polyfill,shim,shiv之间有什么区别?
    • 从0到大论前端持续集成
    • 全面解析JavaScript中“&&”和“--”操作符(总结篇)
    • 函数式编程初阶入门
    • 前端工程化试卷解析
    • 前端工程化预备知识(上)
    • 前端工程化预备知识(中)
    • 前端工程师高级调试---Audits-和-Chrome-性能插件
    • 前端工程师高级调试---断点以及捕捉事件绑定
    • 前端工程师高级调试--Timeline掌控帧渲染模式- -Profiles分析具体问题
    • 前端开发工程化与性能优化--实战篇(四)
    • 前端性能优化常用技术手段--JavaScript-面向切面编程(AOP)入门
    • 前端性能优化常用技术手段--Nginx服务器缓存策略
    • 前端性能优化常用技术手段--雅虎军规
    • 前端性能优化必备服务器知识
    • 前端架构那些事儿----性能优化
    • 前端架构那些事儿
    • 资料
    • 性能优化黑科技-Google-AMP
    • 资料
    • 网红平台性能优化
    • 设计模式
    • 图形学
    • 前端图形学启蒙课
    • 工作期间存档
    • 2019-02-22-周报内容
    • 2020-06-09-山东-GIS-源码分析
    • 云公司---jf项目-前端使用手册
    • 华为云环境前端发布指南(20191231)
    • 准备工作
    • 工作期间技巧合集
    • CSS-计数器(counter)入门
    • JS-Cookie-增-改-(删)-查--基本操作
    • Math-random()-随机小-整数-随机字符串
    • Object-prototype-toString-方法的扩展与应用
    • RegExp-对象--利用g修饰符允许多次匹配的特点,可以用一个循环完成全部匹配
    • css-重写-input[type=_checkbox_]-样式
    • css3-background-image-渐变背景色
    • es6-promise-ajax-请求实例运用代码
    • js-setTimeout-实现稀释技巧
    • vue-基本语法操作
    • 一个彻底将对象冻结的函数
    • 使用-console-log-在控制台输出-css
    • 使用-particles-js-粒子效果-Demo
    • 使用对象结构替代结构混乱不堪的-switch---case
    • 使用左移运算符----将颜色的-RGB-值转为-HEX-值
    • 使用异或运算符-^-互换两个变量的值
    • 全局公用脱敏处理方法
    • 判断一个列表所有子级对象中的某个字段值是否重复
    • 利用-Object-函数将任意值转为对象的方法判断变量是否为对象
    • 前端将后端返回的数据流生成文件并下载
    • 前言
    • 勾号、叉号、圈号的收集
    • 去除字符串中的空格符
    • 说明
    • 实现一个总是返回数值的整数部分的函数
    • 实现千位分隔符
    • 将-arguments-转为真正的数组的方法
    • 将-url---后面的参数转换为-JSON
    • 小技巧--select-文字右对齐
    • 小技巧--微信内置浏览器清除缓存
    • 手指(鼠标)拖动、滑动,金额限制交互-Demo
    • 数组中的数字排序
    • 数组的遍历
    • 日常-bug-&-小技巧(持续更新)
    • 活动倒计时脚本
    • 立即执行函数的-N-种写法
    • 网络请求异常捕获
    • 自定义-console-对象的方法
    • 自定义-日历范围选择-jquery-插件-calendarRange
    • 自己实现的粒子效果
    • 营业执照号正则验证
    • 计算本年度还剩下多少天
    • 通过递归,计算斐波那契数列的代码
    • 重置统一浏览器样式的-Normalize-css
    • 闭包的一个作用----封装对象的私有属性和私有方法
    • 页面快捷导航- -滚动监听- -返回顶部-三件套
    • 微信小程序-己所不欲
    • 小程序开发工具的使用方法
    • 开发入门
    • 数据结构和算法
    • 前端开发中《数据结构和算法》
    • 数据结构和算法
    • 新东方网络课堂-积极
    • 1-1-单词词汇
    • 电子书-摘抄
    • 前言
    • 前言
    • 软件-包-基础操作
    • Ant-Design-Pro-框架使用篇(持续更新)
    • Bower--Web包管理器-介绍-安装-应用
    • Browserify-介绍-安装-应用
    • Centos7-0-下-java-环境的安装和-jar-包的启动
    • 资料
    • Chrome-插件篇(持续更新)
    • Emmet-插件使用方法笔记
    • Git-入门级的操作
    • Grunt--JavaScript世界的构建工具-介绍-安装-应用
    • Gulp-一个自动化构建工具-介绍-安装-使用
    • 资料
    • 前端的跨域问题
    • Linux-命令行操作(持续更新)
    • 资料
    • Nginx的反向代理与负载均衡--配置Nginx
    • Rollup-打包工具的介绍和使用
    • SVN-较为详细的新手入门操作指南--收藏版
    • VS-Code-编辑器-Vetur-扩展更新至-0-31-0-版本,无法使用的问题记录
    • VSCode-使用篇
    • Windows-下使用-NVMW-安装任意版本的-node
    • Windows-命令行操作(持续更新)
    • Yeoman-现代应用程序网站的搭建工具-介绍-安装-应用
    • 资料
    • 最终实现的 GIF 效果图
    • 前言
    • centos7安装nginx
    • 资料
    • echart-踩坑之路
    • gka----简单的、高效的帧动画生成工具
    • jsdoc-一个JavaScript-API文档生成器
    • karma-实现简单的自动化单元测试
    • ngrok-一个可以使你的本地项目在线上正常访问的库
    • npm-升级至最新版本
    • npm-安装-github-项目的几种方式
    • npm-转换为-cnpm-淘宝镜像
    • nprogress-进度条插件的使用
    • selenium-webdriver----实现浏览器端的自动化测试工具
    • sublime-text-3-安装-&-常用插件
    • uni-app-踩坑之路(长期更新)
    • v-charts-爬坑之路~!~
    • vue-echarts-的使用与踩坑(长期更新)
    • vuedraggable-实战各种小技巧(长期更新)
    • vux----vue-手机端的-UI-组件库
    • windows-修改-hosts-使域名可快速访问的方法
    • 资料
    • xml2js-简单的使用实例-xml-转换为-json
    • xshell-评估已过期的解决方法
    • 资料
    • 代码的版本控制程序-svn-&-git
    • 使用-Node-js----VS-扩展工具编译--Less
    • 资料
    • 使用-http-server-在本地开启超轻量级web服务器
    • 使用-icomoon-在线制作图标(svg)字体文件
    • 使用-koa2-实现基本的服务器,并输出-Hello-World,且实现单元测试
    • 准备工作
    • 引言
    • 正文
    • 资料
    • 图片主色值获取脚本-rgbaster-js-介绍-&-使用
    • 基于-vue-cli-3-0-0-构建的多页面基础项目模板
    • 将Centos的yum源更换为国内的阿里云源
    • 自动化单元测试----karma
    • 谷歌浏览器控制台出现-Unchecked-runtime-lastError--The-message-port-closed-before
    • 马克鳗简单的安装-&-使用教程
    暂无相关搜索结果!

      让时间为你证明

      展开/收起文章目录

      分享,让知识传承更久远

      文章二维码

      手机扫一扫,轻松掌上读

      文档下载

      请下载您需要的格式的文档,随时随地,享受汲取知识的乐趣!
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度

          思维导图备注