效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
<style>
table{
width: 300px
}
.tr1{
background: #cccccc;
height: 30px;
}
.tr2{
background: #e6e6e6;
height: 30px;
}
</style>
</head>
<body>
<form action="#" method="post">
<table>
<tr class="tr1">
<td colspan="2" align="center">用户注册</td>
</tr>
<tr class="tr2">
<td>用户名</td>
<td><input type="text" name="username" maxlength="20" size="15"></td>
</tr>
<tr class="tr2">
<td>密码</td>
<td><input type="password" neam="userpass" maxlength="20" size="15"></td>
</tr>
<tr class="tr2">
<td>性别</td>
<td><input type="radio" value="男" name="gender">男
<input type="radio" value="女" name="gender">女
</td>
<tr class="tr2">
<td>爱好</td>
<td>
<input type="checkbox" value="写作" name="hobby">写作
<input type="checkbox" value="听音乐" name="hobby">听音乐
<input type="checkbox" value="体育" name="hobby">体育
</td>
</tr>
<tr class="tr2">
<td>省份</td>
<td>
<select name="address" id="address">
<option>湖北省</option>
<option selected>陕西省</option>
<option>湖南省</option>
<option>河北省</option>
</select>
</td>
</tr>
<tr class="tr2">
<td>自我介绍</td>
<td>
<textarea name="Intro" cols="25" rows="5" id="Intro"></textarea>
</td>
</tr>
<tr class="tr1">
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qq注册</title>
<style>
#div{
float: left;
}
input{
height: 30px;
}
.inp1{
width: 310px;
height: 30px;
}
select{
width: 100px;
height: 35px;
}
#inpsub{
width: 310px;
height: 35px;
}
#inptel{
width: 200px;
height: 30px;
}
.td1{
width: 329px;
height: 20px;
}
.td2{
width: 20px;
}
</style>
</head>
<body>
<div id="div">
<img src="./微信截图_20231214161744.png">
</div>
<table>
<tr>
<td width="950"></td>
<td><a href="#">QQ靓号</td>
<td>
<select name="address" id="address">
<option>简体中文</option>
<option>English</option>
</select>
</td>
<td><a href="#">意见反馈</td>
</tr>
</table>
<table width="1220" height="160"> </table>
<form action="#" method="post">
<table align="center" width="330">
<tr height="30">
<td colspan="2"><strong>欢迎注册QQ</strong></td>
</tr>
<tr height="30">
<td class="td1">每一天，乐在沟通。</td>
<td align="center" class="td2">
<a width="40" href="">免费靓号</a>
</td>
</tr>
<tr height="30">
<td align="center" colspan="2">
<input class="inp1" type="text" name="username" placeholder="昵称">
</td>
</tr>
<tr height="30">
<td align="center" colspan="2">
<input class="inp1" type="password" name="userpass" placeholder="密码">
</td>
</tr>
<tr height="30">
<td align="center" width="50">
<select name="address" id="address">
<option>+83</option>
<option>+84</option>
<option>+85</option>
<option selected>+86</option>
</select>
</td>
<td align="center">
<input id="inptel" type="tel" name="usertel" placeholder="手机号码">
</td>
</tr>
<tr height="30">
<td>
<small>可通过读手机号找回密码</small>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center">
<P>
<input id="inpsub" type="submit" value="注册">
</P>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="checkbox" value="yes" name="hobby">我已阅读并同意服务协议隐私政策
</td>
</tr>
</table>
<table width="1220" height="145"> </table>
<p align="center">Copyright ©1998-2023Tencent All Rights Reserved.</p>
</form>
</body>
</html>效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 1520px;
height: 50px;
background: #c4e3f1
}
#div2{
width: 1520px;
height: 670px;
}
#divzuoce{
width: 850px;
height: 665px;
float: left;
}
#divyouce{
width: 500px;
height: 655px;
float: left;
}
#divimg{
float: left;
}
#inpsub{
width: 250px;
height: 35px;
background: #92d244;
}
.inp1{
width: 250px;
height: 30px;
}
</style>
</head>
<body>
<div id="div1">
<div id="divimg">
<img src="./微信截图_20231214190227.png">
</div>
<table>
<tr>
<td width="1100"></td>
<td><a href="">QQ登录</a></td>
<td><a href="">授权管理</a></td>
<td><a href="">申请接入</a></td>
</tr>
</table>
</div>
<div id="div2">
<div id="divzuoce">
<table width="100" height="100"></table>
<table align="center" width="300" height="300">
<tr>
<td align="center"><h2>账号密码登录</h2></td>
</tr>
<tr>
<td align="center">推荐使用<a href="">快速安全登录</a>，防止盗号。</td>
</tr>
<tr>
<td align="center"><input class="inp1" type="text" name="username" placeholder="支持QQ号/邮箱/手机号登录"></td>
</tr>
<tr>
<td align="center"><input class="inp1" type="password" name="userpass" placeholder="密码"></td>
</tr>
<tr>
<td align="center">
<P>
<input id="inpsub" type="submit" value="授权并登录">
</P>
</td>
</tr>
</table>
<table align="center">
<tr>
<td><a href="">忘记密码？</a></td>
<td><a href="">注册账号</a></td>
<td><a href="">意见反馈</a></td>
</tr>
</table>
</div>
<div id="divyouce">
<table width="100" height="100"></table>
<table>
<tr>
<td height="30"><a href="">腾讯网 </a>将获取以下权限：</td>
</tr>
<tr>
<td height="30"><input type="checkbox" value="quanxuan" name="hobby">全选</td>
</tr>
<tr>
<td height="30"><input type="checkbox" value="quanxuan" name="hobby">获得您的昵称、头像、性别及会员信息</td>
</tr>
<tr>
<td>授权后表明你已同意<a href="">QQ登录服务协议</a></td>
</tr>
</table>
</div>
</body>
</html>
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
