摘要:允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。
1. box-sizing:允許以特定的方式去定義匹配某個區域的特定元素。
content-box:在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box:(textarea和select默認值)在規定的一個框的寬高之內給這個框加內邊距和邊框。 /*看個人習慣而用,但一般標簽默認屬性是content-box,除textarea,select*/ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;2. 美化input框
/*在IE10+瀏覽器中, 使用css即可隱藏input文本輸入框右側的叉號*/ input[type=text]::-ms-clear,::-ms-reveal{display:none;} input::-ms-clear,::-ms-reveal{display:none;} input{ /*去除點擊出現輪廓顏色*/ outline: none; -webkit-appearance: none; /*去除系統默認的樣式,蘋果手機上的陰影*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*點擊高亮的顏色*/ /*padding已在重置樣式中去除,如果沒有去除,記得有padding哦*/ }3. 美化textarea文本域
textarea{ /*別忘了文本域的box-sizing屬性值是border-box;所有的邊框和padding都是在你固定的寬高的基礎上繪制*/ /*去除點擊出現輪廓顏色*/ outline: none; /*如果有需要,去掉右下角的可拉伸變大小的圖標和功能*/ resize: none; /*padding已在重置樣式中去除,如果沒有去除,記得有padding哦*/ }4. 改變placeholder的字體顏色大小
input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size:14px; color: #333; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color: #333; }5. 美化select
/*清除ie的默認選擇框樣式清除,隱藏下拉箭頭*/ select::-ms-expand { display: none; } select { /*Chrome和Firefox里面的邊框是不一樣的,所以復寫了一下*/ border: solid 1px #333; /*將默認的select選擇框樣式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在選擇框的最右側中間顯示小箭頭圖片*/ background: url("小箭頭圖片路徑") no-repeat right center transparent; /*為下拉小箭頭留出一點位置,避免被文字覆蓋*/ padding-right: 14px; /*去除點擊出現輪廓顏色*/ outline: none; }6. 美化button按鈕
button{ /*本身有2px的邊框,一般的button都不需要邊框*/ border: none; /*本身有的背景色,可以用其他顏色取代*/ background: #333; /*padding已在重置樣式中去除,如果沒有去除,記得有padding哦*/ }7. 美化單選框、多選框或者是上傳文件按鈕
/*因為用input[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式,這個時候要用到label標簽關聯,然后隱藏input標簽,直接給label標簽樣式就好了。選中label就是選中了此標簽*/8. 多出文字用省略號表示
/*單行文字的時候*/ white-space: nowrap; /* 強制不換行 */ overflow:hidden; /*內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ,需與overflow:hidden;一起使用*/ /*多行文字的時候*/ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 2行 */ -webkit-box-orient: vertical;9. 選擇器-選擇非第一個子元素
HTML:10. jQuery限制字符字數的方法方法一: div > span :not(:first-child) { margin-left:10px } 方法二:兄弟元素選擇器 div > span + span { margin-left:10px } HTML:方法: div > * :not(:first-child) { margin-left:10px }
$(document).ready(function(){ //限制字符個數 $(“.zxx_text_overflow”).each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(this).html()+’…’); } }); });11. css頁面點擊文字出現藍色底色去掉方法
-moz-user-select: none; /* 火狐 */ -webkit-user-select: none; /* webkit瀏覽器 */ -ms-user-select: none; /* IE10 */ -khtml-user-select: none; /* 早期瀏覽器 */ user-select: none;12. 在遇見圖標的垂直位置很難調整的時候可以用這個屬性
vertical-align: 30%; vertical-align: middle;13. 如何讓一個div在頁面中上下左右居中
div{ width:400px; height:300px; position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; }14. css中設置table中的td內容自動換行,邊框線合并為一條
1. 把表格的sytle的table-layout: fixed; (就是表格固定寬度,就是表格既要自適應他外面的容器,也不要撐出去) 2. 然后設置td的word-wrap: break-word; 3. table邊框線合并為一條:border-collapse: collapse;15. css讓背景居中并充滿整個屏幕
body{ background: url("../img/jxs-banner.png") no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; }16. H5頁面點擊按鈕的時候,屏幕總會閃動一下
-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是蘋果瀏覽器引擎,tap點擊,highlight背景高亮,color顏色,顏色用數值調節。17. 解決蘋果手機上input輸入框的光標高度變化問題
問題產生的原因:chrome瀏覽器對光標高度的設置原則為,當沒有內容的時候光標的高度=input的line-height的值,當有內容時,光標從input的頂端到文字的底部。 方法1:將line-height的值設置為跟字體大小一致;如果高度達不到,用padding去撐; 方法2:對chrome不設置line-height,它會自動文字居中,對ie進行hack設置line-height的值以保證文字垂直居中;這里要注意一下,如果在reset的樣式文件中有設置line-height等值,請進行line-height的重置,可以用line-height:normal。具體可以看看騰訊好萊塢頁面的搜索框。18. js
// 在js中寫的返回鍵 onclick = "history.go(-1)"; // 強制刷新頁面 window.location.reload(true);19. 判斷用戶使用的是手機還是電腦訪問頁面,并跳轉到相應頁面
20. 判斷用戶使用的是蘋果手機還是安卓
21. cjs實現字數限制,超出部分省略號
// 只顯示20個字 function LimitNum(txt,idName) { var str = txt; str = str.substr(0,20) + "..." ; var id=document.getElementById(idName); id.innerText=str; }22. jq實現點擊更多展開,點擊收起縮回
假設有很多個更多和收起功能需要展示在同一個頁面 // 遍歷所有的更多按鈕 $(".more").each(function(){ $(this).click(function(){ // 當點擊當前的更多按鈕時,找到上N級的,或者是同級,反正是要展開的div切換類去實現展開或收回 $(this).parent().prev().toggleClass("show_more"); // 首先在每個更多按鈕中加一個自定義的屬性status = "true" if($(this).attr("status") == "true"){ // 當第一次點擊當前更多的時候會展開,“更多”的按鈕文本會變成“收起”文本。 $(this).html("收起 ∧"); // 在賦值給status為false $(this).attr("status","false"); }else{ $(this).html("更多 ∨"); $(this).attr("status","true"); } }); });23. jquery 點擊元素以外任意地方隱藏該元素的方法
$(".menu").on("click", function(e){ $("#menuBox").toggle(); $(document).on("click", function(){ $("#menuBox").hide(); }); e.stopPropagation(); }); $("#menuBox").on("click", function(e){ e.stopPropagation(); }); 或 $("body").click(function(e) { if(e.target.id != "btn" && e.target.id != "overlay") if ( $("#overlay").is(":visible") ) { $("#overlay").hide(); } })24. 取到頁面中所有的checkbox怎么做
var doc = document, domList = doc.getElementsByTagName("input"), checkBoxList = [], len = domList.length; while (len--) { if (domList[len].type === "checkbox") { checkBoxList.push(domList[len]); } }25. jquery 如何選取除某個元素外的所有元素
$("div.content *").not(".keep"); // 表示content類的div下除keep類以外的所有元素;另外,注意*表示所有元素26. 一個多處查看更多和收起的實例
27. 點擊按鈕置頂Document
$(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#below").fadeIn(600); } else { $("#below").fadeOut(600); } }); $("#below").click(function(){ $("body,html").animate({scrollTop:0},1000); return false; });28. 禁止蒙層底部頁面跟隨滾動
解決思路:我們要阻止頁面滾動,那么何不將其固定在視窗(即 position: fixed),這樣它就無法滾動了,當蒙層關閉時再釋放。 當然還有一些細節要考慮,將頁面固定視窗后,內容會回頭最頂端,這里我們需要記錄一下,同步 top 值。 示例代碼: let bodyEl = document.body let top = 0 function stopBodyScroll (isFixed) { if (isFixed) { top = window.scrollY bodyEl.style.position = "fixed" bodyEl.style.top = -top + "px" } else { bodyEl.style.position = "" bodyEl.style.top = "" window.scrollTo(0, top) // 回到原先的top } }30. 為什么CheckBox明明是checked="checked"也不顯示選中狀態
請把$("input").attr("checked","true") 換成 $("input").prop("checked","true");31. 點擊復制按鈕復制鏈接
$("#copyBtn").on("click",function(event){ var link = $(event.currentTarget).prev("input"); link.select(); document.execCommand("Copy"); layer.msg("復制成功,快去告訴你的小伙伴吧~"); })32. 自動生成微信二維碼
下載jquery.qrcode.min.js,引入文件 var uri = $("#copyLinkText").attr("data-weixin"); $("#wxCode").qrcode(uri); function toUtf8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; } // 微信二維碼中間加logo圖,給二維碼添加一個自定義的logo,會讓你的二維碼看上去更專業,默認的Jquery.Qrcode是不支持添加自定義Logo的,這里比較簡單的實現方案就是,針對每個二維碼添加一個img標簽,讓img在二維碼區域相對居中顯示即可。 //控制Logo圖標的位置 var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; $("#qrCodeIco").css("margin", margin);33. 分享到微博
$(".share_weibo").on("click",function(){ var weibo_url = "http://service.weibo.com/share/share.php?"; var p = { url: uri += "?f=3", title: desc, /*分享標題(可選)*/ // pic: item.Cover, /*分享圖片的路徑(可選)*/ searchPic: "true" }; var s = []; for (var i in p) { s.push(i + "=" + encodeURIComponent(p[i] || "")); } weibo_url += s.join("&"); window.open(weibo_url); });34. 分享到QQ空間
$(".share_qzone").on("click",function(){ var qzone_url = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?"; var p = { url: uri += "?f=4", showcount: "1", /*是否顯示分享總數,顯示:"1",不顯示:"0" */ desc: desc, /*默認分享理由(可選)*/ summary: "分享注冊送現金紅包啦!快來注冊吧~", /*分享摘要(可選)*/ title: "信誠恒通新用戶注冊", /*分享標題(可選)*/ site: "信誠恒通", /*分享來源 如:騰訊網(可選)*/ // pics: item.Cover, /*分享圖片的路徑(可選)*/ style: "203", width: 98, height: 22 }; var s = []; for (var i in p) { s.push(i + "=" + encodeURIComponent(p[i] || "")); } qzone_url += s.join("&"); window.open(qzone_url); });35. vue設置header頭
Vue.http.headers.common["X-CSRF-TOKEN"] = document.querySelector("meta[name=csrf-token]").getAttribute("content");36. 換行,不換行,字間距 37. 獲取驗證碼及其驗證碼倒計時
JS:
//發送驗證碼函數
function sendsms(e) {
/*發送驗證碼功能*/
countdown(e); //若發送驗證碼成功,則調用倒計時函數
}
//倒計時函數
var time = 60;
function countdown(e) {
if (time == 0) {
//e.setAttribute("disabled",false); 對沒有disbaled屬性的span標簽,此方法無效
e.setAttribute("onclick", "sendsms(this)");
$(".send-code").html("獲取驗證碼");
time = 60;
} else {
//e.attr("disabled",true); 對沒有disbaled屬性的span標簽,此方法也無效
//e.setAttribute("onclick", ""); 這樣寫也可以
e.removeAttribute("onclick");
$(".send-code").html(time + "秒后重新獲得");
time--;
setTimeout(function () {
countdown(e)
}, 1000)
}
}
HTML:
獲取驗證碼
38. 單頁面和多頁面應用
39. vue怎么實現點擊li,li增加一個class,其他的li去掉這個class
41. css設置滾動條樣式
.test-1::-webkit-scrollbar {/*滾動條整體樣式*/ width: 10px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } .test-1::-webkit-scrollbar-track {/*滾動條里面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51067.html
摘要:允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing:允許以特定的方式去定義匹配某個區域的特定元素。 content-box:在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box:(textarea和select默認值)在規定的一個框的寬高之內給這...
摘要:允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing:允許以特定的方式去定義匹配某個區域的特定元素。 content-box:在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box:(textarea和select默認值)在規定的一個框的寬高之內給這...
摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...
閱讀 1394·2021-11-08 13:14
閱讀 746·2021-09-23 11:31
閱讀 1038·2021-07-29 13:48
閱讀 2780·2019-08-29 12:29
閱讀 3370·2019-08-29 11:24
閱讀 1899·2019-08-26 12:02
閱讀 3688·2019-08-26 10:34
閱讀 3435·2019-08-23 17:07