分類彙整:Uncategorized

邊界無縫接軌導覽頁

問題

在CSS中,margin就算設 0 仍然與網頁邊界存在空隙

margin-min

原因

html/body預設有margin

解法

在css中預設

html,body{ margin: 0px; }

應用

導覽列製作

<ul class="nav">
 <li class="button">課程簡介</li>
 <li class="button">課程評價</li>
 <li class="button">問題討論</li>
 <li class="button">作業成果</li>
</ul>
.button{
  display: inline-block;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  letter-spacing: 2px;
  margin-right:30px;
  background-color: #72D6AC;
  color: white;
  font-family: 微軟正黑體;
  font-weight:bold;
  border-bottom:solid 5px #CCF2BF;
}
.nav{
  background-color:#72D6AC;
  width: 100%;
  height: 65px;
  margin: 0px;
}
html,body{
  height: 100%;
  width: 100%;
  margin: 0px;
}

HTML&CSS

HTML/CSS tag Meaning
id #
class .
target=”_blank” 彈出新視窗<a内部屬性>
内部超連結 用id,<ahref=”idtext”>
z-index:1 最下方
span class
div id
overflow-y=auto 有滾輪
overflow-x=hidden 無滾輪
float/clear
1rem 16px
1em 20px
display: flex 子項目平行
flex-wrap: wrap 不超出視窗大小
justify content:center 子項目置中
<hr> 底線,水平線
<span> 不換行
border: 樣式 粗細 顏色 框線
* CSS 選擇全部的元素

sublime快速鍵

sublime快速鍵
Ctrl+Click 同時編輯
選取+Ctrl+D 同時選取下一個相同的字
選取一坨+TAB 整陀往右跳
選取一坨+Ctrl+[ 整陀往左跳
Ctrl+L 選取一行程式碼
選取+Ctrl+/ 變成註解
Shift+↓ 往下選取
打標籤字+TAB 自動生出完整標籤
div.static + tab鍵 <div class=”static”></div>
Ctrl + F
再按Ctrl + G
搜尋目標字,找到後再找下一個
Ctrl + F
再按Ctrl + Shift + G
搜尋目標字,找到後再找上一個

快速鍵

F功能鍵
F1 顯示説明
F2 為選取的項目重新命名
F3 搜尋檔案或資料夾
F4 顯示 [Windows 檔案總管] 中的網址列清單
F5 重新整理使用中的視窗
F6 將螢幕項目循環顯示在視窗中或桌面上
F10 啓動使用中程式的功能表列
Ctrl鍵
Ctrl+A 選取文件或視窗中的所有項目
Ctrl+C 複製選取的項目
Ctrl+Insert 複製選取的項目
Ctrl+X 剪下選取的項目
Ctrl+V 貼上選取的項目
Shift+Insert 貼上選取的項目
Ctrl+Z 復原動作
Ctrl+Y 重做動作
Ctrl+向右鍵 將游標移至下一字組的字首
Ctrl+向左鍵 將游標移至前一字組的字首
Ctrl+向下鍵 將游標移至下一段落的開頭
Ctrl+向上鍵 將游標移至前一段落的開頭
Ctrl+Shift及方向鍵 選取文字區塊
Ctrl及任一方向鍵+空格鍵 選取視窗或桌面上多個個別項目
Ctrl+F4 關閉正在使用的文件 (該程式允許你同時開啓多份文件)
Ctrl+滑鼠滾輪 變更桌面上圖示的大小
Ctrl+D 刪除選取的項目,並將它移至 [資源回收筒]
Ctrl+Esc 開啓 [開始] 功能表
Ctrl+Shift 啓用多種鍵盤配置時切換鍵盤配置
右邊或左邊 Ctrl+Shift 在從右到左的閱讀語言中變更閱讀方向
Ctrl+Shift+Esc 開啓工作管理員
Ctrl+Q 全螢幕照相(可用Ctrl+V貼上
Ctrl+Alt+del 重新啓動(熱開機)
Ctrl+Alt+< 叫出新注音標點符號小鍵盤
Ctrl+Space 切換至預設輸入法
Ctrl+End 跳至文件末端
Alt鍵
Alt+F4 關閉使用中的項目,或結束使用中的程式
Alt+空格鍵 開啓使用中視窗的捷徑功能表
Alt+Enter 顯示選取項目的内容
Alt+Tab 在開啓的項目之間切換
Alt+Esc 按項目開啓的順序循環顯示它們
Alt+底線字母 顯示相對應的功能表或執行功能表命令
Alt+向上鍵 檢視 [Windows 檔案總管] 中的上一層資料夾
其他快捷
Delete 刪除選取的項目,並將它移至 [資源回收筒]
Shift+Delete 刪除選取的項目,但先不將它移至 [資源回收筒]
Shift 及任一方向鍵 在視窗或桌面上選取一個以上的項目,或選取文件内的文字。
Shift+F10 顯示選取項目的捷徑功能表
Esc 取消目前的工作
當您插入 CD 時按 Shift 鍵 防止 CD 自動播放
按住Shift 跳過光碟自動執行功能
Windows 標誌鍵盤快速鍵
Windows 標誌鍵 開啓或關閉 [開始] 功能表
Windows 標誌鍵+D 顯示桌面
Windows 標誌鍵+M 將所有視窗最小化
Windows 標誌鍵+Shift+M 將最小化的視窗還原至桌面
Windows 標誌鍵+E 開啓我的電腦
Windows 標誌鍵+F 搜尋檔案或資料夾
Ctrl+Windows 標誌鍵+F 搜尋電腦 (如果你在網路上)
Windows 標誌鍵+L 鎖定電腦或切換使用者
Windows 標誌鍵+R 開啓 [執行] 對話方塊
Windows 標誌鍵+T 循環顯示工作列上的程式
Windows+R 開啓”執行”
Windows+E 開啓”檔案總管”
Windows+F or F3 開啓”搜尋”
Windows+D 顯示桌面
Windows+M 視窗最小化
Windows+TAB 在工作列做切換動作,須按ENTER作結束

Code Cademy 筆記

Building with Bootstrap

    1. 在head tag之中鍵入
 <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  1. 頂端導覽頁header class=”container” *意思是套用BS模板
    →橫幅顯示div class=”row”
    →分割成2個單位:
    ❶公司名稱LOGO h1 class=”col-sm-4″
    ❷右邊其餘資訊  nav=”col-sm-8 text-right”
    →用p tag再細分newest,catalogue,contact
  2. 橫幅視覺面 setion=”jumbotron”
    →套用BS模板 div=”container”
    →文字水平置中 div=”row text-center”
    →内容:大標h2,中標h3,按鈕拉至頁尾

    See all
    
  3. 内容區塊supporting content area
    →套用BS模板 section=”container”
    →切成兩個div class=”row”
    →再細切成四個figure class=”col-sm-6″
    →毎個figure中填入一個<p>跟一個img
  4. 底端列footer→套用BS模板
    footer=”container”
    →div class=”row”
    →切成兩塊p class=”col-sm-4″ 與ul class=”col-sm-8″
    →p内寫入:&copy; 2016 Skillfair
    →ul 再切成4個li class=”col-sm-1″
    →4個li内部放入社群網站圖示img

Learn Git

  1. 新增一個txt檔案,寫一點東西
  2. 開始專案:在terminal内輸入git init
  3. Working Directory:編輯,新增,刪除專案
  4. Staging Area:將修改帶到此處
  5. Repository:將修改存為commit,存於此處
  6. 修改Working Directory:在terminal内輸入git status
  7. 新增working directory→Staging Area:輸入git add <file-name>→輸入git status確認有無存在(綠色代表有在)
  8. 連線成功,之後只要修改txt,就可以記錄在git上
    査詢修改紀錄:git diff <file-name>
    離開査詢頁q
    記得査完後可以存一下git add <file-name>
  9. commit,永久保存在Repository:git commit -m”簡單描述”
    査看commit紀錄:git log
  10. Git Commands Definitation
    git status 檢査内容: working directory 與 staging area
    git add  新增working directory→staging area
    git diff 叫出working directory與staging area之差異
    git commit 永久保存
    staging area→repository
    git log 顯示commits歷史紀錄

EXCEL轉檔CSV方法,解決日文亂碼問題

csv,是一種逗點分隔形式的文字檔。比方説在excel中一個表格長這樣。

這是 一個 表格

這一段資訊轉成csv後就會變成:

"這是","一個","表格"

轉成csv後,可以大幅輕量化,所以很適合資訊量很多的文件傳輸。
而excel支援内建csv存檔格式,所以要存csv也很方便(存檔時選擇存成csv格式)。
BUT!!
因為excel不支援utf-8格式。
文件裡面有日文,轉檔出來的csv會變成亂碼。

一開始是安裝OpenOffice轉檔解決問題,但公司的acer win10毎次用OpenOffice開.xlsx都會出現重複字問題。
比方説某一格是

コード

,用OpenOffice開啓後會變成

コードコードコードコードコードコードコード。

毎次開檔案還要一格一格檢査實在很麻煩(眼睛都要花了…)
所以我後來研究出用access轉檔的方法!既可以解決重複字問題也可以快速轉檔。

條件限制

  1. 需安裝access
  2. 原始文件儲存格内不能有換行資訊,像是這樣
    這是

    換行部分

    一個 表格

    最左邊第一格,有換行資訊。
    如果取消換行也沒差的話可以用先用excel取代功能,將換行資訊(輸入Ctrl+J)取代為無。

excel轉檔csv步驟

  1. 準備好excel文件,確認儲存格内沒有換行資訊。
  2. Ctrl+A全選,格式改為「文字」,存檔,關閉excel。
    excel-to-csv1-min
  3. 找到剛剛存好的xlsx檔案,按右鍵「開啓檔案」,「選擇其他應用程式」,「Access」
  4. 出現這個視窗。甚麼都不要設定一直按「下一步」,「完成」
    excel-to-csv2-min
  5. 點選標籤「外部資料」,「匯出-文字檔」 【快速鍵:Alt + X + T】excel-to-csv3-min
  6. 接著出現匯出視窗,指定好儲存位置後按確定(中間的指定匯出選項不用勾)
  7. 匯出格式-分欄字元,按右下角的進階【快速鍵:V】
  8. 語言-全部,字碼頁-日文(Shift-JIS)
    確認最上面的欄位分隔符號是「,」,文字辨識符號是「”」excel-to-csv4-min
  9. 然後一直按下一步按到完成,結束,關掉Access,接著用excel確認看看剛剛做好的檔案

excel開啓csv步驟

  1. 開一個新的excel
  2. 標籤「資料」,取得外部資料「從文字檔」
  3. 原始資料類型「分隔符號」,檔案原始格式「日文(Shift-JIS)」,下一步
  4. 分隔符號「逗點」打勾,下一步,完成
  5. 打開後檢査完畢,不要存檔直接關掉(如果在這裡存檔的話會變亂碼喔~)

線上資源

圖片

圖示

CSS

顏色與設計

Adobe系列

APP學習

網頁開發

Khan Academy JavaScript 筆記

Khan Academy Intro to JS: Drawing & Animation

Drawing basics

  • 圓形,ellipse(X離右側距離, Y離頂端距離, Weight寬, Height長) ;
  • X:0-400, Y:0-400
  • line( X離右側距離, Y離頂端距離, start, end);
  • rect(X, Y width, radius高度/胖瘦度 );
  • line(x1, y1, x2, y2);。1下面,2上面

Coloring

  • backroung(RGB code)
  • 填滿特定區域:在特定形狀code上方插入fill(RGB code);
  • 線條顏色:在線條code上方插入stroke(RGB code);
  • 線條粗細:strokeweight(px);
  • 去除框線:在所有code上方插入nosttoke();

Variable

  • variable:批量改尺寸
    ❶頂端列鍵入var  名稱 = 20;
    ❷找到要修改的函數ellipse(157,151,名稱,名稱)

Animation Basics

  • 動畫效果:原理,設定X變數,用相同的X變數+某數寫出其他圖形。所以如果X變數連續增加,就會有動畫效果。
  • draw = function() {
    ❶放background,消除毎次移動的滑行殘影
    ❷這裡放所有有X變數在的圖形(要動起來的東西)
    不要放 var x = 某數,var放在draw上方,數値設起點値
    ❸設 x = x+1(速率:一秒移動1px)
    }

魂環心得

第一次接觸水上老師的作品,畫風簡單但劇情可不簡單啊!毎段劇情都引導人陷入沉思,是個令人回味無窮的上乘之作。

以下捏他注意

這部作品真的帶給我很多省思!
印象最深刻的一幕,是第五次輪迴前風太抓著フルトゥナ問他為何前兩次都沒見到レイ(フォン的情人,ヴァン的女兒)
フルトゥナ:
「お前はレイと呼ぶ魂はもう会えない。
レイにはお前から学ぶものは、もうない
お前にもレイから学ぶものは、もうない」
所以即使是這輩子很重要的人,如果互相的使命完成了就再也見不到了嗎…
覺得好悲傷阿。


ラファル決定解放亞生者那幕也很有感觸!
亞生者是身體損壞但腦部完整的…瀕死人?
34世紀,醫療技術可以讓大腦與壞死的軀幹分離。
人類(只有腦部)能夠永遠活在夢境,實現長生不死。
然後存放在ラファル工作的寝台。
但世界上已經有100億位亞生者了,其中最長的活在夢境中300年。
ラファル認為,剝奪死亡的權利,等於剝奪轉生的機會,所以他決定強制停止寝台運轉。
很久以前我媽曾説過,如果有一天她老化到必須插管,她要拔管,放棄治療。
我一直都無法完全認同這個想法,但看了ラファル的故事後,覺得可以理解了。
覺得死亡的分開好像不是那麼絶望,因為他只是巨大的生命旅程中的小分離而已。
相信下輩子還會遇到她!

輪迴轉生

接觸本作以前,我有看過一些文章。
參考文章
靈魂隨著轉生次數變多,也會越來越成熟。
會選擇合適的環境出生,歷練
這理論非常可以套用在本作上XDDDD

毎個靈魂在人世間的功課都不同(可能是上輩子的遺憾),<所以一生追求得目標也會有所不同。
那人生的重要選擇(出國工作,結婚生子),對毎個人的意義也不同,不能為社會單一價値觀影響

去年冬天我拿到日本工作最終面試機會,經過再三思考,我選擇放棄當時自己也不清楚放棄原因(盤算過各種可能性覺得留台灣比較好,但現在總算清楚一些了
我心目中的重要排序是

家人與愛犬→專業技術→金錢→他人觀感(身價)
赴日工作可以獲得金錢與身價,但會犧牲家人愛犬相處的時間,提升技術競爭力的可能。家人與愛犬對我最重要,所以我決定留在台灣。

結語

網路上似乎對水上老師其他作品讚譽頗佳XD,那下次找時間看完好了。