Morgan1130 wrote:
我有點懷疑是檔案沒拷...(恕刪)
感謝樓主提示
我剛剛刪掉從丟一次 就成功了~~
個人積分：12分
文章編號：23262297
個人積分：454分
文章編號：23262545
(如果真的有人想看的話...)
首先先說明一下這個畫面組成的元件
- LockBackground.jpg - 即底圖. 預設是指向手機系統裡的cache圖片
- content - 紅色框裡的是content, 即整個主題, 裡面又包含了其它的小clusters
- timecluster - 即時間這個元件
- datecluster - 日期元件
- weatercluster- 天氣元件
簡單的說, 這個畫面由四個元件組成(不包含主content) - 底圖, 時間, 日期 和天氣.
這是這個css的第一段, 首先是把所有的東西先定義好, 除非有額外定義, 不然大家就照這個規定走.
- font -family: 主題所用的字型, Arial, Helvetica, sans-serif 是網頁上常用的一種字型之一, 其它字型請參考:
http://www.w3schools.com/css/css_websafe_fonts.asp
- 接下來是為頁面定它的框框 - margin, padding, content
想像以content為中心, 往外延伸為padding, 再往外為margin.
所以這裡margin和padding都為0, 表示content外沒有任何框框
- text-shadow: 3px 3px 7px #000000 - 文字所投射的影子 - 向右移3px, 向下移3px, 霧化7px, 顏色為黑
關於HEX色表請看這裡: http://www.2createawebsite.com/build/hex-color-chart-grid.html
接下來是定義那24張圖 - custom background
- Z-index:0 - Z index 是元件從下層到上層的順序, 最下層為0, 再上來為1, 以此類推... 因為這是底圖, 所以Z index 當然是0
開始定義整個content了
- position: absolute - 絶對位置 - 表示以下的left, top值對應的是整張頁面, 即手機畫面
- rotate (0deg) - 表示整個content旋轉0度, 順時針為正, 逆時針為負
- left:100px - content 離頁面左邊100px遠
- top:150px - content 離頁面上方100px遠
定義timecluster這個區塊
- text-align:center - 無論字型大小或字數多少, 一律從畫面中間開始往左右伸展
- clear:left - 在這個區塊的左邊保持淨空, 其它元件不能插入
- opacity:.8 - 整個區塊的透明度為80%
Hourbox和minutebox的結構相同
- position: relative - 小時跟分鐘的位置是對應於timecluster
- font-size- 字型大小
- letter-spacing:-5 - 在135px的字型大小下, 減少字和字之間的空間 -5px
- font-weight:bold - 使用粗體字
- margin-right:15px- 在字元的右邊留下15px的空間
secondbox和ampmbox裡的東西也差不多:
- width/height:15px - 中間那兩小點的大小
- color:#818181 - 文字設為灰色, 可以利用下面連結選擇自己喜歡的顏色
http://www.2createawebsite.com/build/hex-colors.html#colorgenerator
- text-shadow:none - 不產生影子
- z-index:2 -因為下面還有白色方塊跟底圖
- margin:20px 0 20px 0 - 在白點的四週預留空間, 上下方各留20, 左右不留
- shadow - 同之前, 白點產生的影子
接下來開始定義日期這個元件, 結構跟時間元件是完全一樣的
更改top和left的值就可以把整個日期方框移來移去囉~
接下來的結構都差不多...大致上就是改字的顏色, 大小, 位置
比較特別的是它用到float, 表示是可以允許互相之間重疊
- monthbox - 月份元件
- daybox - 星期幾
- datebox -幾號
- yearbox - 年份
接下來是定義天氣, 其實都和之前的差不多, 這裡只指出比較特別的
location - 指城市名
temp - 溫度
desc - (description) - 天氣情況 - 晴時多雲之類...
weather icon - 天氣圖示
-text-transform: capitalize - 表示英文字的第一個字母大寫, 其它小寫
若要改全小寫 - 將capitalize改為lowercase
若要全大寫- uppercase
就先解釋到這吧... 因為我沒有學過CSS(其實除了20年前有學過basic之外, 沒學過別的了), 個人網頁也是dreamweaver+flash幫我做出來的, 如果以上有錯誤, 還請大大幫我指正.
個人積分：454分
文章編號：23262625
個人積分：454分
文章編號：23266434
個人積分：3分
文章編號：23267263
個人積分：10分
文章編號：23267372
個人積分：0分
文章編號：23267449
個人積分：454分
文章編號：23268460
個人積分：454分
文章編號：23268594
個人積分：3分
文章編號：23268710
關閉廣告