千鋒教育-做有情懷、有良心、有品質的職業教育機構

                    領取全套視頻

                    關注千鋒學習站小程序
                    隨時隨地免費學習課程

                    當前位置:首頁  >  關于學院  >  技術干貨  >  正文

                    前端開發技巧-那些不常見但十分有效的小玩意

                    時間:2021-06-10 09:14     來源:千鋒教育 作者:小千
                    分享: 更多

                          同學們在開發功能的時候可能會遇到這樣那樣的問題,但可能手中沒有什么好的解決辦法,那么不妨來看看小千下面介紹的幾個代碼,說不準就有能夠解決你問題的哦。

                          console.table()

                          思考一下平時在開發過程中, 我們的代碼中出現頻率比較高的一段代碼是什么 console.log('xxx'),因為各種各樣的原因, 我們的代碼一旦在瀏覽器運行總是各種 紅色 所以很多小伙伴會選擇在控制臺打印一下看看??纯次冶闅v的是個啥,看看我獲取的元素是個啥,看看我請求回來的東西是個啥,看看我算的數是不是 NaN。

                          但是遇到類似下面這樣的代碼

                    1

                          在控制臺打印出來的可能不是我們想要的

                    2

                          如果只有一兩個屬性, 那么沒啥問題, 我不用打開就能看到結果 但是一旦對象中屬性變得多了, 那么我們展開以后看到的結果就會誤導我的代碼了 這個時候, 我們可以選擇使用 console.table() 來進行控制臺展示

                    3

                          contenteditable

                          我們在頁面上寫的大部分標簽都是不可以編輯的 但是一旦你給元素加上 contenteditable 屬性以后, 就變成可以編輯的了。這個玩意有啥用呢, 也保存不下來, 刷新以后還是和以前一樣 可以幫我們玩一下 css 樣式的問題 我們可以寫一個內聯樣式, 寫在 body 標簽里面。

                    4

                    5

                          calc()

                          我們再寫 css 的時候, 經常會遇到一個小問題 就是我已經寫了寬度 25% 了 然后發現, 你 ** 竟然有 margin 好吧, 我給你加一個 margin: 0 10px。

                    6

                          好吧, 我認命了, 不寫 25% 了, 拉個計算器過來, 我算數還不行嗎 (1)歸零 ... 歸零 ... 歸零 ...

                          我們也可以選擇使用一個 calc()

                          li { width: calc(25% - 20px); }

                          輕松解決問題。

                          還有更多小技巧同學們感興趣的話不妨來千鋒前端交流群一起探討一下,更有全套前端視頻教程可以領取,趕緊來找在線老師了解一下吧。

                    相關文章

                    • 北京總部地址:北京市海淀區寶盛北里西區28號中關村智誠科創大廈4層
                      北京沙河校區:北京市昌平區沙陽路18號北京科技職業技術學院廣場服務樓
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 深圳校區地址:深圳市寶安區寶安大道5010號西部硅谷B座C區1層108
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 上海校區地址:上海市寶山區同濟支路199號智慧七立方3號樓2-4層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 廣州校區地址:廣州市白云區永平街永泰學山塘學山文化創意谷A1棟六樓
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 鄭州二七區校區地址:鄭州市二七區航海中路60號海為科技園C區10層
                      鄭州高新區校區地址:鄭州市高新區金梭路與銀杏路交叉口教育科技產業園南門D座4層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 大連校區地址:遼寧省大連市高新園區愛賢街10號大連設計城A座901
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 武漢金融港校區地址:武漢市東新區光谷大道77號金融港B18棟三、四層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 成都校區地址:成都市高新區肖家河沿街138號肖家河大廈三樓
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 西安校區地址:西安市雁塔區高新六路52號立人科技C座西區4樓
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 杭州旺田校區:浙江省杭州市上城區九堡鎮旺田書畫城A座4層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 青島校區地址:青島市市北區龍城路31號卓越世紀中心4號樓5層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 重慶校區地址:重慶市九龍坡區科園一路3號渝高大廈9樓
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 長沙校區地址:湖南省長沙市岳麓區麓谷企業廣場A2棟三單元306號
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 哈爾濱校區地址:哈爾濱市松北區世澤路689號 科技創新城4號樓405
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 南京校區地址:南京市建鄴區應天大街780號弘輝產業園1棟2層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 太原校區地址:太原市小店區長治路230號能源互聯網大廈6層
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 沈陽校區地址:遼寧省沈陽市渾南區世紀路16號東大軟件園B園B1座A201
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 合肥校區地址:合肥市包河區徽州大道396號東方廣場B座12A
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 貴陽校區地址:貴陽市云巖區延安東路37號物資大廈老樓9樓
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、網絡營銷培訓、好程序員
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 濟南校區地址:濟南市歷下區歷山路36號齊魯師范學院利寶產業大廈3F
                      咨詢電話:400-811-9990
                      面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python人工智能+數據分析培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、網絡安全培訓、區塊鏈培訓、影視剪輯包裝培訓、游戲原畫培訓、全媒體運營培訓
                      認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
                    • 千鋒教育服務號

                      了解千鋒動態
                      關注千鋒教育服務號

                    • 千鋒教育移動站

                      掃一掃快速進入
                      千鋒移動端頁面

                    • 千鋒互聯服務號

                      掃碼匿名提建議
                      直達CEO信箱

                    [an error occurred while processing the directive] 成·人免费午夜在线观看