最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第五堂 – Flex Panel Gallery

XAMPP下载 admin 634浏览 0评论

今天的課程要實作的是一個非常”snazzy”的介面(在第0堂課有提到上JS30可以順便練英文,snazzy意指時髦的、華麗而俗氣的)。實作範例連結如下:

 

QQ截图20181104163132

而這堂課可以說是上到目前為止對我最有幫助的一堂,因為在這之前我對於排版真的是極度不熟悉,可以說是零基礎,就連想要把東西置中都要弄半天,

但CSS真的是一門很深的學問,而我只是個CSS小小初心者,所以下面的說明我只會用我這堂課所學的粗淺知識,來介紹各個CSS名詞或技巧。若想要深入了解的同學,可以到下面參考來源的網站,裡面都有很詳細的說明。邏輯流程
利用flex及置中排版,將照片水平排列,並使文字上下各占三分之一

預設上下方文字在畫面外,加入指定class時回到畫面中

監聽panel的click事件及transitionend事件,分別給予指定class
課程重點
flex:是這個實作最重要的屬性,但真的要認真介紹需要非常多的篇幅,所以我這邊這以課程所用到的部分說明。flex算是一種容器,全名叫flexbox,顧名思義,是個相當有彈性的布局方式。若指定一個區塊的style屬性display:flex,這時區塊就變成了flexbox,裡面的子區塊就能夠以flex的屬性來佈局。例如下列HTML及其CSS,panels的CSS屬性有display:flex,panels就是flex容器,裡面的panel就能用flex設定各個panel佔的比重。範例說明原本flex都是1,加入open類別後,該panel的flex設定成5,就有點下去區塊變寬的效果。align-items和justify-content設定center可以很輕易讓元素置中。而panel本身加上display:flex也可以讓他自己成為flexbox裡的flexbos。flex-direction是決定flexbox內的排列方向,這邊使用column會使預設的水平變垂直。<div>     <div>       <p>Hey</p>       <p>Let’s</p>       <p>Dance</p>     </div>    <div>      <p>Give</p>      <p>Take</p>      <p>Receive</p>    </div> </div>.panels {  min-height: 100vh;  overflow: hidden;  display: flex; } .panel {       flex: 1;       align-items: center;       justify-content: center;       display: flex;       flex-direction: column; }.panel.open {  font-size: 40px;  flex: 5;}

translateY():這是CSS transform的一個函式,能夠調整區塊Y方向的位置。在實作中translateY是用來調整滑鼠點選後,上下文字滑進與滑出的位置,如下:.panel>*:first-child{transform: translateY(-100%);} .panel.open-active>*:first-child{transform: translateY(0);} .panel>*:last-child{transform: translateY(100%);} .panel.open-active>*:last-child{transform: translateY(0);}

classList.toggle():像是個開關的功能,用來增加或移除物件的屬性。在實作中用來對panel做open class的開關。
panels.forEach(panel => panel.addEventListener(‘click’,toggleOpen));function toggleOpen() {    this.classList.toggle(‘open’);}延伸閱讀
CSS選擇器:
星號:實作中我們會在CSS中看到星號*,代表所有的元素,可以聯想到SQL select *中的星號也是選擇全部的意思。
大於:>是選擇該物件底下”直接的元素”,例如:.class>p{style…}就是class底下的所有直接的P元素,那假如這時候class底下的P元素被其他元素包住,如<div>那就不算直接的元素,所以這種時候P不會被選擇。
空格:承上例,假如是.class p{style…},這時就是選擇class底下所有P元素,無論直接或間接。
加號:+是選擇與該物件同層級的”後面第一個”元素。
波浪號:~是選擇與該物件同層級的”後面全部”元素。
沒有空格:當兩個物件之間沒有空格,如p.class{style…}代表該區塊要同時符合兩個條件才會被選擇。
逗號:,代表”或”條件。只要符合其中一個就會被選擇。
CSS多個字型:實作中panel的p的文字設定是font-family: ‘Amatic SC’, cursive;。他設定了超過一種字型,用意是當瀏覽器抓不到第一種字型的時候會自動往下一個抓。
::before、::after:偽元素,並不是真正實體元素。直接看範例:div::before {   content: “我是 before”;   color: red; } div::after {   content: “我是 after”;   color: red; } <div> 我是原始div </div>出來的結果會長這樣QQ截图20181104163052

另外還有偽類,欲知詳情請至下方參考來源。

转载请注明:XAMPP中文组官网 » 第五堂 – Flex Panel Gallery

您必须 登录 才能发表评论!