jQuery 最終作業-重點整理

這一篇是記錄在寫 jQuery 課程的最終作業時,所遇到的問題

我的codepen練習

https://codepen.io/saffranwang/pen/JVXeVV

  1. 下拉式選單功能在「產品介紹」和「聯絡我們」加入下拉式選單

  2. swiper Banner輪播利用swiper來讓banner做各種輪播效果

  3. lightbox 燈箱在三個產品圖片做燈箱效果,點擊就跳出燈箱

  4. top效果在網頁右下角做go-to-top按鈕,點擊回到最上方

重點整理

❗️

css reset

每次在寫網頁時,css reset要再自己多寫兩個設定:

1
2
3
4
5
6
7
8
*, *:before, *:after{
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
}

❗️

在寫 Header 時

  • 把 Header 劃分為三個部分(上圖中三個紅色框框)
  • 三個部分,分別都有自己的最外層(上圖中的紅色文字)
  • 三個部分,也分別都有自己的 .container 層,如下:

想要設計出「內容固定寬度,只有背景延伸」的網頁,就多加一個 .container 把要固定寬度的內容給包住,在此處,設定內容寬度最大為1000px

1
2
3
4
5
6
7
.wrap{
width: 100%;
}
.container{
max-width: 1000px;
margin: 0 auto;
}

⭐️ 第一個部分 <div class="header_top">

1
2
<div class="header_top">
<div class="container clearfix">

⭐️ 第二個部分 <div class="header">

1
2
<div class="header">
<div class="header_content container">
  • 設定相對定位的定位點不是以最外層(.header),而是以「有.container」的 div (.header_content)為相對定位的定位點(設定 position: relative;

⭐️ 第三個部分 <div class="header_banner">

1
2
<div class="header_banner">
<div class="banner container">
  • 設定相對定位的定位點不是以最外層(.header_banner),而是以「有.container」的 div(.banner)為相對定位的定位點(設定 position: relative;

下拉選單

  • 為下拉選單設一個獨立的 <div class="dropdown">
1
2
3
4
5
6
7
8
9
10
<li>
<a href="#">產品介紹</a>
<div class="dropdown jq_submenu">
<ul>
<li><a href="#">Html 5基礎教學</a></li>
<li><a href="#">響應式網站設計</a></li>
<li><a href="#">jQuery 實戰教學</a></li>
</ul>
</div>
</li>
  • .dropdown.header_content 為定位點,來設定絕對定位
1
2
3
4
.header_content{
height: 50px;
position: relative;
}
1
2
3
4
5
6
7
.dropdown{
position: absolute;
top: 100%;
background-color: #fff;
padding: 10px;
border-radius: 5px;
}

注意!為了能夠讓 .dropdown 在最上層,不被 banner 蓋住,要記得在 .dropdown 的父層 .header_menu 設定 z-index

1
2
3
4
5
6
7
8
.header_menu{
position: absolute;
top: 50%;
right: 0px;
transform: translateY(-50%);
z-index: 100;
/*z-index要寫在這裡!!!*/
}

Swiper banner輪播效果

  • 當banner上面有其他元素時,例如此處有:
    • 半透明黑底 <div class="banner_rect">
    • 白色文字 <p>

❗️ 其他元素都要跟banner圖片一起放在同一個 "swiper-slide" 裡面,才可以跟圖片一起輪播

1
2
3
4
5
6
7
<div class="swiper-slide">
<img src="images/banner.png" alt="banner">

<div class="banner_rect">
<p>六角學院<br>讓您奠定良好的前端基礎</p>
</div>
</div>

最上方選單fixed

我想讓這兩塊:

<div class="header_top"><div class="header">可以永遠固定在網頁的最上方。

但是,加上 position: fixed; 之後,版面都會跑掉,該怎麼辦呢?

解決方法:

fixed 你必須自己設計出寬高來,否則就不會有實際寬高,所以必須再寫下方語法來搭配:

1
2
3
4
5
6
7
8
9
10
11
.header_top{
/*fixed在網頁最上方*/
position: fixed;
top: 0;
/*必須自己設計出寬高來,否則就不會有實際寬高*/
height: 28px;
width: 100%;
/*要加上背景色*/
background-color: #f6f6f6;
z-index: 100;
}
1
2
3
4
5
6
7
8
9
10
11
12
.header{
/*fixed在網頁最上方*/
position: fixed;
/*.header_top的高度=28px*/
top: 28px;
/*必須自己設計出寬高來,否則就不會有實際寬高*/
height: 50px;
width: 100%;
/*要加上背景色*/
background-color: #fff;
z-index: 100;
}

❗️ 為了避免banner被上方fixed的部分給遮住,先在<div class="header_banner">外面多包一層<div class="banner_frame">

html語法:

1
2
<div class="banner_frame">
<div class="header_banner">

接著在.banner_frame加上padding-top: 78px;.header_top.header的高度加起來是78px)

1
2
3
4
.banner_frame{
/*避免banner被上方fixed的部分給遮住*/
padding-top: 78px;
}

這樣就ok了!

我的問題

Q:

我想讓下拉選單的中線可以對齊它所屬的主選單(如上圖,現在看起來往左邊歪),我試著把下拉選單的定位點設定在每個選單上

1
2
3
.header_menu>li{
position: relative;
}

然後把下拉選單(.dropdown)設定left: 50%,結果下拉選單的寬度變得很小(如下圖紅色箭頭處)

1
2
3
4
5
6
7
8
.dropdown{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 5px;
}

請問老師這該怎麼調整呢?

A:
為了讓下拉選單的中線可以對齊它所屬的主選單,所以把下拉選單的定位點設定在每個選單上,語法如下:

.header_menu>li 要下相對定位語法

1
2
3
4
.header_menu>li{
float: left;
position: relative;
}

然後把下拉選單(.dropdown)設定如下:

  • .dropdown 寬度下 100% (撐滿父元素的寬度)
1
2
3
4
5
6
7
8
9
.dropdown{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 5px;
width: 100%;
}
  • .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。