![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
不爱敲代码的阿帕奇
每天进步一点点
展开
-
伪类简单使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类简单使用</title> <style type="text/css"> p:before{原创 2021-01-12 00:10:09 · 154 阅读 · 0 评论 -
logo公司常用写法模板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>logo公司常用写法模板</title> <style type="text/css"> h1{原创 2021-01-12 00:09:23 · 254 阅读 · 1 评论 -
content动态数据获取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>content动态数据获取</title> <style type="text/css"> p::before原创 2021-01-12 00:08:14 · 376 阅读 · 0 评论 -
CSS样式基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS样式基础</title> <!-- 外部样式 --> <link rel="stylesheet" h原创 2021-01-12 00:07:28 · 73 阅读 · 0 评论 -
BFC:margin塌陷问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BFC:margin塌陷问题</title> <style type="text/css"> .box1{原创 2021-01-12 00:06:42 · 108 阅读 · 0 评论 -
box-shadow
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>box-shadow</title> <style> .container{原创 2021-01-12 00:00:20 · 79 阅读 · 0 评论 -
border-radius
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>border-radius</title> <style> .container{原创 2021-01-11 23:59:27 · 79 阅读 · 0 评论 -
3D-transform
3D-transform<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D-transform</title> <style> .原创 2021-01-11 23:57:40 · 127 阅读 · 0 评论 -
CSS 面试真题 效果属性
CSS 面试真题如何用div画一个 xxxbox-shadow 无限投影::before::after如何产生不占空间的边框box-shadowoutline如何实现圆形元素(头像)border-radius:50%如何实现iOS图标的圆角clip-path:(svg)如何实现半圆、扇形等图形border-radius 组合:有无边框、边框粗细、圆角半径如何实现背景图居中显示 / 不重复 / 改变大小background-positionbackgro原创 2021-01-11 23:56:56 · 108 阅读 · 0 评论 -
CSS 工程化
CSS 工程化关注几个事情:组织、优化、构建、维护PostCSS将 CSS 解析成 CSS,和预处理器没太多区别。本身只有解析能力各种神奇的特性全靠插件目前至少有200多个插件常见:import 模块合并autoprefixer 自动加前缀cssnano 压缩代码cssnext 使用CSS新特性precss 变量、mixin、循环等PostCSS插件的使用全局安装 postcss-clinpm install postcss-cli -g在 postcss.con原创 2021-01-11 23:55:48 · 166 阅读 · 0 评论 -
transition 补间动画
CSS中动画的类型transition 补间动画(从一个状态到另一个状态,状态切换之间是有动画的)keyframe 关键帧动画(指定的每一个状态就是一个关键帧)逐帧动画(跳动)transition 补间动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid原创 2021-01-11 23:54:45 · 119 阅读 · 0 评论 -
关键帧动画
关键帧动画相当于多个补间动画与元素状态的变化无关定义更加灵活<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>keyframe关键帧动画</title>原创 2021-01-11 23:53:59 · 107 阅读 · 0 评论 -
CSS 动画
CSS 动画的实现方式有几种transitionkeyframes(animation)过渡动画和关键帧动画的区别过渡动画需要有状态变化关键帧动画不需要状态变化关键帧动画能控制更精细如何实现逐帧动画使用关键帧动画去掉补间(steps)CSS动画的性能性能不坏部分情况下优于JS但JS可以做的更好部分高危属性(例如 box-shadow等)...原创 2021-01-11 23:53:15 · 63 阅读 · 0 评论 -
Bootstrap
Bootstrap一个CSS框架twitter 出品提供通用基础样式Bootstrap 4兼容IE10+使用flexbox布局抛弃Nomalize.css提供布局 和 reboot版本(官网,用sass写)可用于后台管理系统Bootstrap JS组件用于组件交互dropdown(下拉)modal(弹窗)…基于jquery写的,同时,依赖第三方库 Popper.js和 bootstrap.js如上图,第二个js文件包含了 Popper.js使用方式:基于原创 2021-01-11 23:52:10 · 172 阅读 · 0 评论 -
进入Typescript的世界
安装 TypescriptTypescript 官网地址: https://www.typescriptlang.org/zh/使用 nvm 来管理 node 版本: https://github.com/nvm-sh/nvm安装 Typescript:npm install -g typescript使用 tsc 全局命令:// 查看 tsc 版本tsc -v// 编译 ts 文件tsc fileName.ts原始数据类型Typescript 文档地址:Basic Types原创 2020-12-22 22:11:51 · 110 阅读 · 1 评论