1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

$$demo <!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>Document</title> <style> :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } .box { margin: 100px auto; text-align: center; width: 400px; border-radius: 14px; background-color: pink; border: 3px #65336e solid; } .title { font-size: 34px; font-weight: bold; color: white; border-radius: 11px 11px 0 0; padding: 20px 0; background-color: teal; margin-bottom: 20px; } .label { background: #eee; width: 70px; display: inline-block; border-radius: 3px 0 0 3px; height: 40px; line-height: 40px; vertical-align: middle; font-size: 14px; color: white; background-color: teal; font-weight: bold; } .username, .password { height: 40px; border: none; padding: 0; vertical-align: middle; border-radius: 0 3px 3px 0; padding: 0 10px; } .row, .login-btn { margin-bottom: 20px; } .login-btn { cursor: pointer; padding: 5px 30px; border: 3px #65336e solid; border-radius: 4px; background-color: #ffdb8a; color: #65336e; font-weight: bold; font-size: 22px; } .login-btn:hover { background-color: #fff0ce; } .login-btn:active { background-color: #fdcc59; } .username:focus, .password:focus { outline: none; } </style> </head> <body> <div class="box"> <div class="title">登录页面</div> <div class="row"> <label for="username" class="label">用户名</label ><input id="username" class="username" type="text" placeholder="请输入用户名" /> </div> <div class="row"> <label for="password" class="label">密码</label ><input id="password" class="password" type="password" placeholder="请输入密码" /> </div> <button class="login-btn">登录</button> </div> </body> </html>

$$