用HTML写手机QQ登录界面

登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            border: 2px solid ;
            padding: 10px 40px;
            background-color:#E8E8E8 ;
            width: 210px;
            height: 450px;
            border-radius: 25px;
        }

    </style>
</head>
<body>

<div align="center">
<h3 align="center" >添加或注册账号</h3>
    <img border="0" src="QQ2.png" height="55" width="103"/>
    <br>
    <b>账号:</b><input style="border-radius: 100px; height: 30px;" type="text" name="username" value="QQ号/手机号/邮箱"/><br><br/>
    <b>密码:</b><input style="border-radius: 100px; height: 30px;" type="text" name="password" value="密码"/><br/><br/><br/><br/><br/>
    <button style="border-radius: 50% ;width: 60px;height: 60px;border: none;background-color: dodgerblue;font-size: 32px"></button><br/>
    <a href="Retrieve.html" style="font-size: 11.5px;position: absolute;left:39px;bottom: 10%">忘记密码</a>
    <a href="Register.html" style="font-size: 11.5px;position: absolute;right:590px;bottom: 10%">用户注册</a>
</div>
</body>
</html>

在这里插入图片描述

忘记密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div
        {
            border: 1px solid;
            padding: 10px 40px;
            background-color: #E8E8E8;
            width: 210px;
            height: 450px;
            border-radius: 25px;
        }
    </style>
</head>
<body>
<div align="center">
    <span style="font-weight: bold;font-size: 20px">输入账号</span><br/>
    <span style="position: absolute;left: 10px">
        <p style="font-size: 15px;margin-top: 10px">账号:</p>
        <input type="text" style="width: 280px;position: absolute;margin-top: 0px"/>
    </span><br/><br/><br/><br/>
    <button style="width: 285px;height: 30px;font-size: 18px; left: 12px;background-color: dodgerblue;color: #E8E8E8;border: 0;border-radius: 10px;position: absolute;margin-top: 2px">确定</button>
    <br/><br/><p style="color: blue;font-size: 11px;left: 13px;position: absolute">海外手机号?</p>
</div>
</body>
</html>

在这里插入图片描述

用户注册

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div {
      border: 1px solid ;
      padding: 10px 40px;
      background: #E8E8E8;
      width: 210px;
      height: 450px;
      border-radius: 25px;
    }
  </style>
</head>
<body>
<div align="center">
  <p style="font-size: 34px;position: absolute;left:14px;font-weight: bold">用手机号码注册</p>
  <p style="font-size: 14px;position: absolute;left:14px;padding-top: 8%">注册即代表同意<a href="http://ti.qq.com/agreement/index.html">服务协议</a><a href="https://baijiahao.baidu.com/s?id=1650041058380050590">QQ隐私指引</a></p><br/>

  <span >
    <u>
    <select style="position: absolute;left:9px;position: absolute;margin-top: 95px;width: 46px;height: 20px;border: 0">
      <option value="+86">+86</option>
      <option value="+87">+87</option>
      <option value="+88">+88</option>

    </select>
    <input type="text"style="position: absolute;left:55px;position: absolute;margin-top: 95px;width: 230px;height: 40px;color: #aaaaaa;border: 0">
   </u>
  <button style="width: 285px;height: 30px;font-size: 18px; left: 12px;background-color: dodgerblue;color: #E8E8E8;border: 0;border-radius: 10px;position: absolute;margin-top: 155px">下一步</button>
  </span>

</div>
</body>
</html>

在这里插入图片描述

记录知识点

把HTML按钮设置为圆形

    <button style="border-radius: 50% ;width: 60px;height: 60px;border: none;background-color: dodgerblue"><b>登录</b></button><br/>

调整按钮中字体大小
style = “font-size: 30px”;

HTML调整位置(将文字写放置左下角)
忘记密码
<“margin-top= 150px”> 调整与上边界的距离

HTML字体加粗

  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值