web2_2022
/
mine.html

<!--
 * @Author: your name
 * @Date: 2021-09-06 15:01:58
 * @LastEditTime: 2021-09-06 15:01:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Web Class 2\indexs\mine.html
-->
<!--
 * @Author: your name
 * @Date: 2021-09-06 14:11:30
 * @LastEditTime: 2021-09-06 14:12:36
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \Web Class 2\indexs\mine.html
-->
<!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>我的</title>
    <link rel="stylesheet" href="./app.css">
</head>

<body>
    <header>
        <h1>个人中心</h1>
        <img src="../img/bingge.jpg" alt="">
        <div>            <p>用户名：兵哥学编程</p>
            <p>角色：老师</p>
        </div>
    </header>
    <div id="banner">
        <div>
            <img class="nav-img" src="../img/nav1.png" alt="">
            <p>首页</p>
        </div>
        <div>
            <img class="nav-img" src="../img/nav2.png" alt="">
            <p>帮忙</p>
        </div>
        <div>
            <img class="nav-img" src="../img/nav3.png" alt="">
            <p>资料</p>
        </div>
    </div>

    <div id="main">
        <h2>我要登录</h2>
        <form action="#">
            <label for="">姓名</label>
            <input type="text" placeholder="请输入姓名" name="username">

            <label for="">密码</label>
            <input type="password" placeholder="请输入密码" name="password">

            <input type="submit">
        </form>
    </div>

    <footer>
        <h5>说明</h5>
        <p>链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.
            里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.
            链接里面需要设置背景图片.因此需要用到背景的相关属性设置.
            鼠标经过变化背景图片,因此需要用到链接伪类选择器.
        </p>
    </footer>
</body>

</html>