前端 + CSS 樣式 + 模板 +

CSS 樣式彙整-前端筆記

更新日期：2023/10/03

在學期間初學網頁設計整理的語法/好用工具

css reset

https://meyerweb.com/eric/tools/css/reset/

css 優先順序

https://www.oxxostudio.tw/articles/201405/css-specificity.html

Codepen 線上編輯器:

https://codepen.io/mrwang01/

假圖假字圖片

假字、假圖產生器整理

https://fakeimg.pl/

1
2
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="https://fakeimg.pl/寬x高/顏色（HEX 色碼）,亮度/黑字,255">

實際應用：

模板的部分，可自行搜尋相關 Vscode 擴充套件

HTML 模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="index.css">
  //需創立 index.css
</head>
  <body> 
     <div class="style">    
         <h1>我是區塊元素</h1>

     </div>
  
  </body>
    <script  src="index.js"></script>
  //需創立 index.js
</script>
</html>

CSS模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
  font-family: "Noto Sans TC";
}


body {
  background-color: red;
}

html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

字體單位設定

參考文章：一次搞懂 CSS 字體單位：px、em、rem 和 %

（作者還有很多實用前端技術文章）

px : 絕對單位固定 pixel
em : 相對單位只跟根元素相乘自己x祖先(或預設)
rem: 相對單位與該父元素相乘自己x老爸x老爸的老爸

overflow

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


  overflow: auto;
  //自動捲軸
  //如果要顯示超出內容，，可以加上 title Attribute
  
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  //只顯示三行
  box-sizing:border-box;
  

border-radius:

border-radius: 左上右上右下左下 ;

Html iframe

frameborder=“0” ──不顯示邊框 frameborder=“1” ──要顯示邊框

scrolling=“no” ──代表不顯示 scrolling=“auto” ──則代表根據網頁大小自動顯示。

SVG Icons

編輯模式可查看原始程式碼

Open source free SVG icons

Icon to Font

IcoMoon──將icon轉成Font的平台

https://icomoon.io/app/#/select

Button

1.基本按鈕樣式

2.完美的按鈕並不存ㄗ…

button（單純按鈕）、reset（清空表單）、submit（送出表單）

1
2
3
4
5
6
7
<input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式">

input{
border:0;
color:#fff;
background-color:#003C9D;
border-radius:10px;}

大小寫轉換

1
2
3
<p style="text-transform:uppercase;">Ework Design</p>
<p style="text-transform:lowercase;">Ework Design</p>
<p style="text-transform:capitalize;">ework design</p>

< dl > < dt > < dd >

1
2
3
4
5
6
<dl>
　<dt>項目標題一</dt>
　<dd>這裡是項目敘述一 ...</dd>
　<dt>項目標題二</dt>
　<dd>這裡是項目敘述二 ...</dd>
</dl>

垂直置中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
1. 
display:flex;
align-items:center;(垂直置中) 
justify-content:center;(水平置中)

2. 
display:table-cell;
/*假表格*/


3.
transform:translateY(-50%);
/*子元素加 position:relative*/
/*CSS3位移*/

4.

calc 動態計算(算數學)

課堂老師提起的

參考文章：

https://www.oxxostudio.tw/articles/201408/css-vertical-align.html

https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

Input 美化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


 input[type="text"]
{
  padding:9px 35px; 
  border:3px black solid;
  cursor:pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

flexbox

詳細原理：圖解：CSS Flex 屬性一點也不難

justify-content 主軸對齊主軸線預設左到右

圖片參考：

CSS3的flexbox版面配置－flex container(容器)可用的屬性

錨點偽類

以:為開頭，方便精準控制

1
2
hover 要在 link visted 之後
active 要在 hover之後

-child

first-child：第一個子元素
last-child：最後一個子元素
nth-child(數字)：第幾個子元素
nth-child(2n)：挑出偶數的元素(2的倍數)
nth-child(2n+1)：挑出奇數的元素
nth-last-child(數字)：從後面數來第幾個子元素
only-child：只有一個子元素

p>span : <p> 中的第一個 <span>

其他變化一樣規則

學習資源: Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)

偽元素 Pseudo-elements

::before ::after

e.g 滑鼠滑過(hover)改變顏色可用

1
2
3
 .xxx:hover::before{
 background-color:#7f7f7f;
 }

詳細參數設定： CSS 偽元素 ( before 與 after )

Hover

~~圖床不見了 imgur 上傳的 mp4~~

~~https://i.imgur.com/CRfi2St.mp4~~

按鈕 hover 樣式：

用 pug sass 製作的按鈕範例，系上學長製作的範例

https://codepen.io/mrwang01/pen/VRaWvM

偽元素+hover+animation 極致應用:

https://codepen.io/argyleink/pen/poEjvpd

calc() 數值運算

calc() 用來定位該元素

1
2
width: calc(50% + 8px)
/* 50% 的寬度 + 8px */

置中方式之一

1
2
3
4
.text {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);

但是記得要加上或扣除 border、padding 的部分 ~~算數學~~

RWD-Tablet

後台電商購物清單簡潔的表單設計 https://codepen.io/AllThingsSmitty/pen/MyqmdM
多樣商品列表清單 https://codepen.io/pumii/pen/WNxvNGg

客製化 web fonts icon

實習期間修改 bootstrap 模版發現到的東西 https://icomoon.io/app/#/select 資料來源：自己做web fonts icons

圖片輪播 Carousel

bootstrap 元件

https://bootstrap5.hexschool.com/docs/5.0/components/carousel/

jQuery - Owl Carousel

教學文章： https://ithelp.ithome.com.tw/articles/10247358

基本款： https://codepen.io/pumii/pen/yLJeZvg

好看的輪播圖片樣式： https://codepen.io/fadzrinmadu/pen/RwryOVN

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
  loop: true, // 循環播放
  margin: 10, // 外距 10px
  nav: true, // 顯示點點
  
responsive: {
    0: {
      items: 1 // 螢幕大小為 0~600 顯示 1 個項目
    },
    600: {
      items: 3 // 螢幕大小為 600~1000 顯示 3 個項目
    },
    1000: {
      items: 5 // 螢幕大小為 1000 以上 顯示 5 個項目
    }
  }

陰影 box-shadow

好看的陰影

https://codepen.io/sdthornton/pen/wBZdXq

陰影做動畫酷炫的功能實用性未知

https://ithelp.ithome.com.tw/articles/10220686