综合案例——表格与表单

已于 2024-09-28 11:47:18 修改
阅读量144 收藏
点赞数 1
文章标签： javascript 前端 开发语言
于 2024-09-27 20:28:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80416946/article/details/142601455
版权

1.采用嵌套表格制作达维工作室的"联系我们"子页

<!DOCTYPE html>
<html>
   <head> 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>达维工作室——联系我们</title>
	 <style type="text/css">
		.chu {
			font-weight:bold;
		}
		.zi1 {
			font-family: "微软雅黑";
			font-size: 20px;
			font-weight: bold;
			color:#ED630A;
		}
		.zi2 {
			font-family: "微软雅黑";
			font-weight: bold;
			color: #f60;
			text-decoration: underline;
		}
		.zibai {
			font-family: "微软雅黑";
			color: #FFF;
		}
		body {
			background-image: url(img/bj.jpg);
		}
	</style>
	<head>
<body>
   <table width="1190" border="0" cellpadding="0" cellspacing="0">
	   <tr>
		   <td>
			   <table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
				   <tr>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
						   <img src="img/logo.jpg" width="100" height="63"/>
					   </td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关做品</td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
					   <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
				   </tr>
			   </table>
		    </td>
	     </tr>
	      <tr>
		   <td>
			   <table width="100%" border="0" cellspacing="20" cellpadding="0">
			   <tr>
				   <td height="318">&nbsp;</td>
				   
				   <td width="280" valign="top">
					   <table width="100%" border="0" cellspacing="0" cellpadding="20">
						   <tr>
							   <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
						   </tr>
						   <tr>
							   <td height="196" bgcolor="#FFAF03">
								   <p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
								   电话：0750-XXXXXX<br/>
								   传真：0750-XXXXXX<br/>
								   QQ：12345678<br/>
								   电子邮箱：<br/>
								   123@163.com<br/>
								   工作室网站<br/>
								   www.XXXX.com</p >
							   </td>
						   </tr>
					   </table>
				   </td>
				   
				   <td width="280" valign="top">
					   <table width="100%" border="0" cellspacing="0" cellpadding="20">
						   <tr>
							   <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
						   </tr>
						   <tr>
							   <td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>
								专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
								达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程……</p >
							   <p class="zibai">&nbsp;</p >
							   <p class="zibai chu">更多&gt;&gt;</p >
							 </td>
						   </tr>
					   </table>
				   </td>
				   
					 <td width="280" >
						<table width="100%" border="0" cellspacing="0" cellpadding="20">
						   <tr>
							   <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</td>
						   </tr>
							<tr>
							   <td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队:</p >
							   <p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最合适的设计放案。</p >
							   <p class="zi2">我们的承若：</p >
							   <p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板。根据每个公司的特点，设计出属于客户……</p >
							   <p class="zibai">&nbsp;</p >
							   <p class="zibai chu">更多&gt;&gt;</p >
							   </td>
						   </tr>
					   </table>
				   </td>
			   </tr>
			  </table>
		   </td>
	   </tr>
   </table>
</body>
</html>

2.利用表单制作一个"用户注册信息”表，页面效果如图所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>用户注册信息</title>
		<style type="text/css">
			fieldset{
				width: 700px;
			}
		</style>
		</head>
		<body>
			<form action="" method="post" enctype="multipart/form-data" name="form" id="form">  
			    <fieldset> <legend>用户信息</legend>  
			        <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">  
			            <tr>  
			                <td width="200" align="right">用户名：</td>  
			                <td><input type="text" name="textfield" id="textfield" /></td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">性别：</td>  
			                <td>  
			                    <input type="radio" name="radio" id="radio1" value="radio" checked="checked" />  
			                    男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/> 
			                    <input type="radio" name="radio" id="radio2" value="radio" />  
			                    女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/>
			                </td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">密码：</td>  
			                <td><input type="password" name="textfield2" id="textfield2" /></td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">出生年月：</td>  
			                <td><input name="textfield4" type="text" id="textfield4" size="12" />年
							<select name="select" id="select">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
								<option>7</option>
								<option>8</option>
								<option>9</option>
								<option>10</option>
								<option>11</option>
								<option>12</option>
							</select>
									月</td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">业余爱好：</td>  
			                <td>  
			                    <input type="checkbox" name="checkbox" id="checkbox" />  
			                    <label for="checkbox">看书</label>  
			                    <input type="checkbox" name="checkbox2" id="checkbox2" />  
			                    <label for="checkbox2">上网</label>  
			                    <input type="checkbox" name="checkbox3" id="checkbox3" />  
			                    <label for="checkbox3">打球</label>  
			                </td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">相片：</td>  
			                <td><input type="file" name="filefield" id="filefield" /></td>  
			            </tr>  
			            <tr>  
			                <td width="200" align="right">意见或建议：</td>  
			                <td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>  
			            </tr>  
			            <tr>  
			                <td colspan="2" align="center">  
			                    <input type="submit" name="button" id="button" value="提交" />  
			                    <input type="reset" name="button2" id="button2" value="重置" />  
			                </td>  
			            </tr>  
			        </table>  
			    </fieldset>  
			</form>
	</body>
</html>

江恸
关注
表格的综合案例
weixin_45784564的博客
05-21 3988
任务描述 本关任务：按照以下要求，完成一个复杂的表格创建任务。 创建表格的要求如下： 边框为2px； 宽为100%； cellspacing为0； cellpadding为6； 标题内容为本周财政计划； 在 其它内容和效果图展示的一样。 注意：表格属性的顺序按照创建表格的要求的顺序来写。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之
HTML表单综合案例———注册页面
weixin_45586870的博客
09-29 779
综合案例主要练习: 表格标签, 可以让内容排列整齐. 列表标签 表单标签 效果图如下： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
利用嵌套和表单制作简单网页
最新发布
2301_80756005的博客
09-27 207
采用嵌套表格和表单制作书写简单代码，实现基本网页设计。
第5关：表格的综合案例
weixin_51426308的博客
11-28 660
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格综合</title> <style type="text/css"> th{background-color:#00ff33;} td{background-color:#00ffff;text-align:center} captio
表单综合案例
little_spice的博客
04-02 2233
html学了有一段时间了，感觉内容很简单但是很杂很多，需要记忆，学完表单结合那几个东西随便写了个案例复习一下。 <!doctype html> <html> <head> <title>表单综合案例</title> </head> <body> <form action='#' ...
第五课 HTML（下）——表格、表单、列表标签和综合案例小说排行榜
weixin_62660777的博客
11-11 161
标签，包含名词对名词的解释自定义列表的语法结构如下： 关于我们 新浪微博官方微信 联系我们
Web小案例——表格实现
qq_42000660的博客
07-03 1641
一、绘制一个表格 1、代码实现结构： table表示表格标签，tr表示行标签，td表示一个单元格,th表示表头的一个单元格（与td不同的是文字样式是加粗的） <table> <tr> <th>表头</th> <tr> <tr> <td>单元格</td> <tr> </table> 2、案例： <table&
html表格模板的案例,响应式web开发网页案例 ——29款表单模板
weixin_39793576的博客
06-16 643
如果你正在寻找有趣的响应式web开发网页案例，那你找对地方了。本文与大家分享一下，点击图片即可下载。1、大小：124 KB下载地址：http://www.177347.com/view-105-36247-0.html2、大小：70 KB下载地址：http://www.177347.com/view-105-36248-0.html3、大小：828 KB下载地址：http://www.177347...
网页设计与制作——Dreamweaver CS6标准教程（第二版）案例素材.zip
05-11
通过《网页设计与制作——Dreamweaver CS6标准教程（第二版）》的案例实践，学习者可以掌握以下关键知识点： 1. **基础HTML标记**：理解并使用HTML5的基本元素，如标题、段落、链接、图像等。 2. **CSS样式**：...
响应式web开发网页案例 ——29款表单模板
x163326的专栏
01-27 2216
如果你正在寻找有趣的响应式web开发网页案例，那你找对地方了。本文与大家分享一下，点击图片即可下载。 1、 【网页响应式开发】粉红简洁登录框表单模板 大小：124 KB 下载地址：http://www.177347.com/view-105-36247-0.html  2、 【网页响应式开发】合作信息表单模板 大小：70 KB 下载地址：http://www.177347.com/view-105...
HTML3——表格、列表、表单
coydone的博客
02-13 1302
文章目录表格表格的基本结构构成表格的三个基本要素表格的属性跨行与跨列表格的其它元素和属性列表无序列表有序列表自定义列表表单（h5）form元素input标签的属性type的属性值下拉框标签其它属性fieldset/legend元素details/summary元素 表格 可以对数据进行格式化，使数据显得更加清晰。 表格的基本结构 构成表格的三个基本要素 table：表格的范围，外框；用来定...
如何搭建Vue脚手架
w6437286的博客
09-26 441
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 900
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 592
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 238
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
JavaScript --数字Number的常用方法
weixin_58694594的博客
09-25 563
【代码】JavaScript --数字Number的常用方法。
Ant design vue中的提示框（a-tooltip）
努力的nana
09-25 238
【代码】Ant design vue中的提示框（a-tooltip）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值