Vue

使用moment插件對(duì)時(shí)間進(jìn)行格式化（全局設(shè)置）

• 下載插件

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) });

• 在需要的地方引用

組件之間的應(yīng)用：

富文本編輯器：

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

圖片顯示器（基于Vue）

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

HTML

行內(nèi)元素

行內(nèi)元素主要有：span a i
行內(nèi)元素特征：
(1)設(shè)置寬高無效
(2)對(duì)margin僅設(shè)置左右方向有效，上下無效；padding設(shè)置上下左右都有效
(3)不會(huì)自動(dòng)進(jìn)行換行

塊元素

塊狀元素主要有div，p、ul、li、ol、dl、dt、dd、nav等
塊狀元素特征：
(1)能夠識(shí)別寬高
(2)margin和padding的上下左右均對(duì)其有效
(3)可以自動(dòng)換行
(4)多個(gè)塊狀元素標(biāo)簽寫在一起，默認(rèn)排列方式為從上至下

行內(nèi)塊元素

行內(nèi)塊狀元素主要有img input 等
行內(nèi)塊狀元素特征：
(1)不自動(dòng)換行
(2)能夠識(shí)別寬高

Js

CSS

清除浮動(dòng)（單 雙偽元素清除浮動(dòng)）

方法一單偽元素 .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;}

關(guān)于邊框

• none：沒有邊框
• solid：邊框?yàn)閱螌?shí)線
• dashed：邊框?yàn)樘摼€
• dotted：邊框?yàn)辄c(diǎn)線

設(shè)置文字陰影（ text-shadow）

text-shadow是規(guī)定文本陰影的，第一個(gè)值是陰影的水平偏移量，第二個(gè)值是陰影的垂直偏移量，第三個(gè)值是模糊度，第四個(gè)值是陰影的顏色。

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

消除鼠標(biāo)點(diǎn)擊按鈕或文本框出現(xiàn)藍(lán)色邊框

解決鼠標(biāo)點(diǎn)擊按鈕出現(xiàn)邊框button{outline:none;}

設(shè)置鼠標(biāo)懸停圖片上特效

.dianqi-bot>ul>li{height: 360px;float: left;/*超出隱藏*/overflow: hidden; } .dianqi-bot ul li img{transition: all 1s; } /*對(duì)圖片懸浮時(shí)圖片向右移動(dòng)*/ .dianqi-bot ul li img:hover{transform: translate(5px,0) }

盒子的圓角

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

鼠標(biāo)變成手狀

使鼠標(biāo)模擬手狀的屬性是：cursor:pointer

精靈圖的引入

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

關(guān)于文字過長超出用省略號(hào)

根據(jù)div的寬度自動(dòng)換行 超過三行的部分用省略號(hào)代替

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

關(guān)于表格

width=“表格的寬度” height= “表格的高度” border= “表格的邊框” border-color= “表格邊框的顏色” bgcolor= “表格的背景色” cellspacing= “單元格與單元格之間的距離” cellpadding= “單元格與內(nèi)容之間的距離” align=“l(fā)eft/ center/ right”水平對(duì)其方式 valign“top/ middle/ bottom”垂直對(duì)齊方式 rowspan=”2“ 跨行合并 colspan=”2“跨列合并

關(guān)于定位：

參照物是距離最近有定位的父元素

• 相對(duì)定位：
  position:relative;
• 絕對(duì)定位：（脫離標(biāo)準(zhǔn)文檔流）
  position: absolute;

關(guān)于偽類

偽類： :active 向被激活的元素添加樣式。 :hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。 :link 向未被訪問的鏈接添加樣式。 :visited 向已被訪問的鏈接添加樣式。 :befoe偽元素 :after偽元素

查看電腦ip

查看電腦ip：ipconfig

總結(jié)

以上是生活随笔為你收集整理的开发常用代码笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。