【資源總結】前端資源收集

原創 向着光芒的女孩(littleAnn) 2020-06-07 07:57

前端摸索過程插件學習與解決方法記錄下來：

一：前端資源

1.軟實力

1.1：開發人員的必備技能
http://blog.csdn.net/powertoolsteam/article/details/71514615

1.2：掌握這個套路，80%的問題你都能靠自己解決
http://blog.csdn.net/powertoolsteam/article/details/71514615

1.3：關於如何成爲一名優秀的程序員
http://blog.csdn.net/u010004317/article/details/46594509

1.4：前端資訊
1.4.1 前端開發日報
http://caibaojian.com/c/news

2.滾動條：
2.1：iscroll

（2018年12月14日發現打不開了,但git能用，不過demo裏寫了要設置body的overflow:hidden，而且頁面要css寫入）

/*滾動條插件 Start*/
#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

#scroller ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}

#scroller li {
	padding: 0 10px;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	background-color: #fafafa;
	font-size: 14px;
}

網址：http://iscrolljs.com/ （新域名）
http://cubiq.org/iscroll-5（舊域名）
下載：https://github.com/cubiq/iscroll/

這裏寫圖片描述

2.2:jQuery custom scrollbar malihu

頁面要引入css文件

演示網址：http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html

教程：http://manos.malihu.gr/jquery-custom-content-scroller/

在這裏插入圖片描述

移動端可能不兼容，而且如果css寫的是min-height去控制高度時，不生效，這個需要特別注意，我當時看的例子引用的是 1.11.0 可以，但是我項目是3.1.1,不兼容蘋果手機，研究了很久，也沒有出結果來，但安卓的微信掃出來的兼容滾動條

在這裏插入圖片描述
2.3 Nicescroll jQuery Plugin

官網：https://nicescroll.areaaperta.com/how-to-use/
參考：https://www.cnblogs.com/jinqi79731/p/nicescroll.html

親自測試了 蘋果4s(9.3.5版本)，蘋果6，蘋果8，谷歌（70.0.3538.110版本），火狐（64.0.2版本）都可以用,由於用上面寫的malihu scroll配合項目的jquery3.1.1版本不兼容蘋果手機，也不兼容華爲自帶的瀏覽器，研究了很久也沒有結果，所以嘗試新的滾動條插件。

用起來也很簡單，和很方便修改滾動條的顏色，而且寫得時vh的單位，calc去計算的，也兼容的，所以特別滿意。
在這裏插入圖片描述

3.輪播：
3.1：bootstrap
網址：http://v3.bootcss.com/javascript/#carousel
下載：http://v3.bootcss.com/getting-started/#download

這裏寫圖片描述

3.2：superslide
網址：http://www.superslide2.com/demo.html
下載：http://www.superslide2.com/downLoad.html

這裏寫圖片描述

3.3：swiper
網址：http://www.swiper.com.cn
下載：http://www.swiper.com.cn/download/index.html

這裏寫圖片描述

3.4：fullPage.js
網址：http://www.dowebok.com/demo/2014/77/
下載：http://www.dowebok.com/77.html

這裏寫圖片描述

3.5 Vue-Awesome-Swiper
https://surmon-china.github.io/vue-awesome-swiper/

在這裏插入圖片描述

4.彈出層
網址：http://layer.layui.com/
下載：http://res.layui.com/download/layer-v3.0.3.zip

這裏寫圖片描述

5.日期控件

5.1：bootstrap日期控件

http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

這裏寫圖片描述

5.2：My97日期控件
http://www.my97.net/dp/demo/index.htm

這裏寫圖片描述

My97控件換皮膚
http://www.my97.net/dp/skin.asp

這裏寫圖片描述

5.3 daterangepicker
http://www.daterangepicker.com/

在這裏插入圖片描述

有例子，而且在最底部還可以自動生成代碼

在這裏插入圖片描述

6.後臺模板
6.1：Metis
網址：https://colorlib.com/polygon/metis/index.html

這裏寫圖片描述

6.2：Metronic
網址：http://keenthemes.com/preview/metronic/

這裏寫圖片描述

6.3：ace
網址：http://ace.jeka.by/

這裏寫圖片描述

(1)ace日期控件排版，包括輸入框組
http://ace.jeka.by/form-elements.html

這裏寫圖片描述

6.4 Minovate基於angular的後臺模板
http://www.aliyue.net/1245.html
http://tattek.sk/minovate/
https://themeforest.net/item/minovate-angular-admin-dashboard/10068009

這裏寫圖片描述

6.5 vue admin
http://www.yyyweb.com/4763.html
https://admin.vuebulma.com/#/

這裏寫圖片描述

6.6 ant-design-pro
官網：https://pro.ant.design/index-cn
介紹：https://www.awesomes.cn/repo/ant-design/ant-design-pro

在這裏插入圖片描述

6.7 vue-element-admin
https://github.com/PanJiaChen/vue-element-admin

在這裏插入圖片描述

7.會移動的字
網址：http://www.cnblogs.com/yoyebina/archive/2006/11/22/569178.html

8.CSS3動畫庫animate.css
網址：http://www.dowebok.com/98.html
下載：http://pan.baidu.com/s/1ntFjwAt

9.css
9.1：bootstrap中文網
https://v3.bootcss.com/
csdn:https://www.bootcdn.cn/twitter-bootstrap/
這裏寫圖片描述

9.2：w3school關於css教程
http://www.w3school.com.cn/css/

9.3：css佈局
http://zh.learnlayout.com/toc.html

9.4：css3實現switch開關效果
http://www.cnblogs.com/czzaiba/p/5821831.html

9.5：前端UI插件 element
也支持angular和react

http://element.eleme.io/#/zh-CN

在這裏插入圖片描述

10.js
10.1：jQuery中文網

http://www.jquery123.com/

這裏寫圖片描述

10.2：jQuery判斷checkbox是否選中的3種方法
http://www.jb51.net/article/53599.htm

親測能成功的例子：


	if($('#checkbox-id').is(':checked')) {
	    // do something
	}

10.3：js清空輸入框的內容
http://bbs.csdn.net/topics/392013915?page=1

10.4：jquery觸發某一事件
http://www.jquery123.com/trigger/

10.5 jQuery-validate驗證表單插件
http://www.jq22.com/jquery-info3350
在這裏插入圖片描述

10.6:怎麼用js動態 設置select中的某個值爲選中值

(1)https://zhidao.baidu.com/question/553216894.html
這裏寫圖片描述

(2)http://blog.csdn.net/woaifen3344/article/details/56018640

這裏寫圖片描述

(3)關於js遍歷list集合，獲取select選中的值以及動態添加option

http://blog.csdn.net/sfyflying/article/details/9983891

這裏寫圖片描述

10.7：選定某個iframe操作
http://www.cnblogs.com/520playboy/p/5405293.html

10.8:Ajax
10.8.1:ajax本地跨域問題 Cross origin requests are only supported for HTTP**
http://blog.csdn.net/rywaqpf/article/details/44836965
10.8.2:ajax 載入html後不能執行其中的js解決方法
http://www.cnblogs.com/zjhblogs/p/5508666.html

10.8.3 jquery的ajax超時設置
(1) http://www.cnblogs.com/charling/p/3356216.html

(2) http://www.cnblogs.com/lvdabao/p/3383240.html

(3) http://www.jb51.net/article/89125.htm

10.9 JavaScript | MDN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

10.10 localStorage
10.10.1 localstorage使用總結（簡單明瞭）
http://www.cnblogs.com/st-leslie/p/5617130.html

10.10.2 w3school Web 存儲
http://www.w3school.com.cn/html5/html_5_webstorage.asp

10.11 過濾插件
10.11.1 Filterizr
官網：https://yiotis.net/filterizr/
github:https://github.com/giotiskl/filterizr

在這裏插入圖片描述

11.技術工具

  1. gulp
    gulp簡單又實用的教程：http://www.ydcss.com/archives/18#lesson1
    gulp 插件網：https://gulpjs.com/plugins/
    在這裏插入圖片描述
  2. npm
    2.1 colors
    github:https://github.com/littleAnn/colors.js
    可將終端打印出來log的改變顏色，npm 安裝如下：
    npm install colors --save-dev

在這裏插入圖片描述
我自己實例用：
在這裏插入圖片描述

使用方法：

var colors = require('colors');

console.log('hello'.green); // outputs green text
console.log('i like cake and pies'.underline.red) // outputs red underlined text
console.log('inverse the color'.inverse); // inverses the color
console.log('OMG Rainbows!'.rainbow); // rainbow
console.log('Run the trap'.trap); // Drops the bass

//實例
gulp.task('default', ['release'],function(){
    console.log("\n********** "+"√ ok，完成打包!".green+" **********\n");
});

3.查看分辨率網站
http://cn.screenresolution.org/

在這裏插入圖片描述
4.查看瀏覽器兼容性 can i use
https://caniuse.com/
在這裏插入圖片描述

11.織夢學習
11.1：織夢視屏教程：
http://help.dedecms.com/video/quickstart/

11.2：詳細文字教程（在線）：
http://help.dedecms.com/video/quickstart/QuickStart.swf

11.3：詳細文字教程（離線）：
http://help.dedecms.com/video/quickstart/QuickStart.pdf

12.資深前輩
12.1：大漠窮秋
https://my.oschina.net/mumu/home

13.前端工具
13.1：git
https://git-scm.com/download
b:angular教程
https://xdsnet.gitbooks.io/angular-phonecat-book-zhcn/content/index.html

http://www.ituring.com.cn/article/13471
13.2 Notepad++中如何設置自動換行以及行寬
http://jingyan.baidu.com/article/6c67b1d68eddbc2787bb1e8c.html

13.3 nodejs安裝教程
http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

13.4 visual studio code教程：基礎使用和自定義設置
http://jingyan.baidu.com/article/2f9b480d890faa41cb6cc208.html

14.數據庫
14.1：視圖：
http://www.w3school.com.cn/sql/sql_view.asp

14.2：先安裝vs2013再安裝sqlserver 2008裝不上的原因：
https://zhidao.baidu.com/question/2266198842327953708.html
（20170518電腦已經按照了vs2013了，再安裝的sqlserver，後來還是成功了，參考下面教程，但這個也暫時記錄在這邊）

14.3：安裝SQL server 提示重新啓動計算機失敗怎麼解決？

https://jingyan.baidu.com/article/a24b33cd52a0b919fe002bae.html
（20170518重啓失敗後，刪除很多註冊表後，重啓電腦後按照sql server時就沒提示重啓計算機失敗）

14.4：sql server 2008 r2安裝詳解
https://jingyan.baidu.com/article/ae97a64696408abbfd461df8.html
(20170518安裝把實例安裝在D盤失敗，後來重新再安裝一次，就放安裝路徑和實例都放C盤的，安裝成功)

14.4: sql server 2008 首次登錄sa失敗
（用戶’sa’登錄失敗（錯誤18456）圖文解決方法 已成功與服務器建立連接，但是在登錄過程中發生錯誤。）
http://blog.csdn.net/jufeng9318/article/details/8203780

14.5 SQL server 2008數據庫的備份與還原
http://www.cnblogs.com/zgqys1980/archive/2012/07/04/2576382.html

14.6 SQL中distinct的用法
http://www.cnblogs.com/start-from-scratch/p/5635608.html

14.7 怎麼將sqlserver的數據導出到excel中
https://jingyan.baidu.com/article/3065b3b68f2ab7becef8a449.html

14.8 sql排序語句(降序desc,升序asc)
http://www.w3school.com.cn/sql/sql_orderby.asp

14.9 left join
http://www.w3school.com.cn/sql/sql_join_left.asp

14.10 SQL SERVER 裏怎麼查看創建表的代碼
https://zhidao.baidu.com/question/28630827.html

15.工具：
15.1 VS
15.1.1 如何在VS2013中顯示代碼行號
http://jingyan.baidu.com/article/af9f5a2d2e193543140a4533.html

15.2 VS2013自帶的Browser Link功能引發瀏覽localhost網站時不停的輪詢（請求時間比較長）
http://www.cnblogs.com/wgx0428/p/3969397.html

15.3 vs關於“當前不會命中斷點 還沒有爲該文檔加載任何符號”的解決方法
http://blog.csdn.net/shizhen_2012/article/details/52768038
http://blog.csdn.net/zztoll/article/details/6688949

16.性能
16.1 加速網頁響應時間的簡單而有效的5種方法小結
http://www.jb51.net/yunying/26183.html

二.瀏覽器
1：解決Chrome一直提示“adobe flash player 因過期而遭阻止”
網址：https://www.zhihu.com/question/32223811

2：如何利用chrome瀏覽器查看網站的響應速度
http://jingyan.baidu.com/article/47a29f245ef07fc014239981.html

3:谷歌瀏覽器快捷鍵大全
http://jingyan.baidu.com/article/359911f516583d57fe0306ae.html

三.計算機
1:常見的運行命令
http://jingyan.baidu.com/article/f54ae2fcffc09f1e92b849a8.html

這裏寫圖片描述

2.WIN7如何設置讓電腦不自動休眠和關閉屏幕

https://jingyan.baidu.com/article/2a138328b7a0ec074a134f20.html

3.電腦管家勒索病毒免疫工具
http://guanjia.qq.com/wannacry/

4.IIS啓用目錄瀏覽：
http://jingyan.baidu.com/article/e4d08ffd8f6f0d0fd2f60db8.html

5.win7打開或關閉Windows功能在哪
http://jingyan.baidu.com/article/154b46315738b628ca8f41fb.html

6.怎麼查看win10電腦的顯卡
http://jingyan.baidu.com/album/363872ec358a206e4aa16f10.html?picindex=4

三.辦公軟件學習：
1：office簡單入門視頻：
網址：http://www.wordlm.com/shipin/office2010.html

2：word:
2.1： Word2007怎樣從任意頁開始設置頁碼
網址：https://jingyan.baidu.com/article/90895e0f97c97b64ec6b0bd0.html

2.2：word爲什麼第二節生成頁碼第一節也會自動生成頁碼
網址：https://zhidao.baidu.com/question/550174702.html

2.3：打開office2010 安裝程序正在準備必要的文件 解決方法
網址：http://blog.sina.com.cn/s/blog_4acc70c20102w5mb.html

四：輔助資源

1：有道詞典
http://dict.youdao.com/

2：網頁版微信
https://wx2.qq.com/

3：百度網盤
http://pan.baidu.com/

4：有道筆記
http://note.youdao.com/

五：常用快捷鍵
1.wins
(1)windows自帶的截圖

Win+Shift+S

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

sorted 在python2和3中的區別

文章目錄sorted 在python2和3中的區別 sorted 在python2和3中的區別 python3中取消了cmp參數 python3中的使用方法如下: from functools import cmp_to_key

冯斯特罗 2020-07-08 12:31:35

monggoDB學習筆記

1、mongo是什麼 關鍵詞：分佈式、可擴展、介於關係與非關係數據庫之間、文檔存儲、JSON格式存儲（可對字段建索引，實現關係數據庫的某些功能）、默認監聽端口27017 MongoDB是一個基於分佈式文件存儲的開源數據庫系統。由C++語言

MK_夕阳 2020-07-08 12:27:44

Shell編程入門（二）

多練習纔會記得牢 這裏的題目來自於（個別刪選） 知乎：shell編程 如果當前用戶是管理員，則使用yum 安裝 vsftpd,如果不是,則提示您非管理員，不可安裝 提示用戶輸入用戶名和密碼,腳本自動創建相應的賬戶及配置密碼。

存在即合理_ 2020-07-08 11:22:52

在使用Django出現的疑難雜症

不知道會被笑的點 讀法 Django的讀法是 [ˈdʒæŋɡo] 中文發音是 迪亞戈 重點是D 是輕輔音，讀出來的時候有點像是不發音。 版本問題 Python3.0在 2020年是不支持 Django 3.0.4版本的。Djan

存在即合理_ 2020-07-08 11:22:52

運維入門（一）

專業名詞 出包：項目在執行機上運行，打包出結果，再由運維工程師轉交給開發工程師的一項活動。 門禁：門禁指的是CICD的門禁，是指必要的時候進行一系列測試，以保證代碼的質量和其功能是否實現。一般由CI集成工具完成搭建與配置。門禁設

存在即合理_ 2020-07-08 11:22:52

Shell編程入門（三）

簡單的Shell 命令 ll /usr/bin/java ll命令顯示詳細信息，如果java是一個目錄，顯示目錄中文件的詳細信息，如果java是一個軟連接，顯示軟連接的指向 ll ‘which java’ 顯示命令的詳細信息

存在即合理_ 2020-07-08 11:22:52

Android M 新特性

六大特性： App Permission （軟件權限管理）安裝時候不會提醒權限，而是在使用時候由程序請求權限；用戶也可以在設置中對應用進行相關權限控制Chrome Custom Tags (網頁體驗提升) 登陸網站存儲密碼，自動補全資料

Jay白色风车 2020-07-08 10:03:22

學習筆記----伸展樹

最近在看伸展樹，看到了一個不錯的文章，轉載一下便於以後學習 轉載地址：http://dongxicheng.org/structure/splay-tree/ 1、 概述 二叉查找樹（Binary Search Tree，也叫二

画船听雨 2020-07-08 09:04:26

mini2440開發板學習裸機開發——day1 裸機運行LED燈程序

開發背景：系統：ubuntu18.04系統 開發板:mini2440 串口連接工具 J-link連接工具 工具：secureCRT J-link 本次學習基於韋東山老師的嵌入式linux應用開發手冊書，結合友善之臂給出的官方資料以

yantu 12 2020-07-08 08:59:17

java入門程序100例學習筆記（005遞歸調用）

問題：兩年期整存零取，每月1000元，年利率1.17，問應存多少錢 思路：使用遞歸調用 實現： 問題：局部變量的問題，變量的定義應該放在哪裏 總結：遞歸要掌握好 代碼下載鏈接：http://download.csdn.net/detai

swll 2020-07-08 06:59:06

pandas數據分析讀書筆記（五）

plt.xlabel()，畫x軸標題 Plt.ylabel()，畫y軸標題 Plt.savefig(‘figpath.png’)，把圖片保存爲文件   S = pd.Series(np.random.randn(10).cumsum())

__LeeKuanYew 2020-07-08 06:46:51

Spring+SpringMVC+Mybatis項目中pom.xml模板

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaL

user_q 2020-07-08 06:30:02

Redis在Windows系統下安裝成服務

我們知道Redis沒有Windows系統的安裝版。Windows系統下使用Redis，每次都要打開他的redis-server.exe，並保持cmd窗口不關閉，才能正常使用。要是一不小心關掉cmd窗口，那Redis服務也關閉了。 其實Re

user_q 2020-07-08 06:30:02

小程序數據請求注意事項

本文僅作爲個人學習經驗總結，如有理解有誤的地方，歡迎在評論區指出，謝謝！1.小程序的請求格式官方文檔中有明確的說明，不懂得可以看官方文檔，微信小程序開發文檔2.微信只支持https的請求方式3.文檔中要求， 客戶端的 HTTPS TLS

十三画13 2020-07-08 04:25:07

js原生事件封裝

自己寫的js事件的一些封裝，僅做學習筆記使用 第一部分 event 添加事件，刪除事件，以及冒泡的屏蔽，並都做了兼容性的處理<span style="font-size:24px;">var event = { //添加句柄 添

十三画13 2020-07-08 04:25:07