jQuery 最終作業-重點整理

Posted on In

這一篇是記錄在寫 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。