用HTML写手机QQ登录界面

最新推荐文章于 2024-07-25 11:52:08 发布

cb++

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量4.7k

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44768794/article/details/109222180

版权

登陆界面

<!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字体加粗

cb++

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
用HTML写手机QQ登录界面

把HTML按钮设置为圆形 <button style="border-radius: 50% ;width: 60px;height: 60px;border: none;background-color: dodgerblue"><b>登录</b></button><br/>调整按钮中字体大小style = “font-size: 30px”;HTML将文字写放置左下角忘记密码HTML字体加粗...
复制链接

扫一扫