邏輯控制器
阿新 • • 發佈：2022-03-23
定義的語法：--變數名: 變數值;
使用的時候用 --屬性: var(變數名);的方式使用。變數都是公用樣式所以一般都放在 :foot 裡面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css variables</title> <style> :root { --primary-color: #333; --secondary-color: #ccc; --light-color: #f4f4f4; --max-width: 1100px; --box-1-width: 1; --box-2-width: 2; } * { padding: 0; margin: 0; } body{ font-family: Arial, Helvetica, sans-serif; line-height: 1.4; background: var(--bg-color); } header { background-color: var(--primary-color); color: #fff; border-bottom: 5px var(--secondary-color) solid; text-align: center; } .container { display: flex; margin: 0 auto; width: var(--max-width); } .box { background-color: var(--primary-color); border-bottom: 5px var(--secondary-color) solid; color: #fff; padding: 1rem; margin: 1rem; } .box-1 { flex: var(--box-1-width); } .box-2 { flex: var(--box-2-width); } </style> </head> <body> <header> <h1>歡迎來到歐青辣少</h1> </header> <div class="container"> <div class="box box-1"> <h3>標題</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quam fugiat quae, saepe consequatur ipsum.</p> </div> <div class="box box-2"> <h3>標題</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quam fugiat quae, saepe consequatur ipsum.</p> </div> </div> </body> </html>