---
tags: YunNET
---

網頁筆紀資源
===
## Emmet 與 槪表
> ### Emmet符號概表
> * 這些是通用於 HTML, CSS 的概念
> * 請參閱 [Emmet Cheet Sheet](https://docs.emmet.io/cheat-sheet/) 查看詳細Emmet用法
>
> |符號|項目|描述/說明|
> |-|-|-|
> | ><br>+<br>^ | 位階變動 | 標示下一個標籤的位階<br>>: 縮排<br>+: 並排<br>^: 反縮排
> | * | 乘法 | 將前面標籤或群組生成數個
> | $ | 變數 | 在使用乘法時的輸出加入計數
> | () | 群組 | 將多標籤合為一體
> | []<br>{} | 欄位 | []內資料會被放在標籤的屬性部分<br>{}內資料會被放在標籤的文字部分 |
> | .<br># | 特化屬性 | 因太常用而特化出的屬性<br>符號前為標籤，默認為div<br>符號後為屬性值，可連續使用<br>.: class屬性<br>#: id屬性 |

## 基礎HTML/CSS
### CSS 分開撰寫 - class&id概念
兩者在 CSS 裡面用途一樣 不過 id 需要獨一無二 ，在 JS 中也作為抓取那個元素的辨識方式，class 通常拿來放可以重複使用的 CSS， id 建議是留給程式開發/網頁規劃使用

### CSS padding margin概念
>HTML

<ul class="outer">
  <li class="inner">
    項目清單
  </li>
  <li class="inner">
    項目清單
  </li>
  <li class="inner">
    項目清單
  </li>
  <li class="inner">
    項目清單
  </li>
</ul>

>CSS

.outer{
  display:inline-block;
  border:solid 2px black;
  width:400px;
  height:300px;
}
.inner{
  display:block;
  border:solid 2px black;
  padding: 10px;
  padding-left:30px;
  padding-right:30px;
  
  margin-left:20px; 
  margin-right:50px;
  margin-top:25px;
}

### CSS定位方式
>HTML

<h3>CSS定位方式</h3>
<div class="static">Static會自動排列下來</div>
<div class="relative">Relative會自動排列下來 而且可以調整偏移(左邊離30px)</div>
<div class="absolute">absolute可以絕對定位</div>
<div class="fixed">fixed會固定在視窗特定位置</div>

>CSS

body{
  height:2000px;
}
div{
  border:solid 2px;
  width:200px;
  height:100px;
}
.static{
  position:static;
  left:30px;
}
.relative{
  position:relative;
  top:30px;
  left:30px;
}
.absolute{
  position:absolute;
  right:50px;
  top:50px;
}
.fixed{
  position:fixed;
  right:50px;
  top:200px;
}

### css 字體變化與span-在文章段落中製作變化
>HTML

<div class="fdemo_1">1.font-family字體的種類</div>
<div class="fdemo_2">2.font-size字體大小</div>
<div class="fdemo_3">3.字體顏色</div>
<div class="fdemo_4">4.字體粗細</div>
<div class="fdemo_5">5.letter-spacing字體的間距</div>
<div class="fdemo_6">6.字體的行距<br>.字體的行距<br>.字體的行距</div>

<p>如果你在用寬螢幕電腦看的話，你還是會覺得這個網頁很不成熟，為什麼？這個問題一直困擾我很久，<span class="title">直到有一天我才發現</span>，RWD的網站都會對內容區域的寬度設上限，加上「max-width: 1024px」，之後內容的區域寬度會被鎖定，但是會靠左邊排列，再加上「margin-left: auto;margin-right:auto;」之後，我們就能看到置中的效果了，在頁面中我們還有一個很重要的細節要注意，你會覺得背景色很刺眼，因為在我們一般的網頁中，很少會直接用#fff(純白色)作為背景色，因此我們將頁面的背景變更為「background-color: #fcfcfc」，微微的灰色讓畫面較為和諧</p>

>CSS

.fdemo_1{
  font-family: 微軟正黑體;
}
.fdemo_2{
  font-size: 30px;
}
.fdemo_3{
  color: blue;
}
.fdemo_4{
  font-family: 微軟正黑體;
  font-size: 30px;
  font-weight: 900;
  
}
.fdemo_5{
  letter-spacing: 10px;
}
.fdemo_6{
  line-height: 50px;
}

.title{
  font-size: 30px;
  color: red;
  font-family: 微軟正黑體;
  letter-spacing: 10px;
  line-height: 50px;
  font-weight: 900;
}

### Flex 的介紹
### [元素置中方式](https://codepen.io/yu_sheng/pen/oNLVNQM?editors=1100)
* 放置中央總共有四種方式：
* 1.使用 inline/inline-block 方式置中：用於文字 圖片或元素並列
* 2.使用 block 元素置中：調整 margin 一般 div 或元素預設是這種
* 3.使用絕對置中：需要很彈性的放位置（因為它可以調整%數方便）
* 4.使用 flex :最靈活

## 基礎 JS
### var 、 let 與 const
var 是全域變數，會汙染環境( window 上)
let 與 const 用來宣告區塊裡的變數
區塊 = { }
const 是唯獨變數，不能去做修改
但當 const 宣告成物件或是陣列時，可以被修改

const obj = {
    url: "https://xxx.com"
}
要用 Object.freeze(obj)

## 靈感
>網站視覺配色概念與資源
* 各種設計 Pinterest https://www.pinterest.com/

* 動態/介面設計 dribbble 搜尋daily ui https://dribbble.com/

* 高科技現代感網站 awwward http://www.awwwards.com/

* 色票查詢 http://colorpicker.com

* 配色資源: http://colorhunt.co/

* 網站配色 Adobe Kuler https://color.adobe.com/zh/

* 網站配色 Coolors https://coolors.co/

* 品牌網站配色 BrandColors https://brandcolors.net/