001_登记表——实践

最新推荐文章于 2024-07-24 13:45:34 发布

StudiousTiger

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量111

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/m0_45067620/article/details/107753341

版权

Tiger の前端实践项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS:

*{
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgb(37, 37, 37);
}
input{
    background-color: rgb(255, 255, 255);
    border:wheat 1px solid;
}
.body{
    width: 1111px;
    height: 555px;
    margin: 20px auto;
    background: url(./timg.jpg) no-repeat;
    background-size: cover;
    position: relative;
}
.body2{
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255,0.3);
}
form{
    height: 410px;
    width: 460px;
    background-color: rgba(253, 253, 253,0.3);
    border-radius: 10%;
    position: absolute;
    top: 10%;
    left: 45%;
}
.form{
    position: absolute;
    top: 45px;
    left: 45px;
}
.form div{
    margin-bottom: 10px;
}
form>div:nth-child(1){
    margin: 5px 0 0 200px;
    /* margin-left: 200px;
    margin-top: 5px; */
    font-size:20px;
    color: black;
    font-weight: bolder;
}
.form>div:nth-child(1){
    margin-left: -15px;
}
form>div:nth-last-child(1){
    position: absolute;
    top: 370px;
    left: 100px;
}
.form input{
    width: 200px;
    height: 20px;
}
form>div:nth-last-child(2){
    position: absolute;
    top: 320px;
    left: 45px;
}
form>div:nth-last-child(1) input{
    width: 90px;
    height: 25px;
    font-size: 16px;
    background-color: rgb(250, 77, 46);
    color: rgb(245, 252, 189);
    border: none;
    border-radius: 5px;
}
.reminder{
	width:300px;
	height:50px;
	font-size:45px;
    	position: absolute;
	left:460px;
	top:200px;
}

HTML:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>default</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="body"> 
        <div class="body2">
            <form action="address.html" method="GET">
                <div class="h">***学院信息登记表</div>
                <div class="form">
                    <div><span>用户登录名：</span><input type="text" value="绿豆吃了猫@#$" readonly>(只读)</div>
                    <div><span>真实姓名：</span><input type="text" autofocus="autofocus" placeholder="例如：王明" required>(必填)</div>
                    <div><span>真实年龄：</span><input type="text" pattern="^\d{1,2}$" required>(必填)</div>
                    <div><span>出生日期：</span><input type="date" required>(必填)</div>
                    <div><span>电子邮件：</span><input type="email" placeholder="19386****@qq.com" required>(必填)</div>
                    <div><span>身份证号：</span><input type="text" pattern="^\d{8,18}|[0-9x]{8,18}|[0-9X]{1,18}?$"size="25" required>(必填)</div>
                    <div><span>手机号码：</span><input type="text" pattern="^1[3-9][0-9]{9}$" required>(必填)</div>
                    <div><span>个人主页：</span><input type="url" list="urllist" placeholder="www.huxuehao.com" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$$" requried>(请选择网址)</div>
                    <datalist id="urllist">
                        <option>http://www.itcast.cn</option>
                        <option>http://www.huxuehao.com</option>
                        <option>http://www.shanti.com</option>
                    </datalist>
                    
                </div>
                <div><span>幸运颜色：</span><input type="color"style="width:100px" required>(请选择你喜欢的颜色)</div>
                <div><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"></div>
            </form>
        </div> 
    </div>
</body>
</html>

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

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001_登记表——实践

CSS:*{ margin: 0; padding: 0; list-style: none; color: rgb(37, 37, 37);}input{ background-color: rgb(255, 255, 255); border:wheat 1px solid;}.body{ width: 1111px; height: 555px; margin: 20px auto; background: ur
复制链接

扫一扫

专栏目录