mufengs16-优快云博客

原创 Less学习指南

less简介Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。我个人觉得使用less在书写大量的样式代码时显得十分重要，它通过变量、继承、混合、嵌套等语言特性，会极大提高css的书写效率，而且它的代码结构很好地保持了html的文档结构，

2020-12-01 20:34:42 176

原创 CSS3综合实例三（仿天猫专题栏过渡效果）

仿天猫专题栏过渡效果实例需求鼠标移入商品栏时，增加透明度鼠标移入商品栏时，商品主图向左偏移几许，缓缓过渡实例详情<!DOCTYPE html><html> <head> <title>仿天猫专题过渡效果</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width initial-sca

2020-11-16 21:50:08 197

原创 CSS3综合实例二（旧样式，仿天猫商品过渡效果）

旧样式，仿天猫商品过渡效果实例需求商品被包裹在圆形的底环下，为此要制作一个底环当鼠标移入商品栏时，边距凸显红色当鼠标移入商品栏时，图片变得透明几许当鼠标移入商品栏时，商品主图过渡比例扩大，突出底环实例详情<!DOCTYPE html><html> <head> <title>旧样式，仿天猫商品过渡效果</title> <meta charset="utf-8"/> <meta nam

2020-11-16 21:48:23 230

原创 CSS3综合实例一（制作鼠标悬停，画面比例放大的效果）

制作鼠标悬停，画面比例放大的效果实例需求鼠标移入，画面扩大一定比例，移出则回归原态画面扩大的过程要平滑进行实例展示<!DOCTYPE html><html> <head> <title>制作鼠标悬停，画面比例放大的效果</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width init

2020-11-16 21:45:16 375

原创文字特效和文本省略号

text-shadow完成字体特效<!DOCTYPE html><html> <head> <title>字体特效：发光字、阴影字、3D效果</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width initial-scale=1.0"/> <style typ="text/

2020-11-16 21:41:41 116

原创关于opacity的实例应用

关于opacity的实例应用综合应用制作透明背景，凸显文字内容（实例一）天猫商品栏图片鼠标移入透明度减低的效果（实例二）实例一<style type="text/css"> * { margin:0; padding:0; } .autumn { width:440px; height:227px; background:url('./image/autumn.jpg

2020-11-16 21:38:50 177

原创 tarnsition过渡效果

transition过渡效果transition同样亦是一个简写属性transition-property: 属性选项 all指代所有属性，在这也可以只设置width/height，应用于单独某个属性transition-duration:动画持续时间transition-delay:延迟时间transition-timing-function: esae是默认值，即整个过程先慢后快再慢。如果是ease-in,即是先慢后快；ease-out,即是先快后慢；ease-in-out,即是先慢后快再

2020-11-16 21:35:21 234

原创关于渐变

关于渐变线性渐变线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向语法background-image: linear-gradient(direction, color-stop1, color-stop2, ...);径向渐变径向渐变（Radial Gradients）- 由它们的中心定义语法background-image: radial-gradient(shape size at position, start-color, ..., last-co

2020-11-16 21:33:01 241

原创 CSS3动画

CSS3动画制作一个CSS3动画需要2步声明CSS3@keyframes规则@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式利用百分比来规定变化发生的时间，或用关键词from和to,等同于0%和100%0%是动画的开始，100%是动画的结束为了得到浏览器的最佳支持，应该始终定义0%和100%将CSS3@keyframes规则绑定到指定的选择器上，使用animation设定动画属性animation是简写属性animation-name即是动画关键

2020-11-16 21:31:13 155

原创 border-radius画圆以及border绘制图形

border-radius画圆以及border绘制图形1. 利用border-radius绘制圆形类图形border-radius是一个简写属性，它包含4个方向的属性设置border-top-left-radius左上，border-top-right-radius右上border-bottom-left-radius左下border-bottom-right-radius右下另外每个方向上的border-radius值由x/y方向上的半径决定，1个半径值则是正圆弧，2个半径值则是椭圆弧4

2020-11-16 21:29:24 4794

原创伪类选择器和伪元素

伪类选择器和伪元素伪类选择器常用动态伪类选择器 (链接伪类)a:linka:visiteda:hovera:active常用UI状态选择器 (表单伪类)input:enableinput:disabledinput:checked结构伪类选择器使用结构伪类的各种属性选定子元素的方式，减少了类、id选择器的使用常用结构伪类:nth-child():first-child():last-child():only-child()伪元素常用伪元素

2020-11-16 21:25:03 150

原创间接实现行间距的line-height

行间距的实现在css中要通过line-height设置行高间接完成行间距的指定，行高越大，行间距就越大通常在声明字体时，连带上行高，即是font-size/line-height也可用百分数表示行高，如line-height:100%,即是行高=字体大小，文字呈现的是紧密排列，亦可用倍数指定行高，道理亦然...

2020-11-10 12:57:02 159

原创独特的图片垂直居中

独特的图片垂直居中<!DOCTYPE html><html> <head> <title>实现图片的垂直居中</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-sclae=1.0"> <style type="text/css"> *

2020-11-10 12:45:18 150

原创关于元素水平、垂直居中

元素水平、垂直居中的2种方式<!DOCTYPE html><html> <head> <title>使元素水平、垂直居中的2种方式</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-sclae=1.0"> <style type="text/css"&g

2020-11-10 12:41:20 128

原创常用的清除浮动

清除浮动<!DOCTYPE html><html> <head> <title>清除浮动</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-09 19:54:11 195 1

原创 BFC实现简单的2栏布局

BFC实现简单的2栏布局<!DOCTYPE html><html> <head> <title>BFC实现简单的2栏布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css">

2020-11-09 19:51:04 183

原创 BFC解决元素的内、外边距重叠

BFC解决元素的内、外边距重叠<!DOCTYPE html><html> <head> <title>BFC解决元素的内、外边距重叠</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"&

2020-11-09 19:49:32 564

原创粘连布局

粘连布局<!DOCTYPE html><html> <head> <title>移动端的粘连布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-09 19:29:39 257

原创利用绝对定位的方法去模拟固定定位

利用绝对定位的方法去模拟固定定位<!DOCTYPE html><html> <head> <title>利用绝对定位的方法去模拟固定定位</title> <meta charset="urf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css

2020-11-08 20:18:32 440

原创双飞翼布局

双飞翼布局<!DOCTYPE html><html> <head> <title>双飞翼布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 20:16:10 192

原创圣杯布局

圣杯布局<!DOCTYPE html><html> <head> <title>3栏式圣杯布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 20:04:49 173

原创伪等高布局

伪等高布局<!DOCTYPE html><html> <head> <title>伪等高布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 20:03:33 118

原创 float布局

float布局<!DOCTYPE html><html> <head> <title>利用浮动快速布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 20:01:33 79

原创 position布局

position布局<!DOCTYPE html><html> <head> <title>利用定位快速布局</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> *

2020-11-08 20:00:25 84

原创 float的用法

float的用法<!DOCTYPE html><html> <head> <title>浮动的一些用法</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 19:58:06 745

原创定位的用法2

定位的用法2<!DOCTYPE html><html> <head> <title>定位用法2</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 19:54:58 219 1

原创定位用法1

定位的用法1<!DOCTYPE html><html> <head> <title>定位用法1</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {

2020-11-08 19:49:17 206 1

原创我的前端学习规划

前端学习规划核心技能CSS2.0学习CSS3.0学习CSS3新特性盒子模型和常见布局方式Flex布局/Gird布局表单验证音视频的基本操作Canvas动画javaScript核心处理用户表单信息添加复杂动画使用ajax加载远程数据ES5/ES6/ES7/ES8/ES9学习进阶技能UI框架BootstrapCSS预编译语言SASS/LESS响应式布局浏览器兼容性调整SEO基础知识前端开发框架Vue/React/Angular(Vue2.X以及Vue3.

2020-11-06 18:18:02 221

原创原生js登录页面表单验证

原生js登录页面表单验证<!DOCTYPE html><html> <head> <title>登录页面</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="form.css"/> <script type="text/javascript" src="checkform.js"&

2020-10-08 10:07:43 888

原创 QuickEdit-手机端强大的代码编辑器

使用需求在一般的使用场景下，我们都是在电脑端进行代码编辑，电脑端则拥有类似于vscode这样强大的编辑器。而在某些时候，我们避免不了要在手机端查看或编辑代码。放眼整个安卓生态，我只找到QuickEdit这款编辑器。## QuickEdit介绍- 该软件支持多种编程语言。（常见的编程语言几乎都囊括其中）- 该软件可以同时打开多个文件。据我的使用来说，我可以同时打开3个文档。...

2020-09-20 00:42:07 5470 2

原创 APP Store卡片展开效果实例

APP Store卡片展开效果实例项目地址项目代码地址敲码思路B站UP主 CodingStartup起码课该项目是针对手机App Store软件页面卡片展开效果的实现，整个页面的宽度也只有480px。页面制作的主要效果通过jQuery，使用toggleCLass方法实现类的转换，其中页面样式较多的使用到css3中的一些属性。知识锚点root 是css伪类匹配文档的根元素，对于html来说，:root元素表示html根元素。除了优先级更高以外，与html选择器相同。在声明变量

2020-09-19 12:37:00 578

原创浅解relative和absolute

relative和absolute的简介relative即相对定位。是指元素在文档中相对于自身正常位置偏移的值。元素自身预留空间并没有改变。例如： relative和absolute的使用测试运行效果absolute即绝对定位。使用该属性元素会脱离文档流，并不会为元素预留空间。元素通过相对于最近已定位的祖先元素的偏移来改变元素的位置。绝对定位可以设置外边距，不与其他外边距合并。示例1（同上实例，改变css)运行效果此时父元素b

2020-08-25 11:28:00 346

原创 Polo360网站页面制作练习

目录页面效果图HTML源码CSS源码涉猎知识点总结页面效果 HTML源码 <!DOCTYPE html><html> <head> <title>Polo360</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/reset.css..

2020-07-16 23:39:50 818

qq_44087363的博客