檔案路徑
project/
└── src/
└── css/
├── all.scss
├── helpers/
│ └── _variable.scss
└── component/
└── _sidebar.scss
- .src(‘src/css/**/*.scss’) 獲取
all.scss、_variable.scss、_sidebar.scss
- .src(‘src/css//.scss’) 獲取
_variable.scss、_sidebar.scss
- .src(‘src/css/*.scss’) 獲取
all.scss
查詢ajax是否跨網域
- 複製ajax網址
- 使用test-cors.org
- 貼上ajax網址
- XHR start：0 (不支援跨網域)
- XHR start：200 (支援跨網域)
API(Application Programming Interface)
| 名稱 |
說明 |
| Google Maps |
地圖導覽 |
| Heroku |
主機服務 |
| Firebase |
資料庫儲存 |
XSS(Cross-Site Scripting)
- 若有輸入框或動態新增的部分
- 少用
innerHTML語法
- 改用
createElement、appendChild
Google Analytics追蹤
- 登入Google Analytics
- 設定完成到
追蹤資訊再到追蹤程式碼複製代碼，貼到<head>
- 在根目錄建立
config.yml
1
2
3
|
#Google Analytics
google_analytics:
tracking_id:`追蹤程式碼`
|
假圖生產器
滾動效果
- 使用aos
- 下載aos並解壓
- 將
<head>加入<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/>
- 將
<body>加入<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"><script>
- 將
<body>加入<script>AOS.init()<script>
1
2
3
4
5
6
7
8
9
|
<div class="box" data-aos="fade-up"></div> <!--效果名稱-->
data-aos="flip-left"
data-aos-easing="linear" <!--進行曲線-->
data-aos-duration="3000" <!--持續時間1000=1秒-->
data-aos-offset="300" <!--預設120px-->
data-aos-delay="300" <!--延遲時間-->
data-aos-anchor="#example-anchor" <!--預設null-->
data-aos-anchor-placement="center-bottom" <!--當window到元素頂部時-->
data-aos-once="false" <!--動畫不重複-->
|
動態效果
- 使用animate
- 將
<head>加入<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
1
|
<div class="box animated shake"><div>
|
1
2
3
|
$("button").click(funtion(){
$(".box").addClass("shank");
})
|
其他相關