首页 > 其他分享 >表格布局与表单交互(第三次作业)

表格布局与表单交互(第三次作业)

时间:2024-09-27 23:19:37浏览次数:9  
标签:表格 代码 布局 如下 效果图 nbsp 登入 表单 交互

(题一)效果图如下:

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机布局</title>
	</head>
	<body>
		<table width=300px border="2px" align="center" bordercolor="#000000" bgcolor="#ffdd99">
			<tr>
				<td height="30px" font-weight: bold> &nbsp;<img src="../img/CASIO.bmp">
					<tr>
					<td height="60px" bgcolor="#ffffff"></td>
					</tr>
					<tr>
						<td height="120px">
					<table width=300px border="2px" cellspacing="20px">
						<tr align="center">
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>+</td>
						</tr>
							<tr  align="center">
								<td>4</td>
								<td>5</td>
								<td>6</td>
								<td>-</td>
							</tr>
						<tr align="center">
							<td>7</td>
							<td>8</td>
							<td>9</td>
							<td>*</td>
						</tr>
							<tr align="center">
								<td>0</td>
								<td>=</td>
								<td>CE</td>
								<td>/</td>
						</tr>
					</table>
						</td>
				</tr>
			</tr>
		</table>
	</body>
</html>

(题二)效果图如下:

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		fieldset{
			width: 250px;
		}
		<meta charset="utf-8">
		<title>登入界面</title>
		</style>
	</head>
	<body>
		<fieldset>
			<legend align="center">登入页面</legend>
			<table>
				<tr>
			<td align="center">用户名:</td>
			<td><input type="text" name="usuer" type="text"/></td>
				</tr>
				<tr>
			<td align="center">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
			<td><input type="password" maxlength="10" size="10" /></td>
				</tr>
				<tr>
			<td align="center">类&nbsp;&nbsp;&nbsp;&nbsp;型:</td>
				<td><input type="radio" name="sex" value="male"/>管理员
				<input type="radio" name="sex" value="female"/>普通用户</td>
				</tr>
				<tr>
			<td align="center"></td>
				<td><input type="checkbox" name="a1" value="sing"/>记住密码
				<input type ="checkbox" name="a2" value="dance"/>主动登入</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="submit" value="提交"/>
				<input type ="reset" name="reset"/></td>
			</tr>
			</table>
			</fieldset>
	</body>
</html>

标签:表格,代码,布局,如下,效果图,nbsp,登入,表单,交互
From: https://blog.csdn.net/H2629896520/article/details/142531859

相关文章

  • HTML表单相关知识(第七课)
    目录一、表单的初步认识二、组成部分1、表单域2、表单控件①input输入表单元素②select下拉表单元素③textarea文本域表单元素三、综合案例一、表单的初步认识作用:方便收集用户信息,让页面和用户实现交互组成部分:表单域、表单控件、提示信息二、组成部分1、表单......
  • 第三章 表格布局与表单交互
    3.1表格概述表格是网页中的一个重要容器,可包含文字和图像,表格使网页结构紧凑整齐,使网页内容的显示一目了然3.1.1表格的结构表格是由行和列组成的二维表,而每行又由一个或多个单元格组成,用于放置数据或其他内容3.1.2表格的基本语法标记形式说明<table>    表格标......
  • 第三章 表格布局与表单交互
    3.1表格概述3.1.1表格的结构3.1.2表格的基本语法<table></table>表格标记<caption></caption>表格标题标记<th></th>表格表头标记<tr></tr>表格的行标记<td></td>表格的列标记<!DOCTYPEhtml><html> <head> <metachar......
  • 第3章 表格布局与表单交互
    3.1表格概述3.1.1表格的结构3.1.2表格的基本语法在HTML中,常用表格主要通过5个标记来构成:<table>,<caption>,<th>,<tr>和<td>。<table> <caption>23软件二班名单</caption> <tr> <th>序号</th> <th>姓名</th> ......
  • 国产linux系统(银河麒麟,统信uos)使用 PageOffice 国产版在线打开 word文件并提取数据区
    PageOffice国产版:支持信创系统,支持银河麒麟V10和统信UOS,支持X86(intel、兆芯、海光等)、ARM(飞腾、鲲鹏、麒麟等)、龙芯(LoogArch)芯片架构。查看本示例演示效果本示例关键代码的编写位置Vue+Springboot注意本文中展示的代码均为关键代码,复制粘贴到您的项目中,按照实际的情况,例如......
  • 表单的学习笔记
    表单就是用来收集信息,填入数据的。就像我们在生活中填的调查表,保险单等。表单元素允许我们在页面里填入信息、选择对应信息等,下面我们就来学习一下,也做出来一个表单。首先要先了解表单元素,通过元素才能做出大概轮廓,再用属性来设置需求。一、表单元素form:定义供用户输入的表......
  • pbootcms提示:登录失败:表单提交校验失败,请刷新后重试!
    当使用PBootCMS后台登录时遇到“登录失败:表单提交校验失败,请刷新后重试!”的错误提示时,这通常是由于一些配置或环境问题导致的。以下是一些常见的解决方法:常见解决方法删除 runtime 目录切换PHP版本清除浏览器缓存检查CSRF令牌解决方法详细步骤方法一:删除 runtime......
  • pbootcms通过会员自带上传实现留言表单图片文件上传功能
    在PBootCMS3.0会员版本中,你可以通过修改会员上传头像的功能来实现留言上传图片的功能。以下是详细的步骤和示例代码:步骤复制上传文件将member/comm/upload.html文件复制到上一层目录,命名为comm/upload.html。修改上传接口修改upload.html文件中的上传接口。将upload......
  • 比较好用的调节Table表格的表头和内容的宽度的方法
    因为大部分的Table组件的表头宽度不太适合我们所使用的,我们可以通过封装函数来适应表头的宽度。getColumnWidth(label,prop,tableData){   //label表头名称   //prop对应的内容   //tableData表格数据   constminWidth=150;//最小宽度......
  • Axure解决列表项中"触发内部元件交互"的冲突问题
    背景在绘制列表项中“更多”菜单按钮的时候,我想在我鼠标悬浮上去时会出现一个底色的效果如下图:但我在做的过程中发现如果在一个组下勾选了"触发内部元件鼠标交互样式",那你鼠标还没放到"更多"按钮上就已经给触发了制作过程1、所需元件2、结构3、只需要在"更多"这个......