顯示具有 html 標籤的文章。 顯示所有文章
顯示具有 html 標籤的文章。 顯示所有文章

2017年7月16日 星期日

五倍紅寶石- 深入淺出立即上手的HTML網頁設計(Amos老師)

雖然我是資管系畢業的,但是因為畢業之後就沒有再碰相關科系的東西,所以連最基本的HTML都差不多忘光了,更不用說是CSS……
都不太想提自己是資管了囧

而且其實我是很害怕前端的,以前專題的時候常常實際的外觀和我希望的外觀不一樣,我只是想要移個位置為什麼那麼難QQ
常常都在想要是我可以伸手去移動網頁上的東西就好了(想太多)

外加以前常常是自己亂用亂用,碰到問題上網google把大家寫的解法都試一下看哪一個有用就用哪一個,但是因為不了解那些css真正的意義,
所以很容易之後繼續又犯一樣的錯誤
老師上課的時候強調了好幾次我們要去理解它背後的邏輯,這樣之後自然就會通了
我覺得這部分是線上教學網頁比較少解說的部分

特別是對於float或是position,這兩個老實說我沒有真的搞清楚他到底是怎樣運作的,一直以來我腦中都是像下面這樣
float? 你是要飄去哪啊
position? 一個路痴哪會知道什麼position(?!)
特別是position,對我來說真的太謎了,但配合老師的講解,加上課堂上的練習,總算沒有之前那麼搞不清楚頭緒,下面是我上課的時候寫的memo


position

absolute

  • absolute
  • fixed
  • relative
    會先從資料流當中抽離出來獨立一層
    1. 先找父層有沒有上面三種定位設定任何一種
    2. 有找到任何一種定位設定就靠在該層上
    3. 若所有父層都沒有設定就設在視窗

relative

因為不會抽離出來獨立一層,如果只設定position: relative;然後沒有設定任何位置的話不會有任何作用.
設定位置後會跑到別的地方,但本來原有的位置依舊是繼續佔著

      position: absolute;
      left: 0;
      top: 16;

fixed

直接找視窗位置


還有一個其實很基本,但我一直忽略他的事實,就是…..網頁上的元素其實都有分成是block還是inline兩種

顧名思義可以和大家排在一起的就是inline(ex: span/ a /img ),一個人就佔掉整行的是block(ex: p/div)
inline預設沒辦法設定寬度/ padding上下/margin上下,可以想成只有長度沒有厚度的東西
但傻傻的我,以前常常想要去設定inline元素的寬度之類的(遠目)
這就是看到什麼就用什麼,但沒想過這些東西的本質的後果orz
當然搞清楚之後對於css的display設定成block/inline/inline-block會影響到什麼東西也更理解了

當然老師有說,切版是很吃經驗值的東西,而且很多東西還是要多用才會熟悉,才不會忘掉,因此之後的練習是很重要的

最後,html/css雖然不用一開始就面對讓人痛苦的環境設定問題,但是一個用的順手的編輯器是很重要的
自己編輯器是用sublime,老師有投影片介紹一些可以讓寫html/css更方便的功能
https://www.slideshare.net/banPrint/sublime-text-51689543
覺得ctrl+w可以幫我把tag外面再包一層tag非常方便,不然以前都要自己加然後再整理一下縮排,很麻煩

2017年5月8日 星期一

HTML5 Canvas

下面是課程裡面最初步的code,就只是用canvas顯示一張圖出來而已
不過對我這種javascript菜鳥還是有一些不明白的地方,我一直都不確定到底什麼東西會在什麼時候被執行
也就是我搞不清楚程式執行的順序,就會傻傻以為都上到下

image.src = "222050-22rdf.jpg";
比方我不懂上面這個為什麼要放在onload的下面

這是一開始我心中最上面那段程式的的定義

  1. 建立image object
  2. 用onload去設定圖片讀完之後要做什麼事
  3. 用用canvas顯示在網頁上
  4. 然後最後才和他講圖片在哪裡?_?(黑人問號臉)
然後去論壇找一找有人問了類似的問題,發覺我最根本上會錯意了囧
因為,你沒有和他講圖片在哪裡之前圖片根本不會被load,所以onload根本不會執行
也就是
image.src = "222050-22rdf.jpg";本來就該放在後面啊~傻傻der~
借用一下udacity論壇上老師的解釋




2016年11月9日 星期三

html form label

雖然可能有點後知後覺,

但我現在才知道如果

<label for="name">有對到相對應input的id的話,你點label游標會自動focus在input.....

(因為從來沒有想要點labelXD)

2016年10月28日 星期五

padding margin

內距和外距
想當初其實一直搞不懂他們的差別
現在想想明明差別就很明顯

不過我覺得有些東西就是這樣,不用急著一開始就把所有東西都用懂
有時候你看多了以後就懂了