注册表单完整版

2022/1/19 23:53:05

编程Tag： input Font size color 注册表 -- 完整版 14px

本文主要是介绍注册表单完整版，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

表单内容：

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

这篇关于注册表单完整版的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

注册表单完整版

相关编程文章