1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

点击查看简单登录实例

$$answer

首页：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>首页</title>
        <link rel="stylesheet" href="/global.css" />
        <link rel="icon" href="/assets/logo.png" />
        <style>
            .image {
                width: 300px;
                height: 200px;
                object-fit: cover;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <nav class="right">
                <a href="/index.html">首页</a>
                <a href="/login.html">登录</a>
            </nav>
            <h1 class="center">首页</h1>
            <div class="center">
                <img class="image" src="/assets/home.jpg" alt="首页图片" />
            </div>
        </div>
    </body>
</html>

登录页面：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>登录</title>
        <link rel="stylesheet" href="/global.css" />
        <link rel="icon" href="/assets/logo.png" />
    </head>
    <body>
        <div class="container">
            <nav class="right">
                <a href="/index.html">首页</a>
                <a href="/login.html">登录</a>
            </nav>
            <h1 class="center">登录</h1>
            <div class="center">
                <label for="username">用户名：</label>
                <input id="username" type="text" placeholder="请输入用户名" />
            </div>
            <div class="center">
                <label for="password">密&emsp;码：</label>
                <input id="password" type="password" placeholder="请输入密码" />
            </div>
            <div class="center">
                <button>登录</button>
            </div>
        </div>
    </body>
</html>

global.css:

.container {
    max-width: 400px;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}

$$