注册表单完整版

2022-01-19 23:32:09 阅读：161 来源： 互联网

标签：完整版 color -- 14px 注册表 input font size

表单内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编程题</title>
    <link rel="stylesheet" href="表单样式.css">
</head>
<body>
<form action="https://www.youkeda.com/">
    <input type="text" name="name" placeholder="姓名" />
    <input type="number" name="mobile" placeholder="手机号" />
    <input type="password" name="password" placeholder="密码不少于6位" />
    <input type="checkbox" name="agreement" id="agreement" />
    <label for="agreement">已阅读并同意使用条款以及非活跃号处理规范</label>
    <button type="submit">立即注册</button>
</form>
</body>
</html>

表单样式：

form {
    width: 350px;
    margin: 0 auto;
    margin-top: 20px;
}
input,
button {
    width: 100%;
    margin-bottom: 14px;
}
input[type='checkbox'] {
    width: unset;
}
input::-webkit-input-placeholder {
    font-size: 14px;
    color: #dbdbdb;
}
input:-moz-placeholder {
    font-size: 14px;
    color: #dbdbdb;
}
input::-moz-placeholder {
    font-size: 14px;
    color: #dbdbdb;
} /* for the future */
input:-ms-input-placeholder {
    font-size: 14px;
    color: #dbdbdb;
}

button {
    background: #fe7300;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    padding: 8px 26px;
    font-weight: 500;
    border-radius: 2px;
}
label {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
}
label + span {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
}
label + span > a {
    cursor: pointer;
    color: #005980;
    text-decoration: none;
}
input {
    box-sizing: border-box;
    padding: 9px 14px;
    border-radius: 2px;
    border: 1px solid #dfe3e9;
}
input:focus {
    outline: none;
    border-color: rgba(254, 115, 0, 0.5);
}

效果：

样式：字体大小/粗细

设置大小，font-size:36px;

<!-- 设置字体的大小为12px -->
<p style="font-size: 12px;">
  一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>
<!-- 设置字体的大小为24px -->
<p style="font-size: 24px;">
  一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>

设置粗细，font-weight:100;

设置文字粗细的时候，其值可以是100，200，300，400，500，600，700，800，900中的任何一个，或者可以用英文代替，normal(正常粗细），lighter(细），bold（粗），bolder（更粗）

<p style="font-weight: 200;">优课达--学的比别人好一点～</p>
<p style="font-weight: lighter;">优课达--学的比别人好一点～</p>
<p style="font-weight: 400;">优课达--学的比别人好一点～</p>
<p style="font-weight: normal;">优课达--学的比别人好一点～</p>
<p style="font-weight: 700;">优课达--学的比别人好一点～</p>
<p style="font-weight: bold;">优课达--学的比别人好一点～</p>

标签：完整版,color,--,14px,注册表,input,font,size
来源： https://www.cnblogs.com/anaxiansen/p/15824640.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

注册表单完整版