CSS之三 Positioning

這個是我比較有興趣的地方.

  • 有四種定位的方法
    1. Static Positioning
      • 預設的方法
      • 不受top, bottom, left, right影響
    2. Fixed Positioning (position: fixed;)
      • 指定東西出現在某個相對於browser window的位置
      • 即使window在捲動時, 它還留在原位, 不會跟著捲
      • example
      • 它接下來的element會當它不存在一樣, 繼續往下排
    3. Relative Positioning (position: relative;)
      • 相對於它原本應該出現的位置, 另外加上一個offset
      • ex. (left: -20px;)
      • 雖然用了relative positioning的element的顯示位置會變, 但是接下來的element, 還是會用它用本應該存在的座標, 繼續畫下去
    4. Absolute Positioning (position: absolute;)
      • 相對於他的parent的位置.
      • 如果沒有parent, 那就是<html>
      • 它接下來的element會當它不存在一樣, 繼續往下排
  • z-index, 大的排前面, 小的排後面. 可以是負的.
  • cursor, 有一大堆屬性, 可以改變cursor的外觀
  • overflow: scroll; 可以讓內容超出範圍時, 加上一個scroll bar

留言

張貼留言

這個網誌中的熱門文章

Google Phone跟iPhone的比較!?

圖片
T-Mobile 率先發表要出Google Phone G1 了. 看了看 engadget 裡的介紹, 之前文爺也要我比較Android跟iPhone, 一年後再來看對不對, 那我就寫一下我的感覺, 再看看我猜的跟之後市場的評價一不一樣囉. 首先, 我本身並沒有iPhone, 但是我有一台iPod Touch 16G, firmware一路更新到現在最新的2.1版, 大致看到些這幾個月以來Apple在firmware上的進步. 另外前幾個月我也有試著研究iPod Touch上的開發環境, 看看要怎麼樣在上面寫程式, 所以對iPhone的硬體能力能做到什麼樣的效果也有一些了解, 下面我就拿出來比較一下. 1. 開發環境 Apple的開發環境從Mac Pro, iMac, MacBook到iPhone, iPod Touch(以下只提iPhone了, 在上面寫程式除了電話功能外, 兩者完全一樣)都是用同一套, Xcode . 而給iPhone的開發環境除了Xcode之外, 完整的模擬器也有, 而且安裝相當簡單, 同時也可以連接一台真的iPhone, 然後透過iPhone來操作模擬器裡的程式(這是因為iPhone有很多操作像是multi-touch跟accelerometers無法在電腦上用滑鼠來模擬). 在開發的過程中要抓screenshot也十分容易. 而Android的開發環境呢? 日前才出了SDK 1.0, 裡面有的開發環境還是跟傳統embedded system開發方式沒差多少. 最多就是給了一個 eclipse 的plugin, 協助build code跟debug, 其中的整合度跟Xcode仍有不小的差距. 而且刻UI還缺乏像Xcode裡的Interface builder這樣的工具, 可以直接用拖拉的方式來排系統預設的UI元件及拉event handler. 相關的開發文件呢? Android也是像大多數的open source project一樣, 有mailing list, forum, 線上文件等等. 但Apple不只有這些, 還有一系列的教學影片, 更有甚者, iPhone本身就等於一個教學平台, 可以一口氣把全部影片抓到iPhone裡, 然後在路上慢慢看. 難度從introduction到實際開發的例子都有. 我自己就是在紐約時每天坐地鐵的...
閱讀完整內容

博客來coupon大放送!

很多人用gmail invitation來招覽自己blog的生意, 我也來用別的東西來吸引人吧... 下面是一些博客來網路書店的coupon, 每個可以折抵20元, 要用的就自己拿去吧, 請記得留個comment說哪個coupon已經被用掉了... 有效期限至6/30止喔! CCDQ8Qfs CCDNR855 CCDM6H8t CCDuSv7A CCD5AgbM CCDs7uUx CCDyTgaL CCDV5BxU CCDdrPRf CCDA8J4s CCD7KKic CCD34pt5 CCD8hiSG CCDVUPXS CCDcsQVY CCDcPtb4 CCDuYDTC CCDJ3Lrq CCDc74Vs CCDd5yHp
閱讀完整內容

我第一個Android程式上架了...

上星期逛到一個網站, aNobii , 好像已經出現很久了, 我現在才發現. 它是個藏書網站, 我一發現就愛不釋手, 想把自己所有的書都放上去. 無奈它加書的方式, 是要把ISBN打進去. 一個ISBN有10或13碼兩種, 無論哪種, 我都打很慢. 看著書櫃上的書, 似乎要把它全部打上去要很久. 然後我就想到Android上不是有個Barcode Scanner的程式嗎? 它可以把各種條碼的值掃出來. 那我最近又在玩Android, 何不寫個程式, 用手機先把條碼一個一個掃出來, 存在database裡, 掃完後再一次用GMail寄出來. 然後再到PC上用browser copy & paste, 把書加進去呢? 於是乎就在前兩天, 我的第一個Android程式 aNobii Scanner 在Android Market上架了. 目前已經有兩百多個人在用它了, 評價3.3顆星... :p PS. 之所以要用GMail這種迂迴的方式, 實在是因為aNobii這個網站本身提供的API, 只能讓外面的程式來Query, 而不能由外面來塞書的ISBN號碼進來. 所以只要分成兩段, 前半段手機處理, 後半段還是要用手工去Copy & Paste. 不過還好的是aNobii有提供multiple add的功能, 所以copy & paste只要做一次就好. 還算不是太麻煩.
閱讀完整內容