Try   HackMD

網頁筆紀資源

Emmet 與 槪表

Emmet符號概表

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

元素置中方式

  • 放置中央總共有四種方式：
    • 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)

靈感

網站視覺配色概念與資源

Last changed by 
 
洪毓昇
0
172
Published on HackMD