css表单

最新推荐文章于 2023-09-11 16:19:15 发布

曦瑶——云燕依婷

最新推荐文章于 2023-09-11 16:19:15 发布

阅读量205

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_61582318/article/details/127185047

版权

效果图

style代码

 <style>
        body{
            margin: 0;
            padding: 20px;
        }
        div{
            display:block;
            width: 460px;
            padding: 10px;
            margin: 0 auto;
            border: 1px solid #a5a3a3;
            border-radius: 14px;
            background-color: rgb(245, 225, 198);
        }
        .center{
            margin-left: 25%;
        }
        .center-to{
            margin-left: 37%;
        }
        .btn{
            background-color: rgb(30, 184, 255);
            width: 60px;
            height: 30px;
            margin-top: 10px;
            border: 0px;

        }

html代码

<body>
    <div>
        <h1>青春不常在，抓紧谈恋爱</h1><hr>
        <form accept=""  method="get" name="">
            性别：
            <input type="radio" name="sex" checked="checked"/>男
            <input type="radio" name="sex" />女
            </br></br>
            <form>
                出生年月：
                <select>
                    <option>请选择年</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                </select>
                <select>
                    <option>请选择月</option>
                    <option>1月</option>
                    <option>2月</option>
                    <option>3月</option>
                    <option>4月</option>
                    <option>5月</option>
                </select>
                <select>
                    <option>请选择日</option>
                    <option>1号</option>
                    <option>2号</option>
                    <option>3号</option>
                    <option>4号</option>
                    <option>5号</option>
                </select>
            </br></br>
            所在地区：
            <input type="text" size="22" placeholder="奋斗者之家" maxlength="10"/>
            </br></br> 
            婚姻状况：
            <input type="radio" checked="checked"/>单身
            <input type="radio" />未婚
            <input type="radio" />缺爱
            </br></br>
            学历：
            <input type="text" size="22" placeholder="小学" maxlength="10"/>
            </br></br>
            月薪：
            <input type="text" size="22" placeholder="1000~10000" maxlength="10"/>
            </br></br>
            手机号：
            <input type="text" size="22"  maxlength="10"/>
            </br></br>
            昵称：
            <input type="text" size="22" maxlength="10"/>
            </br></br>
            喜欢的类型：
            <input type="checkbox" />妩媚
            <input type="checkbox" />柔美
            <input type="checkbox" />可爱
            <input type="checkbox" />小鲜肉
            <input type="checkbox" />御姐
            <input type="checkbox" />萝莉
            </br></br>
            自我介绍：
            <textarea cols="40" rows="10"></textarea>
            </form></br>      
        </form><hr>
        <h2>我承诺</h2>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox" checked="checked" class="center"/>我同意注册条款和会员加入标准
        </br>
        <input type="submit" value="提交" class="center-to btn"/>
        <input type="reset" value="重置" class="btn"/>
    </div>
</body>

完整代码：

<!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>表单制作</title>
    <style>
        body{
            margin: 0;
            padding: 20px;
        }
        div{
            display:block;
            width: 460px;
            padding: 10px;
            margin: 0 auto;
            border: 1px solid #a5a3a3;
            border-radius: 14px;
            background-color: rgb(245, 225, 198);
        }
        .center{
            margin-left: 25%;
        }
        .center-to{
            margin-left: 37%;
        }
        .btn{
            background-color: rgb(30, 184, 255);
            width: 60px;
            height: 30px;
            margin-top: 10px;
            border: 0px;

        }
    </style>
</head>
<body>
    <div>
        <h1>青春不常在，抓紧谈恋爱</h1><hr>
        <form accept=""  method="get" name="">
            性别：
            <input type="radio" name="sex" checked="checked"/>男
            <input type="radio" name="sex" />女
            </br></br>
            <form>
                出生年月：
                <select>
                    <option>请选择年</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                </select>
                <select>
                    <option>请选择月</option>
                    <option>1月</option>
                    <option>2月</option>
                    <option>3月</option>
                    <option>4月</option>
                    <option>5月</option>
                </select>
                <select>
                    <option>请选择日</option>
                    <option>1号</option>
                    <option>2号</option>
                    <option>3号</option>
                    <option>4号</option>
                    <option>5号</option>
                </select>
            </br></br>
            所在地区：
            <input type="text" size="22" placeholder="奋斗者之家" maxlength="10"/>
            </br></br> 
            婚姻状况：
            <input type="radio" checked="checked"/>单身
            <input type="radio" />未婚
            <input type="radio" />缺爱
            </br></br>
            学历：
            <input type="text" size="22" placeholder="小学" maxlength="10"/>
            </br></br>
            月薪：
            <input type="text" size="22" placeholder="1000~10000" maxlength="10"/>
            </br></br>
            手机号：
            <input type="text" size="22"  maxlength="10"/>
            </br></br>
            昵称：
            <input type="text" size="22" maxlength="10"/>
            </br></br>
            喜欢的类型：
            <input type="checkbox" />妩媚
            <input type="checkbox" />柔美
            <input type="checkbox" />可爱
            <input type="checkbox" />小鲜肉
            <input type="checkbox" />御姐
            <input type="checkbox" />萝莉
            </br></br>
            自我介绍：
            <textarea cols="40" rows="10"></textarea>
            </form></br>      
        </form><hr>
        <h2>我承诺</h2>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox" checked="checked" class="center"/>我同意注册条款和会员加入标准
        </br>
        <input type="submit" value="提交" class="center-to btn"/>
        <input type="reset" value="重置" class="btn"/>
    </div>
</body>
</html>