iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

慢慢帶你了解Flask系列 第 28

慢慢帶你了解Flask - Day28 101-Videos(4):圖片展示

大家好,我是長風青雲。今天是鐵人賽的第二十八天,還記得我說,我們今天要幹一場大事嗎?!
不知道大家還記不記得在第一個實例的時候我遇到的問題。
圖 片 顯 示 依 畫 面 大 小 決 定 一 列 幾 個
但是今天,或許可以說是作弊?我解決了這個問題~

啟發

其實原本沒想那麼多,只是突然看到人家101Video官網能做到依畫面大小更改一列幾個,我內心不平衡了OAO
「我不就是因為不滿他沒有分類、沒有將畫面呈現成我想看到的樣子才想做這個實例的嗎?」
「那人家辦的到的事情,我怎麼可以反而在這裡做的沒有比別人好?」
基於這樣的想法,我開始用F12研究他的CSS到底怎麼寫的。
然後……突然發現(畢竟在七月前我沒碰過網頁UI……如果很基礎別打我)
https://ithelp.ithome.com.tw/upload/images/20190922/20120116IX2NY1bpif.png
原來我們可以看到別人的CSS檔?

解決過程

方法1

其實方法1非常簡單,就是直接把別人使用的css link進來,然後在下方顯示影片的地方寫成
<ul class="modules large-block-grid-3 medium-block-grid-2 small-block-grid-1">
就可以解決我們的問題了。
但是我這人就是麻煩了點……所以出現方法2

方法2

觀察人家的css然後再把自己需要的東西抓到自己的檔案中。
實際我們使用的人家的css只有這一些。

[class*=block-grid-] li{display:inline;height:auto;float:left;padding:0 .625rem 1.25rem}
ul.modules{margin-right: 1%;} 

@media only screen{
  ul.small-block-grid-1 li{width:100%;padding:0 .625rem 1.25rem}
  ul.small-block-grid-1 li:nth-of-type(n){clear:both}
}
@media only screen and (min-width:40.063em){
  ul.medium-block-grid-2 li{width:50%;padding:0 .625rem 1.25rem}
  ul.medium-block-grid-2 li:nth-of-type(n){clear:none}
  ul.medium-block-grid-2 li:nth-of-type(2n+1){clear:both}
}
@media only screen and (min-width:64.063em){
  ul.large-block-grid-3 li{width:33.33333%;padding:0 .625rem 1.25rem}
  ul.large-block-grid-3 li:nth-of-type(n){clear:none}
  ul.large-block-grid-3 li:nth-of-type(3n+1){clear:both}
}

在這段程式碼裡,我學到了幾個新東西~
[class*=block-grid-]這句話代表的意思是,你的class裡面含有block-grid-字樣的意思,所以我們的small-block-grid-1medium-block-grid-2large-block-grid-3就中標啦~
那他到底怎麼讓他跟隨著我們的螢幕大小改變的呢?
就是使用floatnth-of-type
「嗯?你不是寫clear嗎?」
因為clear是用來清除float效果的啊~
我先拿large-block-grid-3舉個例子
原先我們的float都是向left浮動的,所以會從左開始慢慢排。
但是我們告訴他每次數到第一個li(30+1)、第四個li(31+1)、第七個li(3*2+1)……都要清除往左往右的浮動。(意義代表換行)
nth-of-type就像是數數的概念,數到第幾個那種感覺~

參考網頁

nth-of-type
clear

影片


看完影片你以為就到此結束了嗎?
不!
因為我覺得其實後面的內容其實並不算太難,然後我又覺得只剩下兩天……
我還是希望能在30天內發完的,所以讓我們繼續吧!
讓我們進入按進連結後的影片頁面!
再跟往常一樣加入<a>做超連結後就來到我們想看到的影片。
https://ithelp.ithome.com.tw/upload/images/20190922/20120116ULlT9oVVim.png
看起來很帥是不是?
但是其實這之中有個bug,我打算留到未來再解決……除非我又像之前單字那邊做轉址那回事。(RWD的頁面我還不太明白該如何下手)
為什麼不太能下手呢?
因為我用了<iframe>,他貌似會依照你最開始的設定,根本不管你使用了@media,所以縮小後的螢幕會變成這樣。
https://ithelp.ithome.com.tw/upload/images/20190922/20120116ZcLXTXyh7S.png
我當時:「???」
好了好了,先不說這些糟心事。
我之所以使用iframe是因為我希望我每個元件都不要互相影響。
影片是影片、文案是文案、查單字是查單字。
雖然最初原因是因為我在查單字的過程中……因為需要post,所以他居然整個頁面刷新了,我的影片也重頭播放。
我:「……整我?」
所以我就走一走,走向了使用iframe的道路。

設計架構

https://ithelp.ithome.com.tw/upload/images/20190922/20120116e5erOGs0rK.png
美吧美吧很美吧!
我覺得我每次畫圖都特別好看~
我的圖應該表示出很多事情了~他一個頁面中其實擁有4個頁面的概念~
全部都是爬!蟲!
因為我們如果下載他的文案和影片可是要耗費我們的容量呢!
查詢單字的部分則是爬劍橋單字那個網站喔~

然後我說一下我用了一個我沒用過的東西來設計頁面。
vhvw他們代表的是你屏幕大小的高度與寬度(百分比)。
比如直接再css裡面寫width:100vw就是將寬度設為你屏幕寬度的意思喔~
那讓我們來看看我們的影片吧~

大家是不是好奇這樣,這個實例應該是做完了吧?
事實上的確是做完了^w^
難不成還會有新的實例嗎?可是只剩下兩天……
當然是沒有了~我早就想好是這四個了~
那接下來的兩天要做什麼?
答案是!!!
明天公布哈哈哈哈哈哈哈哈!(((想知道嗎?不告訴你 d(>w< d)我最胖~
https://ithelp.ithome.com.tw/upload/images/20190922/20120116Kc4WnF2CRD.png


上一篇
慢慢帶你了解Flask - Day27 101-Videos(3):爬影片與預覽圖的真實位置
下一篇
慢慢帶你了解Flask - Day29 Azure:把網站放到網路上啦~
系列文
慢慢帶你了解Flask30

尚未有邦友留言

立即登入留言