忍者ブログ
2018/01/26 Copyright © 離家出走 All rights reserved.
»7.訂單重寫

»8. 版面三。
2018-01-26發表
親戚買了新的智慧型手機,舊的給我。
螢幕忽好忽壞的,是個故障品。
不過,我只是用來拍照,這點故障也沒什麼關係。

很早就決定,如果拿到智慧型手機,
就要來調整網站的版面,讓它配合手機瀏覽。

本來想使用,傳說中的瀑布流(jQuery Masonry)。
參考對象是摩斯漢堡的網站。

版面二,就有企圖仿照瀑布流。
在首頁,把各類公告劃分區域,一格一格的排列下來。

這次版面三,本來想嘗試真正的瀑布流。
但是失敗了

不知道什麼原因,我無法將瀑布流置中。
在電腦看起來是置中,在手機裡則是偏右。
在手機裡看起來是置中,在電腦則是偏左。

問題應該是,我在 CSS 裡頭寫錯了代碼吧?
反覆重做了幾次,覺得累了,所以就放棄了。

回頭運用版面二的代碼,做出這次的版面三。
然後再一篇一篇檢查文章裡頭的排版,調整一下。

留言、選單等等,
更改位置或數量,多數都是為了配合手機。

讀者投稿設置幻燈片效果,這個部份我挺喜歡。
這是在整理讀者稿件的途中,忽然想到的。

另外也更新了表格排序的版本。
運用了新的功能,搜索欄位。
這功能真的太棒了

又由於忍者的文章有限字數。
把一些文章(讀者稿件展覽、留言表等等),換成網頁檔。
如此一來,就多出了十幾篇空白的文章。
非常礙眼。

要調整文章的編號,得刪除文章再重新上傳。
我個人覺得,這是最麻煩的地方。
但是我又沒辦法容忍那十幾篇的空白文章
所以默默的,慢慢調整文章,整齊編號。

這次的版面。
勉強(?) 能讓手機瀏覽方便。
雖說如此,有些地方還是不方便的。
那些是,我的能力辦不到的地方。

而且我個人,還是喜歡用電腦瀏覽。
遇到需要取捨的地方,我大部份還是會選擇適合電腦瀏覽的版面。

本來想更新燈箱(FancyBox3
FancyBox3 能適應電腦與手機。
但,可能是我個人的關係(XP電腦),燈箱的功能頻頻出錯。
未來哪天,電腦換WIN10之後,再來試試新燈箱吧。

以下是過程紀錄。

一月。
16日,開始修改版面。
19日,版面完成。
23日,套用版面,開始調整文章。
26日,完成。

拍手[0回]

ASK
MailForm
Plurk
0 條留言
忍者ブログ[PR]
PR