make sure you configure your 'user.name' and 'user.email' in git
開啟終端機輸入以下指令
config --global user.name "你git上面的名稱" config --global user.email 你git註冊的mail
config --global user.name "你git上面的名稱" config --global user.email 你git註冊的mail
<div class="container"></div> .container{ display: flex; }2.外層容器屬性
justify-content: center; justify-content: flex-start; justify-content: flex-end; justify-content: space-between;左右"不"留白等距 justify-content: space-around; 左右留白等距2-2 主軸方向 flex-direction
flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;2-3 主軸換行 flex-wrap
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;2-4 交錯線 align-items
常用如下更多請看下方參考資料 align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;補充1.容器內容分離,容器僅負責定位
*{ box-sizing: border-box; } *,*::before,*::after { box-sizing: border-box; }補充3.如果為顯示類似購物車,可多一個col div來當容器
.col-1{ width:calc(100%/12); padding-left:10px; padding-right:10px; } .col-2{ width:calc(100%/12*2); padding-left:10px; padding-right:10px; } .col-12{ width: 100%; padding-left:10px; padding-right:10px; }補充4.變數共用
:root { --text-green: #57A203; } .cgreen { color: var(--text-green); }補充5.手機板禁用X軸(下方左右卷軸),設定了固定的width就會產生此問題
1.如果父元素比較寬時,保持既有寬度 2.如果父元素比較窄時,依父元素寬度自動調整補充7.Flex依比例調整寬度,下為左占2右邊占3
.left{ flex:2; } .right{ flex:3; }補充8.格線系統響應式小方法
@media screen and(max-width: 768px){ [class*="col-"]{ width:100%; } }補充9 權重
HTML 標籤:1 分 class 選擇器:10 分 ID 選擇器:100 分 inline style:1000 分 !important:10000 分 html body .container .box{22分} .box.box.box{30分}補充10圖片改變大小時換圖
<picture> <!-- 當螢幕寬度少於992px時,替換圖片 --> <source srcset="./images/M2.png" media="(max-width: 992px)"> <!-- 預設圖片,通常是桌面版本 --> <img src="./images/M1.png" alt="Logo"> </picture>參考資料
Set-SmbClientConfiguration -RequireSecuritySignature $false參考資料
.parent{ color: rgb(147, 60, 229); } .child{ color: rgb(232, 150, 27); background-color: rgb(234, 78, 11); }2.接著回到App.jsx加入class
const Child = () => { return ( <> <h3 className="child">Child Component</h3> </> ) } const App = () => { return ( <> <h2 className="parent">App Component</h2> <Child /> <Child /> </> ) } export default AppReact的class必須寫成className
const Child = () => { return ( <> <h3 className="child" style={{ backgroundColor: '#BBFFFF' }}>Child Component</h3> </> ) }原css中如有-則使用小駝峰(lower camel case)
const App = () => { return ( <h2>App Component</h2> ) } export default App完成第一個Component了
const Child = () => { return ( <> <h3>Child Component</h3> </> ) }3.在App Component中使用多個Child Component
const App = () => { return ( <> <h2>App Component</h2> <Child /> <Child /> </> ) } export default App表示Component可重複使用
npm create vite@latest
Project name: .(於目前開啟的資料夾)
Select a framework: react(或輸入想要的名稱)
Select a variant: javascript(或擅長的開發方式)檢查一下package.json > dependencies > react 版本是不是19.0.0
npm install
npm run dev點開網頁完成了第一次建立
npm run build檔案會在dist下
勾選Require Server Name Indication中文版請參考下方參考資料
get-executionpolicy3.如為Restricted執行
set-executionpolicy remotesigned4.如有例外改執行
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned參考資料
USE Master GO ALTER LOGIN UserName WITH PASSWORD = 'password' GO ALTER LOGIN UserName WITH CHECK_POLICY = OFF, CHECK_EXPIRATION = OFF;參考資料