【纯CSS+DIV】两年前我用纯CSS+DIV写的一个登录界面(太不堪了)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册及问卷调查</title>
     <!-- CSS -->
  
</head>
<style>
body{
	margin:0px;
	padding:0px;
	background:url("123.jpg") no-repeat left top; background-size:100%;
	color:#C3C;
}
#fset{
	text-align:center;   /*让边框里面的文本居中*/
	width:auto;
	border:0;
	margin-top:50px;
}
input:enabled{  /*选择每个启用的*/
	margin-left:10px;
	margin-top:20px;
	height:20px;
	padding:5px;
	border-radius:15px;
	outline:medium;
	background-color:#FCC;
	
	/*去除input阴影和边框*/
	outline-color: invert ;
	outline-style: none ;
	outline-width: 0px ;
	border: none ;
	text-shadow: none ;
}
#sex{
	margin-left:-100px;
}
#birth{
	margin-left:0px;
}
#birth input{
	width:169px;
}
#like{
	margin-left:50px;	
}
#like input:nth-of-type(4){
	margin-left:62px;	
}
#ok input{
	border-radius:20px;
	padding:5px;
	width:60px;
	height:auto;
}
</style>
<body>
    <div id="example1">
    
    </div>
    <form name="registration"action="" method="get" autocomplete="on">
    <fieldset id="fset">
        <legend>注册及问卷调查</legend>
            学号:<input type="text"  name="userid" placeholder="请输入学号" autofocus required><br/>
            名字:<input type="text" name="username" placeholder="请输入用户名" autocomplete="on"><br/>
            密码:<input type="password" name="psw" placeholder="请输入密码"><br/>
        <div id="sex">
        	性别:<input type="radio" value="female" name="gender"/><input type="radio" value="male" name="gender"/></div>
        	电话:<input type="tekyxt" name="phone" placeholder="请输入电话号码" ><br/>
        <div id="birth">
            生日:<input type="date" name="birthday"placeholder=" 年 /月 /日"><br/>
        </div>
        	邮箱:<input type="email"  name="email" placeholder="请输入注册邮箱" /><br/>
        <div id="like">
        	爱好:
        	 <input type="checkbox" value="篮球" name="interest" checked/>篮球 &nbsp;&nbsp;
             <input type="checkbox" value="足球" name="interest"/>足球 &nbsp; &nbsp;
             <input type="checkbox" value="羽毛球" name="interest" checked/>羽毛球<br/>
             <input type="checkbox" value="乒乓球" name="interest" checked/>乒乓球
             <input type="checkbox" value="唱歌" name="interest"/>唱歌 &nbsp; &nbsp;
             <input type="checkbox" value="跳舞" name="interest" checked/>跳舞 &nbsp; &nbsp;<br/>
             <input type="checkbox" value="看电影" name="interest" checked/>看电影
             <input type="checkbox" value="看书" name="interest"/>看书 &nbsp; &nbsp;
             <input type="checkbox" value="看书" name="interest"/>零食
             <br/><br/>
        </div>
        <div style="float:left; width:100%;">
        	<span style="height:100px; float:left; margin-left:410px">建议:</span>
            <textarea name="suggest" rows="5" cols="60" style="float:left;"></textarea>
        </div>
        </form>
        <b><a href="#">了解更多</a></b><br/>
        <audio controls>
            <source src="#" >
            <source src="#" >
        </audio>
        
        <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" /><br/>
        <div id="ok">
        	<input type="submit" onclick="aa()" value="提交" /><input type="submit" value="重置" />
        </div>
        <script>    
        function aa(){
                       var one=document.getElementsByTagName("input")[0].value;//返回的是一个类数组
                       var two=document.getElementsByTagName("input")[1].value;
                       var three=document.getElementsByTagName("input")[2].value;
                       var four=document.getElementsByTagName("input")[3].value;
                       var five=document.getElementsByTagName("input")[4].value;
                       var six=document.getElementsByTagName("input")[5].value;
                       var seven=document.getElementsByTagName("input")[6].value;
                       var eight=document.getElementsByTagName("input")[7].value;
                       var nine=document.getElementsByTagName("input")[8].value;
                       var ten=document.getElementsByTagName("input")[9].value;
                       var aa=document.getElementsByTagName("input")[10].value;
                       var bb=document.getElementsByTagName("input")[11].value;
                       var cc=document.getElementsByTagName("input")[12].value;
                       var dd=document.getElementsByTagName("input")[13].value;
                       var ee=document.getElementsByTagName("input")[14].value;
                       var ff=document.getElementsByTagName("input")[15].value;
                       var hh=document.getElementsByTagName("input")[16].value;
                       var gg=document.getElementsByTagName("textarea")[0].value;
                       var radio=document.getElementsByName("gender"); //这里不要写input,因为input好多,写它的name属性的gender
						for(var i=0;i<radio.length;i++){
							if(radio[i].checked==true){
								xingbie=radio[i].value;
								break;
							}
						}
                       var str=document.getElementsByName ("interest");
                        var selectvalue=new Array();
                        for(var i=0;i<str.length;i++){
                            if(str[i].checked==true){
                                selectvalue.push(str[i].value);
                            }
                        }
                       alert("学号:"+one+"\n名字:"+two+"\n密码:"+three+"\n性别:"+xingbie+
                       "\n电话:"+six+"\n生日:"+seven+"\n邮箱:"+eight+"\n爱好:"+selectvalue
                       +radio) 
            }
        </script>
</body>
</html>
原创文章 271 获赞 116 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/105883233
今日推荐