前端
关注
分享
扫一扫
文章平均质量分 82
翻滚吧阿俊~~
要好好学习总结了！！
展开
-
sublime text 3 文件路径自动提示
preferences”——“package control”install package输入autofilename安装完成即可原创 2018-11-15 16:45:31 · 2873 阅读 · 1 评论 -
css3基础知识点--transform 基点
tranform-origin 设置变形的中心点2d转换的时候主要是rotate(deg) 设置盒子旋转时会考虑到基点，2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。我们尝试改变中心点看2D 旋转的效果<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2019-07-03 14:04:22 · 1893 阅读 · 0 评论 -
sublime Emmet插件使用方法总结
Emmet(前身是Zen Coding)，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发,例如快速生成html5头部就靠它了。。一、安装emmet：下面方法适用于 sublime text 3。1、安装Package ctrl： 使用ctrl + ～ 打开控制台，输入以下代...转载 2019-06-28 11:59:58 · 782 阅读 · 0 评论 -
CSS3基础知识点---新增选择器
一、CSS3新增选择器1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素（2n 和2n-1可设置偶数行和奇数行）2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）3、E:first-child：匹配元素类型为E且是父元素的第一个子元素4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素...原创 2019-06-28 16:51:40 · 5533 阅读 · 0 评论 -
CSS3圆角、阴影、rgba
CSS3圆角设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;同时分别设置四个角： border-radius:30px 60px 120px 150px;设置四个圆角相同：border-radius:50%;CSS3阴影box-shadow：h-shadow v-shadow blur spread color i...转载 2019-06-28 17:18:50 · 147 阅读 · 0 评论 -
css3基础知识点--transform 3D变换坐标系、perspective透视距离
在学习CSS3 3D 变换前我们有必要学习下坐标系，不然各种角度让人觉得很头疼。数学课本中的三维坐标系是右手坐标系，而计算机中的左手坐标系使用较多。1、左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图：2、CSS3中的3D坐标系CSS3中的3D坐标系与上面的左手坐...原创 2019-07-04 14:32:41 · 4225 阅读 · 0 评论 -
css3基础知识点--transform 3D变换
接上一篇5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、translateY、translateZ 设置三维移动8、rotateX、rotateY、rotateZ 设置三维旋转9、scaleX、scaleY、scaleZ 设置三维缩放10、tranform-origi...原创 2019-07-04 14:57:01 · 915 阅读 · 0 评论 -
css3基础知识点--animation动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。CSS3 @keyframes 规则要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。CSS3 动画当在@keyframes创建动画，把它绑定到一...原创 2019-07-04 17:35:11 · 511 阅读 · 0 评论 -
css3基础知识点--单行及多行文字溢出
单行文字溢出显示省略号这种表现在移动端的标题显示经常会用到，多余文字不换行且以点点展示，下面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="te...原创 2019-06-29 17:14:14 · 322 阅读 · 0 评论 -
CSS中碰到的一些坑
目录一、外边距（margin）合并二、margin-top塌陷三、内联元素及内联块元素间隙问题四、清除浮动一、外边距（margin）合并当两个垂直的外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，而不是二者之和。解决方法如下：1、利用这种特性2、只设置一边的外边距，一般只设置margin-top，这样垂直方向只有一个...原创 2019-07-18 14:15:05 · 687 阅读 · 1 评论 -
利用jquery生成行号
页面需要显示行号例如，序号一列数据自动更加行数生成直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss...原创 2019-09-25 13:49:19 · 393 阅读 · 0 评论 -
css3基础知识点--transform 2D转换
transform变换2D转换默认是以中心点为基点，基点是可以改变的。1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切2D 转换方法函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 ...原创 2019-07-02 15:37:53 · 458 阅读 · 1 评论 -
css3基础知识点--过渡效果
CSS3中元素从一种样式转变到另一个的时候，为了使这个过程显得不那么唐突，可以加入一些效果，包括过渡时间、延时时间、过渡的运动方式等，这时就可以用过渡，无需使用flash动画或者JS。这个过渡有动画的效果，但是需要手动去触发，常常跟鼠标事件结合使用。1、transition-property 设置过渡的属性，比如：width height background-color2、transi...原创 2019-07-02 11:45:49 · 350 阅读 · 0 评论 -
sublime3中如何快速生成html头部信息及Tab补全代码问题解决
前提要安装Emmet 插件！xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。此版本文档用sublime text创建方法： html:xt + tab pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab 但是可能会碰到...原创 2018-11-14 16:56:21 · 2435 阅读 · 0 评论 -
sublime text3弹出错误提示error trying to parse settings:expected value in packages\user\xxxx
打开sublime text3 弹出错误提示sublime error trying to parse settings:expected value in packages\user\xxxx出现这个错误的原因一般是配置文件出现语法错误，可根据提示进行修改或者删除。文件目录一般在C:\Users\Administrator\AppData\Roaming\Sublime Tex...原创 2018-11-19 15:26:38 · 14018 阅读 · 1 评论 -
首页banner图下面的点状轮播静态html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 700px; height: 300px; border: 1px s...原创 2019-03-20 17:35:00 · 1038 阅读 · 0 评论 -
图片水平垂直居中的几种方法总结
1、固定图片大小水平垂直居中，图片300*200 如下：html代码 <div class="con"> <img src="images/fengche.png" alt=""> </div>css代码 .con{ width: 40%; height: 300px; margin:50px auto; bo...原创 2019-03-21 15:42:13 · 3749 阅读 · 0 评论 -
移动端高清、多屏适配方案、REM布局
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为...转载 2019-06-18 20:11:28 · 476 阅读 · 0 评论 -
HTM基础知识点详细总结
前端小白自学前端有一段时间了，终于把基础部分看完了，感觉前端确实很琐碎，需要记忆的东西比较多，为了方便自己以后温习查找，把一些重要的知识点详细记录下来，细节部分还是查手册吧。。。目录&&最前面&&一、HTML基础知识点1、html基本结构1.1基本机构1.2 html文档类型1.3 html文档规范1.4 注释2、ht...原创 2019-06-25 13:07:20 · 1375 阅读 · 0 评论 -
CSS基础知识点详细总结（一）
CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。目的是为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。目录1、基本语法及引用方法1.1基本语法1.2三种引用方法2、...原创 2019-06-25 21:39:14 · 2711 阅读 · 0 评论 -
【前端】移动端布局--Viewport视口
简单理解：视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。...原创 2019-06-18 14:51:53 · 617 阅读 · 0 评论 -
【前端】移动端布局--视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的...转载 2019-06-18 14:57:10 · 1332 阅读 · 0 评论 -
CSS基础知识点详细总结（二）
目录1、块元素、内联元素、内联块元素1.1块元素1.2内联元素1.3内联块元素2、浮动2.1 文档流2.2 浮动特性3、定位4、background属性5、CSS权重1、块元素、内联元素、内联块元素元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。1.1块元素块元素，也可以...原创 2019-06-26 16:34:04 · 511 阅读 · 0 评论 -
html select 下拉框刷新页面后保留上一次选择的值
常用场景组合条件查询点击查询/刷新页面，包括input输入框\复选框等在内的组件都可以通过前端设置value="{{id}}"，后台发送的数据包括对应的字段，从而实现刷新后保留上一次的值，提高用户体验，但是发现select不能这么做，它的value值是约定好并传给后台的，后台可以传回来，但无法直接显示。网上搜的资料五花八门，自己用jquery实现了，效果：html代码段...原创 2019-09-25 14:43:37 · 11243 阅读 · 4 评论