JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>johnny的網頁</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body><b>
      <span>▌</span>
      <a href="https://www.storm.mg/category/104">風生活</a>
      <a href="https://www.storm.mg/category/36291">學長姐說</a>
      <a href="https://www.storm.mg/life-category/s24260">職場</a>
      <a href="https://www.storm.mg/life-category/s24264">科技</a>
      <a href="https://www.storm.mg/life-category/s47030">汽車</a>
      <a href="https://www.storm.mg/life-category/s126963">求職必讀</a>
      <h1>電動車能取代油車嗎？從鋰電池原材料，到系統整合的七層動力電池系統可以得知！</h1>
      <p1>2023-02-22 14:21</p1>
      <img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2023/02/20/20230220-122437_U19741_M831069_5bf8.jpg?itok=oNaX3iyv" />
      <div>
        電動車從鋰電池原材料到系統整合，大致可分為七層動力電池系統。（圖／取自Pexels）
      </div>
      <p>當你看懂了電動車將稱王的市場訊號、對動力電池系統有了基礎理解之後，不管是想轉型或轉職，你會開始想：「這麼長的供應鏈，落點在哪裡對我最有利呢？」這就是我們今天的重點！我們立刻繼續開箱，解說從鋰電池原材料到系統整合的七層動力電池系統，以及我們看好哪些落點。</p>
      <h2>
        七層開箱電動車動力電池系統
      </h2>
      <p>
        人體系統彼此相生，既然電動車的手腳在電機、大腦在電控、心臟在電池，也就意味著三電彼此也有相生的關係，因此我們這裡的分類方式主要是為了讓你方便理解，有些會拆分成更少或更多，建議不需要花時間糾結在分幾層上，反正電池占電動車近一半的成本，是電動車中最關鍵的零組件，搞懂電池系統，就等於破解了電動車。
      </p>
      <h2>
        動力電池系統第一層：原材料及電池材料
      </h2>
      <p>
        動力電池與儲能電池（註一）都需要電池原材料作為基礎。原材料主要是礦區，電池材料指的是正極、負極、電解液、隔離膜，你可以回頭看《如何判斷電池技術大突破是世紀大騙局還是真革命？》一文，有各種材料與原理的完整說明。這裡基本上各家都已經有了各自的站位，競爭較不易，且上游的資本密集度很高，臺灣這些年傳統化工企業如台塑、長春、中油，到高技術門檻的應用材料企業如碩禾、明碁材、友達等積極往材料開發這個領域靠攏，不過都沒有取得全球關鍵站位。要想改變，恐怕得另闢蹊徑如開發固態電池、鈉電池等，假以時日才有機會改變競爭格局。
      </p>
      <h2>
        動力電池系統第二層：電池芯（Cell）
      </h2>
      <p>
        把這些電池材料組合在一起，就成為電池芯。一台特斯拉電動車大概有10,000顆電池芯，電池芯的性能決定了電池模組的性能，進而影響整個動力電池系統的性能，因此在進行設計時，負責裝配的整車廠或電池公司會依據該電動車需求去選擇電芯的材料及形狀。
      </p>
      <img src="https://image.cache.storm.mg/styles/smg-800xauto-er/s3/media/image/2023/02/20/20230220-122437_U19741_M831066_0d5d.jpg?itok=u9HTSc7L" />
      <div>
        （圖一）圓柱電池芯示意圖。（圖／綠學院提供）
      </div>
      <p>
       ...

CSS

body{
  padding: 17px;
}
img{
  width: 550px;
}

span{
  color: #00AEAE;
}

a{
  color: black;
  text-decoration: none;
}

h2 {
  color: red;
}

div{
  color: gray;
  font-size: 50%;
}

ol{
  background-color: #D0D0D0;
  padding: 20px;
}

a.aa{
  color: red;
  text-decoration: underline;
}