作业1:
<!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>
table {
td {
padding: 8px;
text-align: left;
background-color: gray;
}
th {
background-color: whitesmoke;
}
}
</style>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input name="like" type="checkbox" value="write">写作业
<input name="like" type="checkbox" value="music">音乐
<input name="like" type="checkbox" value="sport">体育
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="province">
<option value="yunnan" selected>云南</option>
<option value="shanxi">陕西</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="Intro" cols="23" rows="5"></textarea></td>
</tr>
<tr>
<th colspan="2">
<input type="submit">
<input type="reset">
</th>
</tr>
</table>
</form>
</body>
</html>结果：
作业2:
<!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>
td {
padding: 5px;
text-align: left;
}
#free {
text-align: right;
}
.text {
font-size: 12px;
color: #9b9b9b;
}
.text2 {
height: 30px;
}
#log {
font-size: 25px;
color: #ffffff;
background: #2a91db;
text-align: center;
}
#title2 {
font-size: 20px;
}
#input {
width: 150px;
}
</style>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<td rowspan="9"><img src="./img/截屏2024-03-25 13.10.32.png" alt="QQ" width="300"></td>
<td width="200px" rowspan="9"></td>
<td height="100px"></td>
<td width="180px"></td>
</tr>
<tr>
<td colspan="2" height="25px"><span id="title"><b>欢迎注册QQ</b></span></td>
</tr>
<tr>
<td><span id="title2"><b>每一天，乐在沟通。</b></span></td>
<td id="free"><a href="#">免费靓号</a></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="username" placeholder="昵称" size="50px" class="text2"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="password" placeholder="密码" size="50px" class="text2"></td>
</tr>
<tr>
<td>
<select name="tele" id="input" class="text2">
<option value="+86" selected>+86</option>
<option value="+1">+1</option>
</select>
</td>
<td>
<input type="number" name="telephone" placeholder="手机号码" class="text2">
</td>
</tr>
<tr>
<td class="text" colspan="2">可通过手机号码找回密码</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="check" value="check"><span class="text">我已阅读并同意相关服务条款和隐私政策</span></td>
</tr>
</table>
</form>
</body>
</html>结果：
作业3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陆</title>
<style>
th,td {
border: 0px solid black;
padding: 10px;
text-align: left;
}
.text {
border: 0px solid black;
padding: 8px;
text-align: center;
}
#head1 {
background-color: #79c9ff;
width: 600px;
}
#head2 {
background-color: #79c9ff;
width: 350px;
}
.link {
font-size: 15px;
color: #efefef;
}
.link2 {
font-size: 15px;
color: #505050;
}
#title {
font-size: 25px;
}
#title2 {
font-size: 20px;
}
.input {
height: 35px;
}
#submit {
width: 375px;
}
.text-right {
font-size: 15px;
}
</style>
</head>
<body>
<form method="get" action="#">
<table>
<tr>
<td id="head1" height="50px"></td>
<td id="head2" style="text-align: right">
<a href="#" class="link">QQ登录 |</a>
<a href="#" class="link">授权管理 |</a>
<a href="#" class="link">申请接入</a>
</td>
</tr>
<tr>
<td class="text"><b><span id="title">账号密码登录</span></b></td>
<td rowspan="7">
<table>
<tr><td style="height: 20px"></td></tr>
<tr>
<span class="text-right"><td><a href="#"><hr>腾讯网</a>将获得以下权限：<hr></td></span>
</tr>
<tr>
<span class="text-right"><td><input type="checkbox" name="check" value="all" checked>全选<hr></td></span>
</tr>
<tr>
<span class="text-right"><td><input type="checkbox" name="check" value="all" checked disabled>获得您的昵称、头像、性别及会员信息</td></span>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<span class="text-right"><td>授权后表名你已同意<a href="#">QQ登录服务协议</a></td></span>
</tr>
<tr><td style="height: 70px"></td></tr>
</table>
</td>
</tr>
<tr>
<td class="text"><span id="title2">推荐使用<a href="#">快速安全登录</a>,防止盗号</span></td>
</tr>
<tr>
<td class="text"><input type="text" name="username" placeholder="支持QQ号/邮箱/手机号登录" size="50px" class="input"></td>
</tr>
<tr>
<td class="text"><input type="text" name="password" placeholder="密码" size="50px" class="input"></td>
</tr>
<tr>
<td class="text"><input type="image" src="./img/3.jpg" id="submit"></td>
</tr>
<tr>
<td style="height: 30px"></td>
</tr>
<tr>
<td style="text-align: right">
<a href="#" class="link2">忘了密码? |</a>
<a href="#" class="link2">注册新账号 |</a>
<a href="#" class="link2">意见反馈</a>
</td>
</tr>
</table>
</form>
</body>
</html>结果：
作业四：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪网</title>
<style>
#index {
background-color: #d9d9d9;
}
th, td {
padding: 8px;
text-align: left;
}
.list {
padding: 8px;
text-align: right;
width: 150px;
}
.input {
padding: 8px;
text-align: left;
width: 300px;
}
body {
background-color: #f8f8f8;
}
.star {
color: #ff3232;
}
.comment {
font-size: 12px;
color: #43b7ff;
text-decoration: none;
}
.comment2 {
font-size: 15px;
color: #1a8fd7;
text-decoration: none;
}
.login {
color: #43b7ff;
text-decoration: none;
}
</style>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<td rowspan="2"><img src="./img/手机.png" width="50px"></td>
<td class="list"><span class="star">*</span>手机号码：</td>
<td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
<td style="width: 150px" rowspan="9"></td>
<td style="width: 300px"></td>
</tr>
<tr>
<td></td>
<td>使用微博账号直接<a href="#">登录</a></td>
<td>已有账号，<a href="#" class="login">直接登录 >></a></td>
</tr>
<tr>
<td rowspan="7"></td>
<td class="list"><span class="star">*</span>设置密码：</td>
<td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
<td style="width: 300px" rowspan="7"></td>
</tr>
<tr>
<td class="list"><span class="star">*</span>兴趣标签：</td>
<td>
<input type="checkbox" value="1" name="check">新闻
<input type="checkbox" value="2" name="check">娱乐
<input type="checkbox" value="3" name="check">文化
<input type="checkbox" value="4" name="check">体育
<input type="checkbox" value="5" name="check">IT&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" value="6" name="check">财经
<input type="checkbox" value="7" name="check">时尚
<input type="checkbox" value="8" name="check">汽车
<input type="checkbox" value="9" name="check">房产
<input type="checkbox" value="0" name="check">生活
</td>
</tr>
<tr>
<td class="list"><span class="star">*</span>手机上发短信：</td>
<td><button style="height: 35px">注册要使用手机发送短信</button></td>
</tr>
<tr>
<td rowspan="4"></td>
<td style="height: 40px"></td>
</tr>
<tr>
<td><a href="#" class="comment">《新浪网络服务使用协议》</a></td>
</tr>
<tr>
<td><a href="#" class="comment">《新浪个人信息保护政策》</a></td>
</tr>
<tr>
<td style="height: 150px"></td>
</tr>
</table>
</form>
<hr/>
<div>
<a href="#" class="comment2">新浪简介&nbsp;&nbsp;</a>
<a href="#" class="comment2">About Sina</a>
<a href="#" class="comment2">广告服务&nbsp;&nbsp;</a>
<a href="#" class="comment2">联系我们&nbsp;&nbsp;</a>
<a href="#" class="comment2">招聘信息&nbsp;&nbsp;</a>
<a href="#" class="comment2">网站律师&nbsp;&nbsp;</a>
<a href="#" class="comment2">SINA English&nbsp;&nbsp;</a>
<a href="#" class="comment2">注册&nbsp;&nbsp;</a>
<a href="#" class="comment2">产品答疑</a>
</div>
<div>
<span style="color: #6c6c6c">客户服务电话 110-120-119 欢迎批评指正</span>
</div>
<div>
<span style="color: #6c6c6c">新浪公司 <a href="#" class="comment2">版权所有</a></span>
</div>
</body>
</html>结果：
