# HTML
## 標籤
### `<input>`
內建一個輸入框
### `<div>`
本身僅帶有display:black效果
[div縮放](https://www.796t.com/post/NnIwdzA=.html)
### `＜span>`
與div類似，但用於文字屬性時相當好用，因div會佔走整層寬度，而span僅會佔內文寬度
### `<section>`
[文章](https://vimsky.com/zh-tw/examples/usage/html-section-tag.html)
### `<nav>`
[範例](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_nav)
```
<!DOCTYPE html>
<html>
<body>
<h1>The nav element</h1>
<p>The nav element defines a set of navigation links:</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>
```
變成
```
<h1>The nav element</h1>
<p>The nav element defines a set of navigation links:</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
```
### `<header>`
#### tab選取
> tabindex 可增加/刪減 TAB選取
##### 寫outline 可更改選取框線，與border接近，但沒有體積
#### title
> 寫在html內可以使滑鼠指向時顯示描述
#### data-*
*為可自行取名
運用在JS屬性
#### 用於遊戲/網頁遊戲
`draggable`
```dropzone```
#### 快捷鍵 (錨點)
accesskey=" 要設置的快捷鍵"
使用ALT+設置的快捷鍵即可快速選取
#### aria-lable 無障礙
寫在內的lable內的內容與title一樣，會被朗讀程式背誦出來
> aria與lable字眼接與無障礙相關
#### 超出的橫條
overflow:hidden (會將超出的部分隱藏)
#### SVG
[介紹](https://pjchender.blogspot.com/2017/03/svg-viewport-viewbox-zoomdrag.html)
### UL
基礎設定
`list-style:`
### A連結/錨點
錨點由A連結 內容輸入#ID進行設定
[參考網址](https://blog.csdn.net/business122/article/details/7973638)
#### 去除底線
`text-decoration:none;`
#### 下畫線(底線) (用border製作)
[連結](https://www.itread01.com/content/1547909131.html)
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用span製作下劃線</title>
<style>
body {
padding: 0;
margin: 0;
font-family: "Microsoft Yahei";
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
}
/*清除浮動*/
.clearfix {
*zoom: 1;
}
.clearfix:before,.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfox:after {
clear: both;
}
.nav {
width: 600px;
}
.nav li {
float:left;
}
.nav a {
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 100px;
height: 50px;
color: #fff;
padding: 12px 5px;
background: #424a58;
text-decoration: none;
cursor: pointer;
}
.nav a.active>span , .nav a:hover>span {
padding-bottom: 8px;
border-bottom: 2px solid #fff;
}
</style>
</head>
<body>
<div>
<ul class="nav clearfix">
<li><a class="active"><span>套裝模板</span></a></li>
<li><a><span>標題</span></a></li>
<li><a><span>圖片</span></a></li>
<li><a><span>背景圖</span></a></li>
<li><a><span>卡片</span></a></li>
<li><a><span>分割線</span></a></li>
<li><a><span>關注和原文</span></a></li>
<li><a><span>名片</span></a></li>
<li><a><span>其他</span></a></li>
<li><a><span>貼紙</span></a></li>
<li><a><span>佈局</span></a></li>
<li><a><span>零件</span></a></li>
</ul>
</div>
</body>
</html>
```
### display 顯示方式
`display:block`
> 標籤將占滿整個橫列 如:DIV自帶
`display:none `
> 隱藏標籤
`display:inline`
> 僅佔有子層體積，無法定義寬高和使用padding
> 如:span
`display:inline-block`
> 兼具block與inline特性，可定義寬高且不會占滿整行
#### title icon
幫網頁標題欄title加上logo(icon)圖示
我們在瀏覽網站時，時常可以看到網頁的網址列上附有該品牌或是該公司企業的logo圖示，那麼該如何才能將icon加上去呢？
有兩個方法如下：
1.將圖片轉成ico格式，然後命名為favicon.ico，尺寸設16X16px，因為只是放在title上，占的範圍很小，所以圖檔不宜過大。
有不少將png、jpg等圖檔線上轉成ico的網站，可以直接將圖片上傳轉檔。
png轉ico：https://www.convertico.com/
原始圖片支援jpg、png、gif：http://tw.faviconico.org/
之後再將圖片放在網站的根目錄下即可。
第二個方法是在網頁的head裡放入
標題欄：
`< link rel="icon" href="/favicon.ico" type="image/x-icon" / >`
收藏夾：
`< link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" / >`
href裡可以放圖片的相對路徑或絕對路徑，所以不需放在網站的根目錄下，圖片名稱也不一定要取favicon.ico，可以自由命名。
例如：
```
< link rel="icon" href="images/logo.ico" type="image/x-icon" / >
< link rel="icon" href="https://www.webdesigns.com.tw/images/logo.ico" type="image/x-icon" / >
```
但還是建議使用ico檔案，因為相較於png、jpg等圖片，ico在瀏覽器的支援度更廣。
[link](https://www.webdesigns.com.tw/webdesign_favicon.asp)
## 圖片
#### [圖片大小設定](https://www.wibibi.com/info.php?tid=230)
## BEM
### 什麼是 BEM？
BEM 是一種 CSS class 命名的設計模式，將介面切割成許多獨立的區塊，以區塊（Block）、元素（Element）和修飾子（Modifier）來命名，優點是以元件觀念進行開發，具有重用性。 它擁有 OOCSS 的架構清楚的美好，也沒有 SMACSS 複雜或令人混淆的部份，因此 BEM 是一個很優秀的 CSS 架構指南。
[教學](https://cythilya.github.io/2018/05/22/bem/)
[BEM](https://ithelp.ithome.com.tw/articles/10160545)
## 裁切特效
`<img style="border-radius: 50%;" src="x.png" alt="圓形圖">`
[圓形 (內有進階寫法 如提示燈、名稱等](https://www.ibooktw.net/2019/04/19/%E7%94%A8css%E5%88%B6%E4%BD%9C%E5%9C%93%E5%BD%A2%E5%9C%96%E7%A4%BA%E5%A4%A7%E9%A0%AD%E8%B2%BC%E7%85%A7/)
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圓形圖示</title>
<style>
img {border-radius: 50%;}
.image_01 {
border-top-left-radius: 15%;
border-top-right-radius: 15%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
}
#image {
border-top-left-radius: 5%;
border-top-right-radius: 50%;
border-bottom-right-radius: 5%;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<img src="x.png" alt="圓形圖示">
<img class="image_01" src="x.png" alt="圓形圖示">
<img id="image" src="x.png" alt="圓形圖示">
</body>
</html>
```
呈現效果 :
## 按鈕類
### 單選按鈕
`<input type="radio"> `
[CDN文件](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio)
### 假文產生器
div內輸入 lorem
預設為30個單字，若輸入數字則會生成特定數字的單字
`<div class="">lorem(數字)</div>`
# CSS
## 選擇器
#### 特定class
選擇相同class名稱的第五個
`.class名稱:nth-child(5)`
選擇相同class名稱的最後一個
`.class名稱:last-child`
如果要同時選擇超過2個以上則用,隔斷
```
.class名稱:nth-child(5),
.class名稱:nth-child(6)
```
[連結](https://ithelp.ithome.com.tw/articles/10243699)
### 偽類
`.class名稱:hover ` 所有標籤皆可以使用
可用於鼠標指到後的效果
#### 僅用於超連結
.class名稱:visited 點擊後的超連結
```
a:link {color:red;}
a:visited{color:black}
```
> 意味著點擊前連結為紅色，點擊後連結改為黑色
##### 超連結正在被點擊時更改顏色
```
a:active {
color:green
}
```
#### 當A被hover時 B移動
`.class a:hover b`
當carousel-info的a連結被hover時 span transform:translateX(-4px)
## 圖片
### 圖片大小
1.`background-size:`
2.設定寬或高其中一個，如果兩個都設定的話會失真 (僅限IMG)
### background 背景系列
#### 切到最少的一個邊
`background-size: contain`
#### 背景圖不重複可以用
cover主要用於背景圖小於所在的內容，而背景圖又不適合使用repeat，此時就可以採用cover的方式，使背景圖放大至內容的大小，但此方法容易使背景圖因放大而失真。
`background-size :cover`
> 如果圖片放大後位置不正可以補`background-position:center`使圖片呈現正中間
[background-size 更多](https://www.kip.com.tw/modules/news/article.php?storyid=35)
#### 圖片位置至(左、中、右)
`background-position:center;`
> center:可改right
> 預設是left 不必設定
#### 背景圖片不重複
`background-repeat:no-repeat`
> no-repeat全部不重複，可改y-repeat、x-repeat，意思為X、Y軸不重複
#### 附著(視差滾動)
#### 跟著滾軸移動
`background-attachment:fixed;`
[範例](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size)
### 圖層
[`z-index`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index)
### 橫向排列
[教學](https://andy6804tw.github.io/2017/12/22/css-image/#%E7%A8%8B%E5%BC%8F%E7%A2%BC)
### display系列
inline
block
inline- :
特定: 不換行，使其內容在同一橫列上
[連結](https://ytclion.medium.com/css%E6%95%99%E5%AD%B8-%E9%97%9C%E6%96%BCdisplay-inline-inline-block-block%E7%9A%84%E5%B7%AE%E5%88%A5-1034f38eda82)
### 等比縮放
#### padding撐法:
> 一張圖片寬度為 1900px、高度 1000px。
>
> 高度 / 寬度 * 100 = 原始寬高比
>
> 1000 / 1900 * 100 = 52.6315%
>
> 沒有寬度，沒有高度，純粹用 padding 撐起整個圖片。
>
> 以寬度為基準，隨著銀幕比例調整高度，代表比例為 52.63%。
[padding方式](https://uni.workxplay.net/t/aspect-ratio/83)
#### picture自動切換
用換圖片方式來維持圖片大小
### 星星
#### HTML
```
<form>
<div class="rating-lists"><label for="comment" class="title"></label></div>
</form>
```
#### JS
[原文網址](https://plugins.krajee.com/star-rating)
[網址](https://blog.csdn.net/casablancaGET/article/details/100150435)
### 圖片寬高比計算
設計稿為1920px img高為600px
寬高比: (600/1920) *100% = 31.25"vw"
> 寬1920=100vw 以1920為底 因此單位換算為vw
## flex排版
### 版型位置
#### 先選擇要移動的軸線，再選擇指令
以網頁來看的上下，也就是X軸
`align-items:` (items 管理容器位置)
`align-content` (管理容器內的物品 詳情看樓下)
以網頁來看的左右，相當於Y軸
`justify-content:`
#### 以上兩種起頭，後面可銜接
`start:`起點 通常為區塊的左、上
`center:` 顧名思義中間
`end:` 終點 右、下
#### 範例圖請看青蛙位置
`space-between:` 分散在畫面 (如有三個則為左邊底 正中間 右邊底)
`space-around` 有一定的留白，平均分散在畫面上
`space-evenly` 左右與中間距離空隙是相等的
`stretch:` 每一行都被拉伸以填滿容器。
### 內容位置(主軸方向)
#### 起頭 :`flex-direction:`
#### 後面可以接
`row` 預設值，與文字敘述順序一致
`row-reverse` 與文字敘述順序相反
`column` 從上到下，正敘排列
`column-reverse` 從下到上，倒敘排列
[網址]
https://ithelp.ithome.com.tw/articles/10242204
### 個體順序
`order: 數字`
原本
更改 yellow pund順序後:
### 防止擁擠、擠在一起、flex換行
`flex-wrap:` 可接
`nowrap:` 死不換行 所有東西擠在同一行
`wrap` 自動換行切行
`wrap-reverse` 逆序 自動換行
### align-content概念
#### 依下圖，此時 align-items = 荷葉 ，align-content = 青蛙
輸入 `align-content:flex-start` 時 則是下指令 內容(青蛙): flex-start (在起始點
(上方))
### 縮寫
#### flex-direction 與 flex-wrap 可縮寫為
`flex-flow :`
flex = flex-direction (內容順序、排序、主軸方向)
flow = flex-wrap (換行系統)
## 文字
### font指令集
#### 會影響到子層
`font-size:` 字體大小 最小值12
`font-weight` 字重 文字粗細
> `font-weight:bold` 自動改為粗體
> `font-weight:lighter` 自動改為系體
> `font-weight:normal` 預設值
`font-style:` 將文字改為斜體字
> `font-style:oblique` 將文字改為斜體
> `font-style:inherit` 繼承父層
> `font-style:initial` 使文字初始化
> `font-style:unset` 取消文字設定
`font-family` 字形
[google字體](https://fonts.google.com/)
`letter-spacing:(數字)px` 文字間距 字距
`line-height` 行高
> 若僅有輸入數字則以預設值乘以數字，也可以使用px
> px 較少用
> 偷吃步:line-height調整至div高度 (醜)
`text-align:`文字水平
> `text-align:center` 文字水平至中
> `text-align:justify` 分散對齊 使多行文字排列較為整齊
`text-indent:(數字)px` 縮排與凸排
> 正數 = 縮排
> 負數 = 凸排
`.class名稱:first-letter`選擇第一個文字
> 可以配合其他文字CSS進行自首改造
#### 按鈕至中
創建一個，container 並且寫一個水平至中的css 增加在class裡
```
<div class="container my-5 horizontal-center">
<button type="button" class="btn btn-primary">botton</button>
</div>
```
#### 水平至中
`
### 選到第一個文字的樣式
[wibi](https://www.wibibi.com/info.php?tid=%E5%A6%82%E4%BD%95%E7%94%A8_CSS_%E9%81%B8%E6%93%87%E6%96%87%E7%AB%A0%E7%AC%AC%E4%B8%80%E5%80%8B%E5%AD%97%E6%AF%8D%E6%88%96%E6%96%87%E5%AD%97)
#### 文字排列方式(斷行規則)
word-break
## SCSS
#### Nesting 嵌套寫法
```
footer {
.footer-menu {
margin: 0;
padding: 0;
list-style-type: none;
}
}
```
```
footer .footer-menu .footer-menu-title {
margin-bottom: 10px;
}
```
### 超連結
text-decoration:
[MDN網址](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration)
## 排版系統
### float
float 漂浮起，使下方DIV可在同一層
#### clear 清除"自己以上(不含自己)的float效果"
### position
[relative 與 absolute](https://ithelp.ithome.com.tw/articles/10212202)
#### relative 不脫離排版系統 / absolute 會脫離排版系統
> absolute的定位是根據向外尋找有relative的父層，因此如果需要使用多個定位，則在需要被定位的父層下relative，子層下absolute，這樣可以讓定位不衝突，不會因為移動一個定位，其他連帶受到影響
#### sticky (隨滾輪做移動)
`position:sticky`
### Flex
#### justify-content 十二欄位分布位置
`justify-content` 主要以主軸線來排版，現在有紅、藍、黃三個區塊 包覆在灰色區塊內，設有相同的寬度。
以下是將各種 `justify-content` 的屬性填入灰色區塊內的效果。
##### justify-content: flex-start 預設值，對齊主軸線最前端
##### justify-content: flex-end 對齊主軸線最終端
##### justify-content: center 對齊主軸線中央
##### justify-content: space-around 平均分配寬度和間距
##### justify-content: space-between 平均分配寬度，第一項和最後一項貼齊邊緣
[屬性介紹](https://w3c.hexschool.com/flexbox/4a029043)
#### 橫向排列
`display:flex`
#### [相關資訊](https://ithelp.ithome.com.tw/articles/10211068)
#### [圖解版](https://wcc723.github.io/css/2017/07/21/css-flex/)
### VH與VW運用
[連結](https://pjchender.blogspot.com/2015/04/css-3vh-vw.html)
#### div水平至中 垂直至中 水平垂直至中
`margin: 0 auto;`
> 水平至中
在父層有flex屬性的前提下在子層下
`margin:auto` 會自動至中排列
將除了所選目標以外通通推至特定地點
`margin-right :auto `
> 給予想保留的margin-right 就會將剩下其他的推往margin-"指定地點"
> margin-right範例
> 紅色被推到右邊
## 美觀
### hover
RWD跳選單 :
[hover](https://ithelp.ithome.com.tw/articles/10238434)
按鈕效果 :
#### 透明度
`opacity:數值(0.5變淡，1.5變深);`
#### 亮度
`-webkit-filter:brightness(0.5變淡，1.5變深);`
> 亮度會連border邊框也跟著變亮
#### 漸變
```transition: 數字單位```
> 在指定時間內完成CSS動畫轉換
> 僅有數值可以進行漸變，文字無法漸變
## 輪播(幻燈片)
carousel
## 錨點動畫
`scroll-behavior:`
## CSS圖形大全
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。
Square(正方形)
40个纯CSS绘制的圖形0
#square {
width: 100px;
height: 100px;
background: red;
}
Rectangle(矩形)
40个纯CSS绘制的图形1
#rectangle {
width: 200px;
height: 100px;
background: red;
}
Circle(圆形)
40个纯CSS绘制的图形2
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
Oval(椭圆形)
40个纯CSS绘制的图形3
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
Triangle Up(向上的三角形)
40个纯CSS绘制的图形4
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Triangle Down(向下)
40个纯CSS绘制的图形5
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
Triangle Left(向左)
40个纯CSS绘制的图形6
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
Triangle Right(向右)
40个纯CSS绘制的图形7
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
Triangle Top Left(左上)
40个纯CSS绘制的图形8
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
Triangle Top Right(右上)
40个纯CSS绘制的图形9
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
Triangle Bottom Left(左下)
40个纯CSS绘制的图形10
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
Triangle Bottom Right(右下)
40个纯CSS绘制的图形11
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
Curved Tail Arrow(弯尾箭头)
40个纯CSS绘制的图形12
40个纯CSS绘制的图形13
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
Trapezoid(梯形)
40个纯CSS绘制的图形14
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
Parallelogram(平行四边形)
40个纯CSS绘制的图形15
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
Star (6-points)(六角星)
40个纯CSS绘制的图形16
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
Star (5-points)(五角星)
40个纯CSS绘制的图形17
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
Pentagon(五边形)
40个纯CSS绘制的图形18
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
Hexagon(六边形)
40个纯CSS绘制的图形19
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
Octagon(八边形)
40个纯CSS绘制的图形20
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: 0;
}
Heart(心形)
40个纯CSS绘制的图形21
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
Infinity(无限符图形)
40个纯CSS绘制的图形22
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Diamond Square(菱形)
40个纯CSS绘制的图形23
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
Diamond Shield（钻石盾牌）
40个纯CSS绘制的图形24
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
Diamond Narrow
40个纯CSS绘制的图形25
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
Cut Diamond(砖石形)
40个纯CSS绘制的图形26
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
Egg(鸡蛋)
40个纯CSS绘制的图形27
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Pac-Man(吃豆人)
40个纯CSS绘制的图形28
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
Talk Bubble（聊天框）
40个纯CSS绘制的图形29
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
12 Point Burst（爆炸形状）
40个纯CSS绘制的图形30
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
Yin Yang(阴阳八卦)
40个纯CSS绘制的图形31
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
Badge Ribbon(徽章丝带)
40个纯CSS绘制的图形32
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
Space Invader（太空入侵者）
40个纯CSS绘制的图形33
#space-invader{
box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}
TV Screen（电视屏幕）
40个纯CSS绘制的图形34
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
Chevron（雪佛龙）
40个纯CSS绘制的图形35
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
Magnifying Glass（放大镜）
40个纯CSS绘制的图形36
#magnifying-glass{
font-size: 10em; /* This controls the size. */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass::before{
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
Facebook Icon（Facebook图标）
40个纯CSS绘制的图形37
#facebook-icon {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0;
}
#facebook-icon::before {
content: "/20";
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
}
#facebook-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
Cone(圆锥形)
40个纯CSS绘制的图形38
#cone {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Moon(月亮)
40个纯CSS绘制的图形39
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
Cross（十字架）
40个纯CSS绘制的图形40
#cross {
background: red;
height: 100px;
position: relative;
width: 20px;
}
#cross:after {
background: red;
content: "";
height: 20px;
left: -40px;
position: absolute;
top: 40px;
width: 100px;
}
以上就是纯CSS绘制的各种图形，感受到CSS的强大了吧。
[圖形網站](https://www.webhek.com/post/40-css-shapes.html)
# JS
## 定義值
定義一個 目標名稱 並賦予它的值(由選擇器)
`const 目標名稱 = documment.querySelector`
例如:
> 定義一個常數 MY_FAV 並賦予它的值為7
`const MY_FAV = 7;`
## 元素
### Element運用 (名詞)
#### 監聽事件`名稱Element.addEventLiatener`
> EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document
[監聽事件寫法](https://hsuchihting.github.io/javascript/20200803/2079929796/)
[連結](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)
[事件處理電子書](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/event.html)
#### 讀寫更改 `名稱Element.classList`
> 如果类属性未设置或为空，那么 elementClasses.length 返回 0。
> <font color="#f00">element.classList 本身是只读</font>，但是你可以使用 add() 和 remove() 方法修改它。
##### // 使用 classList API 移除、添加类值
```
div.classList.remove("foo");
div.classList.add("anotherclass");
```
[更多使用方法](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList)
#### floor
尋找最接近小於等於的整數，部分時候可用於整數輸出
### 關於數字
#### parseInt()
> ➤ parseInt()
> 語法：
> parseInt(string, radix)
> parseInt() 將字串轉換為以十進位表示的整數。parseInt() 接受兩個參數。
> string
> 欲轉換的值。若第一個參數值的類型不是 String，會先使用 ToString 轉換成字串。
> radix
> 代表進位系統。依照實作不同可能有不同的預設值，因此建議設定該值，避免造成錯誤。
> parseInt() 會忽略前後空白，並根據 radix 解析第一個參數，當遇到無法解析的字元，會忽略該字元及其後的所有字元，停止解析於此字元，並回傳目前為止的結果。
> 若第一個字元就無法被解析，會回傳 NaN。
範例:
var 變數 = parseint(物件元素名稱,值)
var 變數 = parseint(物件名稱Element,value)
parseFloat
Number
#### console.log
顯示定義出來以後的結果
[網站](https://vimsky.com/zh-tw/examples/usage/javascript-console-log-with-examples.html)
#### 較簡單的點擊事件
`class名稱.onclick = funtion() {}`
### 透過JS切換CSS事件
名稱Element.classList.remove
#### ClassList(切換CSS)
定義和用法
> 該屬性用於在元素中添加，移除及切換CSS 類。
> classList 屬性是只讀的，但你可以使用add() 和remove() 方法修改它。
#### getElementById(查找特定元素)
> 直译一下，就是通过元素的ID查找到该元素。也就是查找到ID名为“p1”，从而来操作这个元素。
>
> 比如：
> `<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>`
>
> 标签`<p>`是个段元素，它的ID是p1，<font color="#f00">getElementById(“p1”)</font>，就是找到这个段元素。后> 面的.style.color="blue";就是操作它了，更改颜色为蓝色。
##### remove (移除)
清除('目標')
`名稱Elements.classList.remove('目標');`
#### 資料型態
`typeof()` 可查詢資料型態
> ''內=字串
> 無''=數字
### for迴圈中var 與 let
var 全域，在出現後一直到全段程式碼結束為止皆存在
let 僅在單個行列內生效，解決會被var影響的問題。
### 運算方式
#### 算數運算子
| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text | Text | Text |
#### 復合運算子
| 名稱 | 簡化(程式寫法) | 代表含意 |
| -------- | -------- | -------- |
| 賦值 |x = y |x = y
加法賦值 | x += y |x = x + y
減法賦值 |x -= y |x = x - y
乘法賦值 |x *= y |x = x * y
除法賦值 |x /= y |x = x / y
餘數賦值 |x %= y |x = x % y
指數賦值 |x **= y |x = x ** y
左移賦值 |x <<= y |x = x << y
右移賦值 |x >>= y |x = x >> y
無號右移賦值 |x >>>= y |x = x >>> y
位元 AND 賦值 |x &= y |x = x & y
位元 XOR 賦值 |x ^= y |x = x ^ y
位元 OR 賦值 |x |= y |x = x | y |
#### 平方計算
`要運算的名稱 ** 2;`
```
let x = 2;
console.log(Math.pow(x, 2)); // 4
// 等同於
console.log(x * x); // 4
```
### 四捨五入
#### 到小數點(位)
在console.log(輸出值)前一行輸入 `輸出值 = 輸出值.toFixed(要的小數位);`
#### 提醒視窗
```
名稱Element.addEeventListener('click',function () {
alert('提醒內容');
});
```
#### 判斷符號
#### innerHTML
JS穿插字串
# 常忘問題
#### [A連結換顏色](https://www.wibibi.com/info.php?tid=382)
#### div置中
`margin: 0 auto; `
#### 圖片定位
用absolute(脫離排版)比較方便
#### url、rel、href、src的區別
> （1）首先，url與rel、href、src性質不同的是url是屬性值，
> rel、href、src是屬性，
> 並且url是href、src這兩個的屬性值。
>
> （2）url是統一資源定位符，是對可以從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示。
>
> （3）網際網路上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。
>
> （4）基本url包括模式(或稱協議)、伺服器名稱(或IP位址)、路徑和文件名。如「協議://授權、路徑?查詢」。
>
> （5）完整的、帶有授權部分的普通統一資源標誌符語法看上去如下：協議://用戶名:密碼@子域名.域名.頂級域名:埠號/目錄/文件名.文件後綴?參數=值#標誌
>
> （6）rel為屬性。用來定義連接的文件和HTML文檔之間的關係。
>
> （7）href為超文本引用。href屬性的值可以是任何有效文檔的相對或絕對url，包括片段標識符和JavaScript代碼段。
>
> 標籤的href屬性用於指定超連結目標的url。如果用戶選擇了標籤中的內容，那麼瀏覽器會嘗試檢索並顯示href 屬性指定的URL所表示的文檔，或者執行JavaScript表達式、方法和函數的列表。
>
> 換句話說href就是用來建立當前元素和文檔之間的連接。
>
> （8）src為屬性。一般指的是引用外部文件的路徑。
>
> `比如：<img>圖片的路徑、<script>腳本文件的位置。`
原文網址：https://kknews.cc/code/5xg4k26.html
#### Html綁JS的funtion
http://www.w3big.com/try/try.php?filename=tryjsref_element_classlist_add
#### 陣列
以此圖為例 畫面中
`(tagElements[i]) = [tag1,tag2,tag3]`
#### 爆版出現滾軸
解決方式
1.calc ()
2.box-sizing:border-box (自動減去padding多出的體積)
二擇一
#### 區分background-img與html img
htmlimg 因無法持續進行朝狀結構，因此圖片上無法增加文字
> logo通常使用html img 因為不會裁切到
background-img 附加文字等說明則用css的background-img
> background-img會裁到圖片
### 圖片與文字重疊 分兩個DIV
由三個DIV為主
jumbotron(最外層)包覆div-img 與 div-content
```
<div class="jumbotron">
<div class="jumbotron-img"></div>
<div class="jumbotron-content"></div>
</div>
```
jumbotron設置最大範圍大小，且設定position:relative 方便之後圖片定位以外框jumbotron為中心
圖片jumbotron-img 設定position:absolute 以父層設定的reletive為基準點，並使用z-index將圖片設置為底層
> 如果有需要，記得使用background-size:cover使圖片顯示更佳完整;
內容文字打上去，並附上定位position、display等即可，如果可以，記得再使用一個父層框住全部內容，使其更便利移動
最後附上完整的html與css
```
.banner-row {
width: 100%;
height: 31.25vw;
position: relative;
}
.jumbotron {
max-width: calc(1600px + 10%);
height: 100%;
position: relative;
margin: 0px auto;
padding: 0px 5%;
}
.jumbotron-img {
/* 因為上面jumbotron的max-width+10%會超過1600 且圖片不吃padding，所以這邊-10% */
width: 90%;
height: 100%;
position: absolute;
z-index: -1;
background-image: url(../img/1400.png);
background-size: cover;
}
.jumbotron-content {
width: 88%;
height: 100%;
display: flex;
justify-content: flex-end;
margin: 0 auto;
}
.jumbotron-block {
width: 520px;
margin-top: 60px;
}
.content-block h1 {
margin: 10px 0px 0px;
padding: 0px 0px 3px;
font-size: 34px;
font-weight: 500;
line-height: 40px;
}
.new {
margin: 3px 0px;
padding: 3px 14px 8px;
font-weight: 600;
background-color: #ffb900;
}
.now-buy {
margin-top: 12px;
padding-top: 12px;
}
.content-block a {
max-width: 123.13px;
margin: 12px 0px 0px;
padding: 8px 20px;
color: white;
background-color: #000000;
}
.now-buy a {
padding: 8px 20px;
color:#ffffff;
background-color:black;
}
```
# 建議習慣
#### Html
使用一個大的div包住小的內容，使其排版變得更容易
<div class:123>
#### CSS
開場白:
```
* {
box-sizing: border-box;
}
body {
margin: 0;
}
```
# 框架/套件
## Bootstrap 排版
[版型對照表](https://getbootstrap.com/docs/4.0/layout/grid/)
[5.0中文版](https://bootstrap5.hexschool.com/)
### 快速生成版面配置(排版)
padding: 簡寫p
配合想要的座標
水平軸:y
垂直軸:x
可組合成想要的效果
#### **最多到數字5
`例:py-5 = padding 水平y軸 5 = 上下推5px;`
### 對齊方式
#### ** 記得先把要同一行的div成組(會將兩行的div變成同一行)
`<div class="input-group"> 要同一行的div </div>`
[網址](https://www.796t.com/post/YWk2c2k=.html)
#### 至左對齊
`<div class="justify-content-start"></div>`
[更多](https://campus-xoops.tn.edu.tw/modules/tad_book3/html.php?tbdsn=939)
#### 至右對齊
`class="text-right"`
#### 至中對齊(用於Col排版)
方法1 :
`在<class="row">內增加一個mx-auto名稱` (不行的時候就加在col裡面)
[更多資訊](https://vocus.cc/article/5e377a5bfd8978000192e22f)
方法2 :
`justify-content-center`
[方法](https://qastack.cn/programming/18672452/left-align-and-right-align-within-div-in-bootstrap)
[對齊指令集](https://andy6804tw.github.io/2018/01/06/bootstrap-tutorial(1)/)
### 線格原理
[網站](https://wcc723.github.io/development/2020/10/10/bootstrap-5-grid-whats-new/)
## 表格
#### 表格文字至中
`class="text-center"`
[文章](https://blog.csdn.net/Peng_Hong_fu/article/details/70662979)
要在表單最後增加按鈕則記得
1.最上方標題欄新增一個空欄 (用於延長標題長度)
2.按鈕新增時需一併新增td (內容欄位) 以免爆版
#### **記得新增td
## 文字
[文字顏色](https://www.runoob.com/bootstrap4/bootstrap4-typography.html)
## fontawesome 快速生成圖標
[6.0版](https://fontawesome.com/v6.0)
## 版面
#### 滿版
`class="jumbotron"`
jumbotron 大版面
[滿版](https://fenturechance7.pixnet.net/blog/post/61759050-bootstrap%EF%BC%8C%E6%BB%BF%E7%89%88%E9%A0%81%E9%9D%A2%EF%BC%8C%E6%AE%B5%E8%90%BD%E6%A8%99%E9%A1%8C%EF%BC%8C%E5%BC%B7%E8%AA%BF%E6%AE%B5%E8%90%BD%EF%BC%8Cwel)
## 圖片
#### 圖片滿版(滿邊框)
[網址](https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/bs-%E9%81%8B%E7%94%A8-bootstrap-%E5%8F%8A%E7%B6%B2%E6%A0%BC%E7%9A%84%E5%AF%A6%E4%BE%8B-dc2611d7f01f)
## 身障人士
#### `sr-only`
可以使特定文字僅被閱讀器朗讀出，而不影響普通使用者閱讀
[介紹](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/27690/)
## NAV
#### 漢堡標製作
```
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#要開的ul父層divID" >
<span class="navbar-toggler-icon"></span>
</button>
```
> 介紹
>
> `data-toggle="collapse"`
> data-toggle 選單呈現方式
> collapse 掉落的，向下
`collapse：無論任何螢幕大小，你都不會看到有選單在頂部。`
#### 直列選單
`nav-collapse：當螢幕變小時，選單會改為直行顯示。`
[選單教學](https://ithelp.ithome.com.tw/articles/10242040)
## footer
[MDB範本](https://mdbootstrap.com/docs/standard/navigation/footer/)
## 網頁載入速度
#### 閱讀到對應區塊才加載圖片
`loading="lazy"`
## aria
[介紹](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=zh-tw)
### 陣列 (array)
例:
array = [1,2,3,4,5]
console.log = [1,2,3,4,5]
#### 陣列新增
array[5] = 6
console.log = [1,2,3,4,5,6]
#### 修改陣列
array[4] = 6
console.log = [1,2,3,4,6]
#### 尾數增加一個新的值
array.push(6)
console.log = [1,2,3,4,5,6
#### 查詢陣列
console.log(array.length)
### for 迴圈
例
for (var i = 0 ; i < 10 , i++){}
> 初始值var i = 0
> 條件 i < 10
> 執行 {}內的要求
> I++ = I+1
>
> 迴圈會持續循環直至條件不滿足為止。
#### forEach
每一個都會跑的迴圈，相較for迴圈可少定義一些內容，但是較有侷限性
```
btns.forEach((btn,index) => {
btn.onclick = function () {
clearAllactive()
btns[index].classList.add('active')
contents[index].classList.add('active')
}
});
function clearAllactive() {
btns.forEach((btn,index) => {
btns[index].classList.remove('active');
contents[index].classList.remove('active');
})
};
```
> forEach有兩種寫法 一種是箭頭函式(如範例)
> 而另一種為舊有的`(function(element,index))`
```
// btns.forEach(function(btn,index) {
// btn.onclick = function () {
// clearAllactive()
// btns[index].classList.add('active')
// contents[index].classList.add('active')
// }
// });
// function clearAllactive() {
// btns.forEach(function(btn,index) {
// btns[index].classList.remove('active');
// contents[index].classList.remove('active');
// })
// };
```
### object 串接卡片樣板
寫好html 與 css 後 使用JS樣板字串
串接樣板替代內容
JS串接範例
var 變數 = document.querySelector('.被串接卡片的父層')
變數.innerHTML = `<div class="card">
<div class="img">
<img src="${Justin.avatar}" alt="">
</div>
<div class="info">
<p>年紀:${Justin.age}</p>
<p>性別${Justin.gender}</p>
<p>身高:${Justin.height}<p>
<p>體重:${Justin.weight}</p>
</div>
</div>`
Sign in with Wallet
Connect another wallet