- 博客(33)
- 收藏
- 关注
RSS订阅原创 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
146
原创 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
151
原创 CSS3综合实例二 （旧样式，仿天猫商品过渡效果）
旧样式，仿天猫商品过渡效果实例需求商品被包裹在圆形的底环下，为此要制作一个底环当鼠标移入商品栏时，边距凸显红色当鼠标移入商品栏时，图片变得透明几许当鼠标移入商品栏时，商品主图过渡比例扩大，突出底环实例详情<!DOCTYPE html><html> <head> <title>旧样式，仿天猫商品过渡效果</title> <meta charset="utf-8"/> <meta nam
2020-11-16 21:48:23
201
原创 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
340
原创 文字特效和文本省略号
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
74
原创 关于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
143
原创 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
200
原创 关于渐变
关于渐变线性渐变线性渐变（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
205
原创 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
110
原创 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
4652
原创 伪类选择器和伪元素
伪类选择器和伪元素伪类选择器常用动态伪类选择器 (链接伪类)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
99
原创 间接实现行间距的line-height
行间距的实现在css中要通过line-height设置行高间接完成行间距的指定，行高越大，行间距就越大通常在声明字体时，连带上行高，即是font-size/line-height也可用百分数表示行高，如line-height:100%,即是行高=字体大小，文字呈现的是紧密排列，亦可用倍数指定行高，道理亦然...
2020-11-10 12:57:02
128
原创 独特的图片垂直居中
独特的图片垂直居中<!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
123
原创 关于元素水平、垂直居中
元素水平、垂直居中的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
104
原创 常用的清除浮动
清除浮动<!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
164
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
134
原创 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
501
原创 粘连布局
粘连布局<!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
222
原创 利用绝对定位的方法去模拟固定定位
利用绝对定位的方法去模拟固定定位<!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
404
原创 双飞翼布局
双飞翼布局<!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
161
原创 圣杯布局
圣杯布局<!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
123
原创 伪等高布局
伪等高布局<!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
99
原创 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
47
原创 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
57
原创 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
709
原创 定位的用法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
161
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
140
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
187
原创 原生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
837
原创 QuickEdit-手机端强大的代码编辑器
使用需求在一般的使用场景下，我们都是在电脑端进行代码编辑，电脑端则拥有类似于vscode这样强大的编辑器。而在某些时候，我们避免不了要在手机端查看或编辑代码。放眼整个安卓生态，我只找到QuickEdit这款编辑器。## QuickEdit介绍- 该软件支持多种编程语言。（常见的编程语言几乎都囊括其中）- 该软件可以同时打开多个文件。据我的使用来说，我可以同时打开3个文档。...
2020-09-20 00:42:07
4942
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
531
原创 浅解relative和absolute
relative和absolute的简介relative即相对定位。是指元素在文档中相对于自身正常位置偏移的值。元素自身预留空间并没有改变。例如： relative和absolute的使用 测试 运行效果absolute即绝对定位。使用该属性元素会脱离文档流，并不会为元素预留空间。元素通过相对于最近已定位的祖先元素的偏移来改变元素的位置。绝对定位可以设置外边距，不与其他外边距合并。示例1（同上实例，改变css)运行效果此时父元素b
2020-08-25 11:28:00
317
原创 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
688
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人