實用的前端方面的小技巧

1.超出文本部分省略號代替

text-overflow:ellipsis;

white-space:nowrap;

overflow:hidden;

text-overflow-----屬性只在盒中的內容在水平方向溢出顯示.....

white-space:nowrapl------設定內容不能換行，在左邊溢出

兼容性：

text-overflow ---- ie

-webkit-text-overflow ---- Safari瀏覽器

-o-text-overflow ---- Opera瀏覽器

2.瀏覽器默認光標修改

cursor: url('http://www.runoob.com/static/img/finger.png'), auto; //自定義光標 圖片大小不應過大 width最大值是128px

cursor:pointer //手型

cursor：default //箭頭

3.瀏覽器默認select樣式修改

select {

/*Chrome和Firefox裡面的邊框是不一樣的，所以複寫了一下*/

border: solid 1px #000; /*很關鍵：將默認的select選擇框樣式清除*/

appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在選擇框的最右側中間顯示小箭頭圖片*/ background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

/*為下拉小箭頭留出一點位置，避免被文字覆蓋*/

padding-right: 14px; }

/*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/ select::-ms-expand { display: none; }

select增加onchange事件可以修改樣式

4.全屏背景樣式

.picLUp{

background:url(logo.png) no-repeat;

width:100%;

height:40%;

background-size:cover;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.jpg',sizingMethod='scale');//ie兼容

}

background:url("../img/contact-bg.jpg") 50% 0 repeat-y fixed;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100vh;

text-align: center;

5.css延時動畫

需要 css <link href="animate.css" />

style="visibility: visible;animation-duration: 500ms;animation-delay: 200ms; animation-name: fadeInDown;"

6.css偽類選擇

.mycourses_ul_1 li:last-child{

border-right:solid 1px #d1d1d1;

width:241px;

}

.mycourses_ul_1 li:nth-child(5n){

border-right:solid 1px #d1d1d1;

width:240px;

}

.mycourses_ul_1 li:nth-child(n+6){

border-top:none;

}

7.css計算

width: calc(100% - 80px);

width: calc(100% - 1em);

width: calc(100% / 6);