2015年4月28日
2015年4月27日
2015年4月26日
2015年4月20日
jQuery學習筆記 第八堂-2(單頁式網頁設計:mousewheel功能)
前陣子可以看到許多單頁式網頁的設計,單頁式網頁就是在一頁裡面把所有要傳達的訊息都傳達完,而網友可以透過捲動捲軸的方式,讓網頁產生類似輪撥的效果。
本堂課主要是延續上一篇jQuery學習筆記 第八堂-1,這次加入了mousewheel的效果後,可以產生一次轉動一頁的效果,點這裡看結果。。
2015年4月19日
2015年4月18日
2015年4月16日
[教學] PHP & MySQL 學習筆記 第13堂(留言板建置:後台設計)
非常抱歉,關於部落格內 PHP 的部分目前已經停止維護,因本人已經很久沒有寫 PHP ,且文章中所使用的 PHP 版本偏舊,希望有心學習 PHP 的朋友們,可以參考 Codecademy 的課程,或近一步嘗試 Laravel 這個 PHP 框架(可透過 laracasts 學習),若有找不到錯的學習資源也歡迎在留言串分享,方便有需要的人能夠有更多學習的管道!
在這一堂課我們要練習建立一個留言板系統,同時包含它的前台(網友看到的部分)和後台(管理者看到的部分)
以下是這堂課的結果:
[教學] PHP & MySQL 學習筆記 第13堂(留言板建置:前台設計)
非常抱歉,關於部落格內 PHP 的部分目前已經停止維護,因本人已經很久沒有寫 PHP ,且文章中所使用的 PHP 版本偏舊,希望有心學習 PHP 的朋友們,可以參考 Codecademy 的課程,或近一步嘗試 Laravel 這個 PHP 框架(可透過 laracasts 學習),若有找不到錯的學習資源也歡迎在留言串分享,方便有需要的人能夠有更多學習的管道!
在這一堂課我們要練習建立一個留言板系統,同時包含它的前台(網友看到的部分)和後台(管理者看到的部分),這堂課主要是著重在前台設計的部分。
以下是這堂課的結果:
2015年4月15日
[筆記] CSS垂直置中的方法
在學習網頁排版的過程中,置中(不論垂直或水平)一直是個相當麻煩的事,關於CSS中置中的方式,網路上可以找到非常多,這裡的整理算是我自己的一個筆記吧,如果內容有問題在麻煩告知。
以下是之後示範中 HTML Body 的部分:
以下是之後示範中 HTML Body 的部分:
<div class="outer"> <div class="inner"> <p>要置中的內容</p> </div> </div>
後面則是搭配上不同的CSS作為展示。
文字的垂直置中方法
flex(推薦)
Flex 在瀏覽器的支援度已經相當普及,除非有需要支援 IE 的使用,不然基本上都可以安心使用了,簡單好用:
邏輯:display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。
.outer { background-color: #95afba; } .inner { background-color: #d5e1a3; display: flex; /* ★ */ height: 300px; align-items: center; /* ★ */ }
line-height(常用)
很好用的方法,就是設定div的高度和文字高度一樣,就可以簡單達到垂直置中的效果。
邏輯:當DIV區塊的高度等同於文字行高的,文字就會被放在中間。
.outer { background-color: #95afba; } .inner { background-color: #d5e1a3; height: 300px; /* ★ */ line-height: 300px; /* ★ */ }
效果如下:
table(少用)
邏輯:把要垂直置中的內容當作是 table 來操作,所以可以用 vertical-align 的指令。
.outer { background-color: #95afba; display: table; /* ★ */ height: 300px; } .inner { background-color: #d5e1a3; display: table-cell; /* ★ */ vertical-align: middle; /* ★ */ }
inline-block + vertical-align(少用)
透過這個方法,我們可以將多行文字也做一個垂直置中,這個方法也可以用來幫區塊作垂直置中:
.inner { background-color: #95afba; height: 400px; font-size: 0; } .inner:before { content: ""; /* ★ */ height: 100%; /* ★ */ display: inline-block; /* ★ */ vertical-align: middle; /* ★ */ } p { display: inline-block; /* ★ */ vertical-align: middle; /* ★ */ font-size: 1rem; }
padding
在下面文章一起進行說明。
區塊(div)的垂直置中方法
flex(建議)
邏輯:display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。
.outer { background-color: #95afba; position: relative; /* ★ */ height: 400px; display:flex; /* ★ */ align-items: center; /* ★ */ } .inner { background-color: #d5e1a3; height: 100px; }
Position + Transform(常用)
這個方法是利用絕對定位 absolute 的方式,搭配上 transform 來操作。
這個想法的概念是這樣,首先先用 absolute 來做絕對定位,當我輸入 top: 50% 時,這個 <div> 的左上角,會被移到高度為 50% 的地方。
但這樣並沒有真的把 div 區塊置中,因為它超過了,所以我們需要搭配上 transform 的屬性,透過負值的方法把它往上調,而往上調的高度就是這個 div 元素高度的一半,所以使用 translate(-50%) ,這時候,這個 inner div 就會被垂直置中了。
邏輯:先利用 position: absolute 把 top: 50% 設在 50%;接著再透過 transform: translateY(-50%) 把超過的部分修正回來,達到垂直置中。
.outer { background-color: #95afba; position: relative; /* ★ */ height: 400px; } .inner { background-color: #d5e1a3; position: absolute; /* ★ */ top: 50%; /* ★ */ height: 100px; transform: translateY(-50%); /* ★ */ }
Position + Margin
這個方法會設定 top 和 bottom 的位置,讓它不可能符合,再透過 margin 的方式,讓它變成垂直置中。
這個方法同時設定 top 和 bottom 為 0,使得 inner div 完全不可能符合,最後再透過 margin 這個指令,讓它達到垂直置中的效果。
類似的方法,也可以讓它達到水平置中,只要在 inner 的地方,多加上left:0; right:0,就可以達到水平置中。
.outer { background-color: #95afba; position: relative; /* ★ */ height: 400px; } .inner { background-color: #d5e1a3; height: 100px; width: 100px; position: absolute; /* ★ */ top: 0; /* ★ */ bottom: 0; /* ★ */ margin: auto; /* ★ */ }
padding
當我們的 div 沒有設定高度時,我們可以透過 padding 的指令來達到垂直置中的效果。
邏輯:透過上下都增加 100px 的 padding 就可以,讓 inner 這個區塊達到垂直置中的效果。
inner 也可以透過加上 padding: 50px 0,這樣的方式,來達到裡面也垂直置中的效果,而且也可以達到文字的垂直置中。
.outer { background-color: #95afba; padding: 100px 0; /* 上下都增加 100px 的padding */ } .inner { background-color: #d5e1a3; width: 100px; }
:before + inline-block(少用)
這個方法,透過CSS當中的偽元素(:before)加上 inline-block 來達到這樣的效果。
想法:在 outer 的前面加上一個偽元素,同時要 inline-block 的方式來呈現,這樣就可以再透過vertical-align 來加以置中。
如果 inner 這個 div 想要水平置中的話,可以在 outer 的地方加上 text-align:center 就可以達到水平置中的效果了。
.outer { background-color: #95afba; height: 400px; text-align:center; /* 如果要水平置中 */ } /* ★ */ .outer:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; } .inner { background-color: #d5e1a3; width: 100px; height: 100px; display: inline-block; /* ★ */ vertical-align: middle; /* ★ */ }
參考資料
- Centering in CSS: A Complete Guide @ CSS Tricks
- 6 Methods For Vertical Centering With CSS @
vanseo design
2015年4月13日
2015年4月12日
[筆記] 計算網頁底部位置,當網頁達到底部時才產生效果─jQuery
有時候,在寫jQuery的時候,我們會希望有些效果是當網友卷到網頁底部時才產生,例如像是有些網頁提供「向下鍵」讓網友點選,可是當到了頁底的時候,我們希望這個向下鍵能夠消失,到底要怎麼樣計算網頁底部的位置來達到這樣的效果呢?
2015年4月8日
[教學] PHP & MySQL 學習筆記 第12堂(資料庫建置:設定呈現於頁面的資料筆數)
非常抱歉,關於部落格內 PHP 的部分目前已經停止維護,因本人已經很久沒有寫 PHP ,且文章中所使用的 PHP 版本偏舊,希望有心學習 PHP 的朋友們,可以參考 Codecademy 的課程,或近一步嘗試 Laravel 這個 PHP 框架(可透過 laracasts 學習),若有找不到錯的學習資源也歡迎在留言串分享,方便有需要的人能夠有更多學習的管道!
在這一堂課我們同樣會沿用「 PHP & MySQL 學習筆記 第八堂(phpMyAdmin資料庫建置並呈現於網頁)」所使用的資料庫,這次除了練習將資料庫的資料呈現於網頁上外,也要練習設定每次可以呈現的資料筆數。
點這裡可以看到這堂課的結果。
2015年4月3日
[教學] PHP & MySQL 學習筆記 第11堂(資料庫建置:資料庫排序並於網頁呈現)
非常抱歉,關於部落格內 PHP 的部分目前已經停止維護,因本人已經很久沒有寫 PHP ,且文章中所使用的 PHP 版本偏舊,希望有心學習 PHP 的朋友們,可以參考 Codecademy 的課程,或近一步嘗試 Laravel 這個 PHP 框架(可透過 laracasts 學習),若有找不到錯的學習資源也歡迎在留言串分享,方便有需要的人能夠有更多學習的管道!
在這一堂課我們同樣會沿用「 PHP & MySQL 學習筆記 第八堂(phpMyAdmin資料庫建置並呈現於網頁)」所使用的資料庫,這次則是練習將資料庫作排序的動作。
點這裡可以看到這堂課的結果。
[教學] PHP & MySQL 學習筆記 第十堂(PHP MyAdmin帳號密碼管理)
非常抱歉,關於部落格內 PHP 的部分目前已經停止維護,因本人已經很久沒有寫 PHP ,且文章中所使用的 PHP 版本偏舊,希望有心學習 PHP 的朋友們,可以參考 Codecademy 的課程,或近一步嘗試 Laravel 這個 PHP 框架(可透過 laracasts 學習),若有找不到錯的學習資源也歡迎在留言串分享,方便有需要的人能夠有更多學習的管道!
在這一堂課我們暫時不會用到資料庫,而是說明可以如何去管理我們的帳號密碼。