css
关注
分享
扫一扫
大吕十六 不见长安
春风得意马蹄疾，一日看尽长安花。
展开
-
CSS进阶CSS3，初入前端必备技能之一
CSS进阶CSS3，初入前端必备技能之一一、CSS3是什么？二、使用步骤1.CSS3 边框2.CSS3 背景总结一、CSS3是什么？对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。最重要CSS3模块如下：选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用户界面二、使用步骤1.CSS3 边框border-radius CSS3 圆角div{border:2px solid;border-radius:25px;}box-sha原创 2020-09-10 17:12:19 · 442 阅读 · 0 评论 -
移动端响应式布局开发的三大方案
移动端响应式布局开发的三大方案一、media二、rem二、flex二、vh/vw总结一、media@media根据视口大小调整不同尺寸二、rem根据字体大小二、flex弹性盒子布局二、vh/vw把视口高度/宽度分成一百分，百分比布局总结good night...原创 2020-09-01 20:12:11 · 591 阅读 · 0 评论 -
掌握盒子水平垂直居中的五大方案
掌握盒子水平垂直居中的五大方案一、第一种？二、第二种？三、第三种？四、第四种？五、第五种？总结一、第一种？使用绝对定位，这种方法需要知道box的高宽html,body { height: 100%; overflow: hidden;}.box { box-sizing: border-box; width: 100px; height: 50px; line-height: 48px; text-align: center; f原创 2020-09-01 19:40:33 · 247 阅读 · 0 评论 -
四种浏览器盒子模型详解
四种盒子模型详解一、盒子模型是什么？二、使用步骤1.W3C盒子模型2.怪异盒模型3.弹性盒子(Flex Box)3.colomn布局盒子总结一、盒子模型是什么？网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。二、使用步骤1.W3C盒子模型标准原创 2020-09-01 11:16:22 · 2403 阅读 · 0 评论 -
前端必须掌握的css知识点大全（全）
前端必须掌握的css知识点大全（全）一、CSS是什么？二、使用步骤1.选择器2.CSS 创建3.CSS 背景4.CSS 文本格式总结一、CSS是什么？层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化二、使用步骤1.选择器标签选择器语法：标签名：{}id选择器语法：#id{}cs原创 2020-08-31 18:15:18 · 1956 阅读 · 0 评论 -
css最好看最全的按钮样式，动画效果大全，纯css样式
css最好看最全的按钮样式，动画效果大全，纯css样式总结html样式代码如下（示例）：<h1>Animation Buttons</h1> <p>Hover us and enjoy the satisfying neumorphic animation designs!</p> <div class="frame"> <button class="custom-btn btn-1">Read Mo原创 2020-08-25 13:37:44 · 8057 阅读 · 2 评论 -
js创建事件监听，点击事件监听中对dom操作，滚动事件监听的坑，自定创建类似element-UI的组件
js创建事件监听，点击事件监听中对dom操作，滚动事件监听的坑，自定创建类似element-UI的组件一、事件监听是什么？二、使用步骤1.click点击事件监听2.根据事件监听去创建类似element-UI的组件3.监听滚动事件的坑总结一、事件监听是什么？W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。语法：element.addEventListener(event, function, useCapture)event : （必需）事件名，支持所有 DOM事件 。fun原创 2020-08-25 11:51:03 · 691 阅读 · 1 评论 -
将html内容转换成word文档下载，纯js操作
将html内容转换成word文档下载，纯js操作一、？二、操作步骤1.html内容2.js内容3.css福利内容总结一、？二、操作步骤1.html内容代码如下（示例）：<div> <div id="source-html" style="750px"> <div style="width: 100%; text-align: center; font-weight: 600; font-siz原创 2020-08-23 15:33:43 · 2447 阅读 · 8 评论 -
如何在vue项目中使用vue-router和vuex实现一个简易的头部导航栏
如何在vue项目中使用vue-router和vuex实现一个简易的头部导航栏一、vue-router是什么？二、使用步骤1.添加vue-router2.创建vuex管理状态3.创建vuex管理状态4.创建common公共组件5.在App.vue文件中组合总结一、vue-router是什么？路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定原创 2020-08-23 12:19:01 · 1602 阅读 · 2 评论 -
在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量
在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量一、less是什么？二、操作步骤1.引入库2.设置style的lang属性3.使用less总结一、less是什么？Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less是一种开源语言，也是跨浏览器兼容的语言。二、操作步骤1.引入库代码如下（示例）：npm install less-loader@4.1.0 --save原创 2020-08-21 14:31:00 · 13349 阅读 · 4 评论 -
樱花飘落，3D效果，抖音热门樱花飘落html
樱花飘落，3D效果，抖音热门樱花飘落html总结代码如下（示例）：<!DOCTYPE html><html> <head> <title>樱花飘落</title> <style type="text/css" media="screen"> /*Sakura animation using WebGL. No images are used. The framerate might be slo原创 2020-08-20 23:13:40 · 7174 阅读 · 4 评论 -
在style标签中，vue项目引入style文件，外部css文件
在style标签中，vue项目引入style文件，外部css文件一、css是什么？二、使用步骤1.使用style标签引入2.在style标签内使用@import导入总结一、css是什么？CSS （层叠样式表）层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的原创 2020-08-20 22:45:11 · 11271 阅读 · 2 评论 -
在前端vue项目引入scss/sass，使用scss/sass，在scss/sass引用外部文件，在scss/sass中使用变量
在前端vue项目引入scss，使用scss，在scss引用外部文件，在scss中使用变量一、Scss是什么？二、操作步骤1.引入库2.设置style的lang属性3.使用scss总结一、Scss是什么？Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。二、操作步骤1.引入库代码如下（示例）：npm install node-sass sass-loader --save-dev完成引入Scss原创 2020-08-19 11:29:56 · 8065 阅读 · 1 评论