【无标题】

在这里插入图片描述

代码案例


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<form>
		<table border="0" align="center" width="600" cellspacing="15">
			<tr height="150">
				<td>
					<img src="images/logo_baidu.jpg" />
				</td>
				<td></td>
			</tr>
			<tr>
				<td><strong>添加注册信息</strong></td>
				<td></td>
			</tr>
			<tr>
				<td align="right">邮箱:</td>
				<td><input type="text" name="" /></td>
			</tr>
			<tr>
				<td align="right">密码:</td>
				<td><input type="text" name="" /></td>
			</tr>
			<tr>
				<td align="right">确认密码:</td>
				<td><input type="text" name="" /></td>
			</tr>
			<tr>
				<td align="right">验证码:</td>
				<td>
					<table>
						<tr>
							<td><input type="text" name="" /></td>
							<td><img src="images/yz.jpg" /><td>
							<td><a href="#">注册用户</a></td>
						</tr>
					</table>
					
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="checkbox" name="">
					我已阅读并接受<a href="#">《百度用户协议》</a>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<table width="80%">
						<tr>
							<td><input type="image" src="images/button.jpg" name=""></td>
							<td><input type="reset" name="" value="重新填写"></td>
						</tr>
					</table>
					
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

案例2

4、青春不常在
1)青春不常在的表单.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<table border="0" align="center" width="600" >
		<caption><h3>青春不常在,抓紧谈恋爱</h3></caption>
		<!-- 第一行 -->
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="sex" /><img src="images/man.jpg"><input type="radio" name="sex" /><img src="images/women.jpg"></td>
		</tr>
		<!-- 第二行 -->
		<tr>
			<td>生日:</td>
			<td>
				<select>
					<option>请选择年</option>
					<option>1998</option>
					<option>1999</option>
					<option>2000</option>
				</select>
				<select>
					<option>请选择月</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select>
				<select>
					<option>请选择日</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
				</select>
			</td>
		</tr>
		<!-- 第三行 -->
		<tr>
			<td>所在地区:</td>
			<td>
				<input type="text" name="" value="北京" />
			</td>
		</tr>
		<!-- 第四行 -->
		<tr>
			<td>婚姻状况:</td>
			<td>
				<input type="radio" name="marry">未婚
				<input type="radio" name="marry">已婚
				<input type="radio" name="marry">离婚
			</td>
		</tr>
		<!--5-->
		<tr>
			<td>学历:</td>
			<td>
				<input type="text" name="" value="小学" />
			</td>
		</tr>
		<!--6-->
		<tr>
			<td>月薪:</td>
			<td>
				<input type="text" name="" value="100000" />
			</td>
		</tr>

		<!--7-->
		<tr>
			<td>手机号:</td>
			<td>
				<input type="text" name="" value="" />
			</td>
		</tr>
		<!--8-->
		<tr>
			<td>昵称:</td>
			<td>
				<input type="text" name="" value="" />
			</td>
		</tr>
		<!--9-->
		<tr>
			<td>喜欢的类型:</td>
			<td>
				<input type="checkbox" name="love">妩媚
				<input type="checkbox" name="love">柔美
				<input type="checkbox" name="love">可爱
				<input type="checkbox" name="love">小鲜肉
				<input type="checkbox" name="love">型男
				<input type="checkbox" name="love">气质

			</td>
		</tr>
		<!-- 第十行 -->
		<tr>
			<td>自我介绍:</td>
			<td>
				<textarea>
					
				</textarea>
			</td>
		</tr>
		<!--11-->
		<tr>
			<td></td>
			<td>
				<input type="image" src="images/btn(1).png" name="">
			</td>
		</tr>
		<!--12-->
		<tr>
			<td></td>
			<td>
				<input type="checkbox" name="agree" checked="checked">我同意注册条款和会员加入标准
			</td>
		</tr>
		<!--13-->
		<tr>
			<td></td>
			<td>
				<a href="会员登录页面.html">我是会员,立即登录</a>
			</td>
		</tr>
		<!--14-->
		<tr>
			<td></td>
			<td>
				 <h3>我承诺</h3>
				 <ul>
				 	<li>年满18岁、单身</li>
				 	<li>抱着严肃的态度</li>
				 	<li>真诚寻找另一半</li>
				 </ul>
			</td>
		</tr>
	</table>
</body>
</html>


2)会员登录表单.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<table border="0" align="center" width="400">
		<caption><h3>会员登录</h3></caption>
		<!-- 第一行 -->
		<tr>
			<td>登录账号:</td>
			<td>
				<input type="text" name="" placeholder="邮箱/ID/手机号" />
			</td>s
		</tr>
		<!--2-->
		<tr>
			<td>密码:</td>
			<td>
				<input type="text" name="" placeholder="密码" />
			</td>
		</tr>
		<!--3-->
		<tr>
			<td></td>
			<td>
				<input type="checkbox" name="" checked="checked" />两周内自动登录
			</td>
		</tr>
		<!--4-->
		<tr>
			<td></td>
			<td>
				<input type="image" src="images/login.png" name="" checked="checked" />
				<a href="#">忘记密码</a>
			</td>
		</tr>
		<!--5-->
		<tr>
			<td>其他账号登录:</td>
			<td>
				<input type="image" src="images/ico1.png" name="" />QQ账号
				<input type="image" src="images/ico2.png" name="" />新浪微博
				<input type="image" src="images/ico3.png" name="" />百度账号

				 
			</td>
		</tr>
		<!--6-->
		<tr>
			<td></td>
			<td>
				 
				<a href="#">还不是会员?立即注册</a>
			</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

效果图

在这里插入图片描述

6、小说排行榜


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!--86列的表格-->
	<table border="1" width="500" height="300" cellspacing="0" align="center">
		<caption><h3>小说排行榜</h3></caption>
		<!--第一行-->
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<!--2-->
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="images/down.jpg"></td>
			<td>345</td>
			<td>123</td>
			<td>
				<a href="">贴吧</a>
				<a href="images/guichuideng.jpg">图片</a>
				<a href="">百科</a>
			</td>
		</tr>
		<!--3-->
		<tr>
			<td>2</td>
			<td>盗墓笔记</td>
			<td><img src="images/down.jpg"></td>
			<td>124</td>
			<td>675432</td>
			<td>
				<a href="">贴吧</a>
				<a href="">图片</a>
				<a href="">百科</a></td>
		</tr>
		<!--4-->
		<tr>
			<td>3</td>
			<td>西游记</td>
			<td><img src="images/up.jpg"></td>
			<td>212</td>
			<td>7654</td>
			<td>
				<a href="">贴吧</a>
				<a href="">图片</a>
				<a href="">百科</a></td>
		</tr>
		<!--5-->
		<tr>
			<td>4</td>
			<td>东游记</td>
			<td><img src="images/up.jpg"></td>
			<td>23</td>
			<td>75645</td>
			<td>
				<a href="">贴吧</a>
				<a href="">图片</a>
				<a href="">百科</a></td>
		</tr>
		<!--6-->
		<tr>
			<td>5</td>
			<td>甄嬛传</td>
			<td><img src="images/down.jpg"></td>
			<td>121</td>
			<td>7676</td>
			<td>
				<a href="">贴吧</a>
				<a href="">图片</a>
				<a href="">百科</a></td>
		</tr>
		<!--7-->
		<tr>
			<td>6</td>
			<td>水浒传</td>
			<td><img src="images/up.jpg"></td>
			<td>576576</td>
			<td>1231421</td>
			<td>
				<a href="">贴吧</a>
				<a href="">图片</a>
				<a href="">百科</a></td>
		</tr>
		<!--8-->
		<tr>
			<td>7</td>
			<td>三国演义</td>
			<td><img src="images/up.jpg"></td>
			<td>234</td>
			<td>7686</td>
			<td>
				<a href="">贴吧</a>
				<a href="">图片</a>
				<a href="">百科</a></td>
		</tr>
	</table>
</body>
</html>

效果图

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值