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