一、關於樣式（CSS） 1、Input 1）Input可編輯可下拉 2）Input下拉 3）Input邊線點擊不顯示 input點擊邊框樣式無效 4）提示文字：placeholder="手機號" input修改提示文字顏色 5）input出現背景是黃色 這種點擊框也不會出現黃色了 還有一種就是關閉自 ...
一、關於樣式（CSS）
1、Input
1）Input可編輯可下拉
<div> <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" > <datalist id="itemlist"> <option>item1</option> <option>item2</option> </datalist> </div>
2）Input下拉
<select> <option value="-1" >---請選擇解析度---</option> <option value="0" >320 X 240</option> </select>
3）Input邊線點擊不顯示
input點擊邊框樣式無效
outline: none; /**/
4）提示文字：placeholder="手機號"
input修改提示文字顏色
::-webkit-input-placeholder { /* input提示文字顏色 */ color: #fff; font-size:20px; }
5）input出現背景是黃色
這種點擊框也不會出現黃色了
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
還有一種就是關閉自動填充：autocomplete="off"
2、是否占位：顯示/隱藏
1）display
display:none; /*不占位*/ display: block; /*顯示*/
2）visibility
visibility: hidden; /*占位*/ visibility: visible; /*顯示*/
3、定位
1) 絕對定位：position:absolute
a) 父級不自動增高，解決方法：overflow:auto;
2）相對定位：position: relative;
3）固定定位：position:fixed;
4、Textarea
1）div模擬textarea文本域輕鬆實現高度自適應
.testdisplay { width: 100%; min-height: 200px; max-height: 400px; margin-left: auto; margin-right: auto; outline: 0; font-size: 12px; line-height: 24px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);*/ }
5、手指游標
cursor: pointer; /*手指游標*/
6、文本省略號
1）單行文本省略號
.digital-limit { overflow: hidden; text-overflow: ellipsis; /*顯示...*/ white-space: nowrap; /*文本不換行，這樣超出一行的部分被截取，顯示...*/ }
2）多行文本省略號
.digital-normal { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
7、滾動條修改樣式
::-webkit-scrollbar {/*滾動條整體樣式*/ width: 8px !important; /*高寬分別對應橫豎滾動條的尺寸*/ height: 8px !important; } ::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/ border-radius: 8px !important; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1) !important; background: rgba(0,0,0,.1) !important; } ::-webkit-scrollbar-track {/*滾動條裡面軌道*/ -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0) !important; border-radius: 10px !important; background: rgba(0,0,0,0) !important; }
8、透明度
1）背景與字體透明
opacity：0.5; /* 0-1 的透明度 */
2）背景透明，字體不透明
background: rgba(216, 216, 216, .1.5);
9、img圖片截圖
.historys img{ width: 100%; height: 100%; position: absolute; right: -5px; clip: rect(0 103px 100px 0px); }
通過js在圖片剛剛開始載入的時刻可以獲取其寬度和高度，然後用js決定限製圖片的高度還是寬度。如何在圖片開始載入時獲取大小可以在這裡找到。
Js:
$(function(){ $('.historys img').each(function(){ var $this=$(this); imgReady($this.attr('src'),function(){ if(this.width>this.height){ $this.attr('height','100'); $this.removeAttr('width'); } }); }); });View Code
10.背景圖
1）尺寸等比擴展圖片來填滿元素，即cover值： background-size:cover;
2）尺寸等比縮小圖片來適應元素的尺寸，即contain值：background-size:contain;
3）尺寸以圖片自身大小來填充元素，即auto值： background-size:auto;
4）圖片模糊
使用filter()函數實現模糊背景，使用方法：
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);
| blur(px) |
給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果沒有設定值，則預設是0；這個參數可設置css長度值，但不接受百分比值。 |
5）其他
不平鋪：background-repeat: no-repeat;
橫向平鋪：background-repeat: repeat-x;
縱向平鋪：background-repeat: repeat-y;
固定：background-attachment: fixed;
滾動：background-attachment: scroll;
水平居中：background-position: center;
水平居中並垂直居中：background-position: center center;
二、Js
1.fadeOut：關閉、隱藏
2.slideUp/out//滑動上/下
3.event .target
targe事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或視窗。
1~3的結合示例
$(document).ready(function(){ $(".backdrop,.box").click(function(event){ if (event.target.className == 'backdrop') { $('#backdrop').fadeOut(); //fadeOut：關閉、隱藏 $('#box').slideUp(200); //slideUP:滑動 } }); });
