开发常用代码笔记

简介: 开发常用代码笔记

Vue

使用moment插件对时间进行格式化(全局设置)

  • 下载插件

npm install moment --save

  • 在main.js中引入插件

import moment from ‘moment’

  • 在main.js中定义全局过滤器
Vue.filter('dataFilter',function (dataStr,patten = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(patten)
});
  • 在需要的地方引用


组件之间的应用:


富文本编辑器:

https://www.npmjs.com/package/vue-quill-editor


图片显示器(基于Vue)

https://www.jianshu.com/p/894f9b019831


HTML

行内元素

行内元素主要有:span a i

行内元素特征:

(1)设置宽高无效

(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效

(3)不会自动进行换行

块元素

块状元素主要有div,p、ul、li、ol、dl、dt、dd、nav等

块状元素特征:

(1)能够识别宽高

(2)margin和padding的上下左右均对其有效

(3)可以自动换行

(4)多个块状元素标签写在一起,默认排列方式为从上至下

行内块元素

行内块状元素主要有img input 等

行内块状元素特征:

(1)不自动换行

(2)能够识别宽高

Js

CSS

清除浮动(单 双伪元素清除浮动)

方法一单伪元素
.clx:after { 
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}   
 .clx {
     *zoom: 1;
}
方法二双伪元素
.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}


伪元素(横竖)

横线
ul li:before{
            content: '';
            display: block;
            width: 64px;
            height: 1px;
            background-color: red;
            position: absolute;
            top:1px;
            left:6px;
        }
        竖线
ul li:after{
            content: '';
            display: block;
            width: 1px;
            height: 70px;
            background-color: red;
            position: absolute;
            top:8px;
            left:2px;
        }


关于边框

  • none:没有边框
  • solid:边框为单实线
  • dashed:边框为虚线
  • dotted:边框为点线


设置文字阴影( text-shadow)

text-shadow是规定文本阴影的,第一个值是阴影的水平偏移量,第二个值是阴影的垂直偏移量,第三个值是模糊度,第四个值是阴影的颜色。

h1{
text-shadow: 5px 5px 5px #FF0000;
}


消除鼠标点击按钮或文本框出现蓝色边框

解决鼠标点击按钮出现边框
 button{
   outline:none;
  }


设置鼠标悬停图片上特效

.dianqi-bot>ul>li{
    height: 360px;
    float: left;
    /*超出隐藏*/
    overflow: hidden;
}
.dianqi-bot ul li img{
    transition: all 1s;
}
/*对图片悬浮时图片向右移动*/
.dianqi-bot ul li img:hover{
    transform: translate(5px,0)
}


盒子的圆角

border-radius:10px 20px 30px 40px;   50%正圆


鼠标变成手状

使鼠标模拟手状的属性是:cursor:pointer


精灵图的引入

 background: url(011.png) no-repeat;
 background-position: -166px -69px ;  前者X轴    后者Y轴


关于文字过长超出用省略号

根据div的宽度自动换行 超过三行的部分用省略号代替

word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;


关于表格

width=“表格的宽度”
height= “表格的高度”
border= “表格的边框”
border-color= “表格边框的颜色”
bgcolor= “表格的背景色”
cellspacing= “单元格与单元格之间的距离”
cellpadding= “单元格与内容之间的距离”
align=“left/ center/ right”水平对其方式
valign“top/ middle/ bottom”垂直对齐方式
rowspan=”2“ 跨行合并
colspan=”2“跨列合并


关于定位:

参照物是距离最近有定位的父元素

  • 相对定位:
    position:relative;
  • 绝对定位:(脱离标准文档流)
    position: absolute;


关于伪类

伪类:
:active 向被激活的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:befoe伪元素
:after伪元素


查看电脑ip

查看电脑ip:ipconfig



相关文章
|
1月前
|
数据可视化 IDE 程序员
14 款超赞的代码片段生成工具😍(程序员必备)
在本文中,我将介绍 14 款代码片段图片生成器,每款工具都具备独特功能,能够满足不同需求,帮助你将代码转化为精美、易于分享的视觉内容。
82 13
14 款超赞的代码片段生成工具😍(程序员必备)
|
5月前
|
XML JSON Java
Java开发常用代码总结和分享
Java开发常用代码总结和分享
25 0
|
6月前
|
移动开发 算法 数据可视化
🚀独立开发,做的页面不好看?我总结了一些工具与方法🚀
🚀独立开发,做的页面不好看?我总结了一些工具与方法🚀
|
6月前
奇淫技巧系列第三篇:阅读源码时基于一组快捷键让我们知道身在何方!
奇淫技巧系列第三篇:阅读源码时基于一组快捷键让我们知道身在何方!
|
数据可视化 项目管理 C++
|
6月前
|
前端开发 程序员
前端知识笔记(四十四)———为什么要学代码
前端知识笔记(四十四)———为什么要学代码
61 0
|
6月前
|
移动开发 前端开发 IDE
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
207 0
|
6月前
|
前端开发 容器
前端知识笔记(二十七)———CSS核心功能手册:从熟悉到精通
前端知识笔记(二十七)———CSS核心功能手册:从熟悉到精通
51 0
|
12月前
|
C++
《C++避坑神器·二十》C++智能指针简单使用
《C++避坑神器·二十》C++智能指针简单使用
46 0
|
JavaScript 前端开发 开发工具
Notion做思维导图,用自带的功能就够了!
Notion做思维导图,用自带的功能就够了!
Notion做思维导图,用自带的功能就够了!
下一篇
无影云桌面