<!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{
/* 将整个界面固定 */
position: relative;
}
h4 {
/* 设置背景颜色 */
background-color: greenyellow;
/* 颜色下面的一条线 */
border-bottom-style: groove;
}
.d1 {
/* 距离左边距8个字的大小，距离根据字的大小而变 */
text-indent: 8em;
}
.d3 textarea {
/* 距离左边距8个字的大小，距离根据字的大小而变 */
margin-left: 10em;
}
button {
/* 按钮居中 */
text-align: center;
}
.p2 button {
/* 设置长与宽 */
width: 300px;
height: 30px;
/* 设置圆角 */
border-radius: 5px;
/* 设置背景颜色 */
background-color: red;
}
.a1{
/* 设置验证码的边框线粗细 */
border-width: 1px;
/* 设置验证码的边框线 */
border-style: solid;
/* 设置验证码边框线的颜色 */
border-color: black;
/* 设置验证码字体的颜色 */
color: red;
}
.td2 {
/* 固定验证码的位置 */
position: fixed;
}
.p3 {
/* 文字颜色 */
color: aqua;
}
</style>
</head>
<body>
<h4>设置你的账户信息：</h4>
<div class="d1">
<!--  代表的是空一个字的距离， 代表的是空半个字的距离， 代表的是空格， -->
<p>邮  箱：* <input type="text">  (请输入您的常用邮箱作为登陆名)</p>
<p>姓  名：* <input type="text">  (请填写真实姓名，方便您发布你的需求，提供者准确联系)</p>
<p>昵  称： <input type="text">  (昵称是方便您参与与本网各种活动，如不填写将自动显示您的姓名)</p>
<p>电  话：* <input type="text">  (可填固定电话或手机号，方便您发布需求，提供者准确联系)</p>
<p>寄  码：* <input type="text">  (密码长度为6-16位，仅限字母、数字、横线、下划线)</p>
<p>确认密码：* <input type="text">  (请再次输入密码)</p>
<p>工作单位：* <input type="text">  (请添写单位名称)</p>
<p>所 在 地：*
<!-- 选择标签，需要下拉选择的时候使用 -->
<select>
<!-- 里面跟上选择 -->
<option>文远书院</option>
<option>鲁班书院</option>
<option>张衡书院</option>
<option>仲景书院</option>
</select>
  
<select>
<option>1区</option>
<option>2区</option>
<option>3区</option>
<option>4区</option>
</select>
</p>
<p class="p1">所属专业：*  （请选择，单选）</p>
<div class="div1">
<!-- input是输入标签，radio是单选用的，zy是一个类型，代表它们叫同一个名字 -->
<!-- value代表点击字的时候也可以选中选项 -->
<input type="radio" name="zy" value="软件工程">软件工程  
<input type="radio" name="zy" value="云计算">云计算   
<input type="radio" name="zy" value="网络安全">网络安全  
<input type="radio" name="zy" value="物联网">物联网   
<input type="radio" name="zy" value="信息工程">信息工程  
<input type="radio" name="zy" value="数据科学">数据科学  
<!-- checked代表默认选项 -->
<input type="radio" name="zy" value="大数据" checked>大数据   
<input type="radio" name="zy" value="水利">水利    
</div>
<div>
<input type="radio" name="zy" value="制造">制造    
<input type="radio" name="zy" value="财经">财经    
<input type="radio" name="zy" value="旅游">旅游    
<input type="radio" name="zy" value="公安法律">公安法律  
<input type="radio" name="zy" value="农林牧渔">农林牧渔  
<input type="radio" name="zy" value="交通运输">交通运输  
<input type="radio" name="zy" value="电子信息">电子信息  
<input type="radio" name="zy" value="轻纺食品">轻纺食品  
</div>
<div>
<input type="radio" name="zy" value="医生">医生    
<input type="radio" name="zy" value="公共事业">公共事业  
<input type="radio" name="zy" value="文化教育">文化教育  
<input type="radio" name="zy" value="老年管理">老年管理  
<input type="radio" name="zy" value="无业游民">无业游民  
</div>
<div>
<td class="d2">验 证 码：*<input type="text"></td>
<td class="td1"><a class="a1" id="code_box">Af3D</a></td>
<td class="td2">（请输入验证码，如果注册码看不清，请点击注册码图片，以更换新的注册码)</td>
</div>
</div>
<div class="d3">
<p class="p3">服务条款</p>
<!-- 输入框以及大小设置 -->
<textarea cols="140px" rows="5px">对软件或者软件运行过程中释放到任何终端内存中的数据、软件运行过程中客户端与服务器端的交互数据，以及软件运行所必需的系统数据，进行复制、修改、增加、删除、挂接运行或创作任何衍生作品，形式包括但不限于使用插件、外挂或非经腾讯授权的第三方工具/服务接入软件和相关系统。通过修改或伪造软件运行中的指令、数据等任何方式，增加、删减、变动软件的功能或运行效果，或者将用于上述用途的软件、方法进行运营或向公众传播，无论这些行为是否为商业目的。
</textarea>
</div>
<!-- 按钮 -->
<p align="center" class="p2"><button >同意服务条款，现在提交</button></p>
<!-- a标签是链接标签，可以将#换成网址和地址，就可以点击文字跳跃到其他网站 -->
<div align="center"><a href="#">关于我们</a><a href="#"> | 谷腾服务</a><a href="#"> | 广告服务</a><a href="#"> | 会员服务</a><a href="#"> | 版权声明</a><a href="#"> | 诚聘英才</a><a href="#"> | 联系我们</a><a href="#"> | 友情链接</a>
</div>
<div align="center">业务联系：13910106727 010-65815687 媒体/合作/投稿：010-65815687<a href="#">发邮件</a></div>
<div align="center">版权所有：<a href="#">谷腾环保网</a><a href="#"> 京ICP备09053345号-1</a>京公网安备 11011502005287号</div>
<!-- 以下是js 用于实现验证码的点击刷新-->
<script>
var code_box = document.getElementById("code_box");
function refreshCode() {
var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',
char = '',
result = '';
for (var i = 0; i < 4; i++) {
var code_index = Math.round(Math.random()*61);
var char = code[code_index];
if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)
{
i --;
continue;
}
result += char;
}
code_box.innerHTML = result;
}
code_box.onclick = refreshCode;
</script>
</body>
</html>
7982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
