這一篇是記錄在寫 jQuery 課程的最終作業時,所遇到的問題
我的codepen練習
https://codepen.io/saffranwang/pen/JVXeVV
-
下拉式選單功能在「產品介紹」和「聯絡我們」加入下拉式選單
-
swiper Banner輪播利用swiper來讓banner做各種輪播效果
-
lightbox 燈箱在三個產品圖片做燈箱效果,點擊就跳出燈箱
-
top效果在網頁右下角做go-to-top按鈕,點擊回到最上方
重點整理
❗️
css reset
每次在寫網頁時,css reset要再自己多寫兩個設定:
1 | *, *:before, *:after{ |
❗️
Header
在寫 Header 時
- 把 Header 劃分為三個部分(上圖中三個紅色框框)
- 三個部分,分別都有自己的最外層(上圖中的紅色文字)
- 三個部分,也分別都有自己的 .container 層,如下:
想要設計出「內容固定寬度,只有背景延伸」的網頁,就多加一個 .container 把要固定寬度的內容給包住,在此處,設定內容寬度最大為1000px
1 | .wrap{ |
⭐️ 第一個部分 <div class="header_top">
1 | <div class="header_top"> |
⭐️ 第二個部分 <div class="header">
1 | <div class="header"> |
- 設定相對定位的定位點不是以最外層(.header),而是以「有.container」的 div (.header_content)為相對定位的定位點(設定
position: relative;
)
⭐️ 第三個部分 <div class="header_banner">
1 | <div class="header_banner"> |
- 設定相對定位的定位點不是以最外層(.header_banner),而是以「有.container」的 div(.banner)為相對定位的定位點(設定
position: relative;
)
下拉選單
- 為下拉選單設一個獨立的
<div class="dropdown">
1 | <li> |
.dropdown
以.header_content
為定位點,來設定絕對定位
1 | .header_content{ |
1 | .dropdown{ |
注意!為了能夠讓 .dropdown
在最上層,不被 banner 蓋住,要記得在 .dropdown
的父層 .header_menu
設定 z-index
1 | .header_menu{ |
Swiper banner輪播效果
- 當banner上面有其他元素時,例如此處有:
- 半透明黑底
<div class="banner_rect">
- 白色文字
<p>
- 半透明黑底
❗️ 其他元素都要跟banner圖片一起放在同一個 "swiper-slide"
裡面,才可以跟圖片一起輪播
1 | <div class="swiper-slide"> |
最上方選單fixed
我想讓這兩塊:
<div class="header_top">
和<div class="header">
可以永遠固定在網頁的最上方。
但是,加上 position: fixed;
之後,版面都會跑掉,該怎麼辦呢?
解決方法:
fixed 你必須自己設計出寬高來,否則就不會有實際寬高,所以必須再寫下方語法來搭配:
1 | .header_top{ |
1 | .header{ |
❗️ 為了避免banner被上方fixed的部分給遮住,先在<div class="header_banner">
外面多包一層<div class="banner_frame">
html語法:
1 | <div class="banner_frame"> |
接著在.banner_frame
加上padding-top: 78px;
(.header_top
和.header
的高度加起來是78px)
1 | .banner_frame{ |
這樣就ok了!
我的問題
Q:
我想讓下拉選單的中線可以對齊它所屬的主選單(如上圖,現在看起來往左邊歪),我試著把下拉選單的定位點設定在每個選單上
1 | .header_menu>li{ |
然後把下拉選單(.dropdown)設定left: 50%,結果下拉選單的寬度變得很小(如下圖紅色箭頭處)
1 | .dropdown{ |
請問老師這該怎麼調整呢?
A:
為了讓下拉選單的中線可以對齊它所屬的主選單,所以把下拉選單的定位點設定在每個選單上,語法如下:
.header_menu>li
要下相對定位語法
1 | .header_menu>li{ |
然後把下拉選單(.dropdown)設定如下:
.dropdown
寬度下 100% (撐滿父元素的寬度)
1 | .dropdown{ |
.header_menu>li>a
不要用margin-left
,會因此影響 % 的推擠
藉此流程就可設計出你要的細節。
Q: 承上題
想要讓下拉選單的寬度會隨著內容的文字多寡去自適應,讓文字不會折成兩行。
但是設定width: 100%;
之後,下拉選單的寬度就不會隨著內容自適應了(如下圖,因為.dropdown
的寬度只會撐滿父元素的寬度,所以字折成兩行)
要怎麼調整呢?
A:
RWD 的部分會建議使用漢堡選單的形式並且移除絕對定位(這可以減少許多不可預期的問題)相關實作方式可以參考 Bootstrap:https://getbootstrap.com/docs/4.3/components/navbar/
Q: 在 Swiper 的課程中,老師是教我們用 CDN 來載入,想請問在實務上,也都是這樣直接用 CDN 載入嗎?
因為在 Q&A 中有看到助教説「使用 CDN 時,記得要另外寫載入本地端的語法,以免 CDN 服務資源無法載入的情況」
既然是這樣,那為什麼不要直接用本地端載入就好了呢?
我在這次的作業中,改為嘗試用本地端載入,想確認我這樣的做法對不對:因為從 GitHub 上(https://github.com/nolimits4web/Swiper/tree/master/dist )
swiper.min.css 和 swiper.min.js 無法直接下載檔案(如下圖中箭頭處,只能打開看 Raw 檔),因此我在自己的 css 和 js 資料夾中先自行新增兩個命名為 swiper.min.css 和 swiper.min.js 的檔,再把各自 Raw 中的內容全部複製貼過去
請問這樣的步驟是正確的嗎?
A:
你貼的方法流程 ok,至於 cdn 與本地的差異在於「責任歸屬」,因為當系統壞掉時,你不能說因為 CDN 掛掉導致系統錯誤,所以如果會擔心的話也是都可以使用本地下載載入也 ok。