【HTML/CSS】简单登录注册表单制作

赤焰梦

已于 2023-01-07 16:27:33 修改

阅读量3.8k

点赞数 9

分类专栏： HTML/CSS/Javascript 文章标签： html css 前端

于 2022-11-09 23:50:23 首次发布

本文链接：https://blog.csdn.net/m0_49442965/article/details/127780430

版权

HTML/CSS/Javascript 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

实现效果：
在这里插入图片描述

<!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>CSS控制表单样式</title>
   
    <link rel="stylesheet"  type="text/css" href="form.css">

</head>
<body>
    <form action="#" method="post">
        <p>
            <span>账号：</span>
            <input type="text" name="username" value="admin" class="num" pattern="^[a-zA-z][a-zA-Z0-9_]{4,15}$"/>
        </p>
        <p>
            <span>密码：</span>
        <input type="password" name="password" class="pass" pattern="^[a-zA-Z]\w{5,17}$"/>

        </p>
<p>
    <input type="button" class="btn01" value="登录"/>
    <input type="button" class="btn02" value="注册"/>
</p>
    </form>
</body>
</html>

form.css

body{font-size: 12px; font-family: "宋体";}
body,form,input,p{padding: 0; margin: 0;border: 0;}
form{
    width: 320px;
    height: 150px;
    padding-top: 20px;
    margin: 50px auto;
    background: #f5f6fd;
    border-radius: 20px;
    border: 3px solid #4faccd;
}
p{margin-top: 17px; text-align: center;}
p span{
width: 40px;
display: inline-block;
text-align: right;
}
.num,.pass{
    width: 153px;
    height: 16px;
    border:2px solid #35a1df;
    /* 22px:给图标留出位置 */
padding: 2px 2px 2px 22px  ;
}
.num{
    background: url(img/1.png) no-repeat left center #fff;
    background-size: 15px;
    color: #999;
}
.pass{
    background: url(img/2.png) no-repeat left center #fff;
    background-size: 15px;
  
}
.btn01,.btn02{
    width: 60px;
    height: 26px;
    border-radius: 3px;
    border: 2px solid #6b5b60;
    margin-left:30px ;
}
.btn01{background: #3bb7ea;}
.btn02{background: #fbbc18;}

复合属性的写法
书写格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;
上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，
Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。
至于正则表达式，我还是喜欢在JS里面单独判定给出提示
对了，图标也放在这里吧：
在这里插入图片描述

赤焰梦

关注

9
点赞
踩
68

收藏

觉得还不错? 一键收藏
0
评论
【HTML/CSS】简单登录注册表单制作

Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，至于正则表达式，我还是喜欢在JS里面单独判定给出提示。
复制链接

扫一扫