前端必学-40个精选案例实战-案例3-仿QQ邮箱登陆实战

案例分析:QQ邮箱登录框分析与思路

image.png
完成这样一个登陆的实现

input标签

image.png

  • input标签是网页中最常见的输入文字的标签
  • input有很多种类型：例如：密码、文字、数字、颜色、复选等
<!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>input</title>
</head>

<body>
    <input type="text" />
    <input type="password" />
    <input type="number" />
    <input type="checkbox" />
    <input type="date" />

</body>

</html>

设置输入框默认内容

  • input标签有一些比较常用的属性，value为默认内容
  • input标签的maxlength属性可以设定最大值，placeholder可以设定提示信息
<!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>
</head>

<body>
    <input value="慕课网" />
    <input value="abc" />
    <input maxlength="6" />
    <input maxlength="5" value="AAAAAA" />
    <input placeholder="请输入密码" />
</body>

</html>

button标签实现按钮

image.png

  • html中作为按钮标签有两种，一种是input，另外一种为button标签。
  • 最基本的区别为前者为单标签，后者为可闭合的标签

可闭合标签就是意味着可以往里面放入标签

<!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>button标签实现按钮</title>
</head>

<body>
    <input type="button" value="按钮" />
    <button>按钮</button>
</body>

</html>

p标签实现内容文字

image.png

  • html中作为段落的标签为p，非缩写为paraagraph（段落）
  • p元素会自动在其前后创建一些空白

p标签不能包含div标签
div标签可以放入p标签

p标签里面放入 ul 和 ol标签是不行的

<!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>
</head>

<body>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>

    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>

    p标签上下有间隔 p标签不能包含div标签


    <p>
        <ul>
            <li>测试</li>
        </ul>
    </p>

    <p>
        <ol>
            <li>
                测试ol
            </li>
        </ol>
    </p>


    <p>
        <a href="#">跳转链接</a>
    </p>

</body>

</html>

span标签实现内置文字

image.png

  • span的英文翻译为跨度、范围，无缩写
  • 标签被用来组合文档中的行内元素
<!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>span标签实现内置文字</title>
</head>

<body>
    <div>
        <span>用户名:</span>
        <input/>
    </div>

    <div>
        <span>密码</span>
        <input/>
    </div>

    <div><input type="button" value="登陆" /></div>
    <span>abc</span>
    <span>kkk</span>
    <p>ppp</p>
</body>

</html>

网页搭建与思路-QQ邮箱登陆框骨架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>案例4</title>
</head>

<body>
    <div>
        <div>
            <span>微信登陆</span>
            <span>QQ登陆</span>
        </div>

        <div>
            <div>
                <input placeholder="请输入QQ账号" />
            </div>
            <div>
                <input placeholder="请输入密码" type="password" />
            </div>
        </div>

        <div>
            <button>登陆</button>
        </div>

        <div>
            <input type="checkbox" />
            <span>下次自动登陆</span>
        </div>
    </div>

</body>

</html>

如何使用浏览器功能看到元素状态

image.png

posted @ 2024-01-30 14:10  WonderC  阅读(24)  评论(0)  编辑  收藏  举报