表格布局与表单交互练习

于 2024-09-28 20:37:23 发布
阅读量37 收藏
点赞数 1
文章标签： xhtml css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80916358/article/details/142619104
版权

第一题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>计算器布局</title>
</head>
<body>
    <!-- 创建一个表格，设置边框、对齐方式和背景色 -->
    <table border="1px" align="center" width="20%" height="15%" bordercolor="black" bgcolor="grey">
        <!-- 表格的第一行，包含一个图像，跨越4个单元格 -->
        <tr align="center">
            <td colspan="4" height="20"><img src="img/xt1.bmp" align="left"/></td>
        </tr>
 
        <!-- 第二行，留空，用于增加垂直空间 -->
        <tr align="center" bgcolor="white">
            <td colspan="4" height="50"></td>
        </tr>
 
        <!-- 第三行，数字键 1, 2, 3 和 4 -->
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
 
        <!-- 第四行，数字键 4, 5, 6 和减号 -->
        <tr align="center">
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
 
        <!-- 第五行，数字键 7, 8, 9 和乘号 -->
        <tr align="center">
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
 
        <!-- 第六行，数字键 0 和操作符键 '='、'CE' 和 '/' -->
        <tr align="center">
            <td>0</td>
            <td>=</td>
            <td>CE</td>
            <td>/</td>
        </tr>
    </table>
</body>
</html>

第二题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<style type="text/css">
			fieldset{
				width: 350px;
			}
		</style>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
			<fieldset>
				<legend align="center">登录页面</legend>
				<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td width="100" align="right">用户名:</td>
						<td><input type="text" name="username" id="usernameField"/></td>
					</tr>
					<tr>
						<td width="100" align="right">密&nbsp;&nbsp;&nbsp;码:</td>
						<td><input type="password" name="password" id="passwordField"/></td>
					</tr>
					<tr>
						<td width="100" align="right">类&nbsp;&nbsp;&nbsp;型:</td>
						<td>
						<label>
						<input name="userType" type="radio" value="admin" checked="checked"/>管理员
						</label>&nbsp;&nbsp;<label>
						<label>
							<input name="userType" type="radio" value="user"/>普通用户
						</label>
						</label>
						</td>
					</tr>
					<tr>
						
						<td colspan="2" align="center">
							<input type="checkbox" name="rememberMe" value="1"> 记住密码
							<input type="checkbox" name="autoLogin" value="1"> 自动登录
						</td>
					</tr>
					<tr>
						<td colspan="3" 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>

市之濑加那
关注
第三章 表格布局与表单交互练习
2301_82186449的博客
09-28 39
【代码】第三章 表格布局与表单交互练习。
第三章 表格布局与表单交互 课后练习
最新发布
xbc811223的博客
09-28 143
1.采用表格布局完成“CASIO计算器”外观设计，其中表格的每一个单元格均需设计带边框。2.编写程序实现一个登录页面。
第三章 表格布局与表单交互 章节练习
2301_78694366的博客
09-25 188
【代码】第三章 表格布局与表单交互 章节练习。
第3章 表格布局与表单交互
2401_85025850的博客
09-27 376
form>--单行文本输入框-->用户名：--密码输入框-->密码：姓名：性别：--radio单选按钮-->男性--checked默认选择这一项-->
第三章 表格布局与表单交互
2402_83287175的博客
09-25 1514
第二张
安卓开发布局总结与UI界面交互功能实现
weixin_56358837的博客
06-20 946
在学习安卓开发的过程中，UI界面交互功能的实现方法是一个重要的内容。通过实际案例的学习和练习，我掌握了按钮点击、列表项点击、滑动操作以及菜单和对话框的实现方法。同时，在项目实践中不断遇到新的挑战和问题，通过查阅官方文档、参与社区讨论以及观看教学视频等方式，不断提升自己的技能水平。持续改进措施有以下几点：查阅官方文档：安卓官方文档提供了详尽的API说明和示例代码，是学习和解决问题的权威资源。参与讨论：加入安卓开发者社区，通过论坛、微信群、QQ群等途径，与其他开发者交流经验和解决方案。
WEB入门二 表格和表单
张晨光老师的播客
02-14 8648
学习内容Ø表格的作用和制作Ø表单的制作能力目标Ø掌握表格的创建Ø掌握设置表格的常用属性；Ø理解表单的作用Ø熟练掌握表单常用元素本章简介表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量
初识HTML（三）表格、表单
Simple子夜
03-13 1676
前言： 本章节将了解到HTML里较为重要的标签：表格与表单。说到表格，在早期时候的网页甚至整个页面都是表格来进行布局的，笔者也在刚学习HTML的时候，就曾整张页面都是使用表格完成的，其作用可见不一般。而表单的话则是前后端交互的一个接口，在成为一个动态页面上起到了作用，那下面来了解一下它们的使用方式吧！ HTML表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（
php开发日记之web表单交互
xiaolei565的专栏
10-12 758
上一篇说到这段时间一直在练习web表单交互的例子，今天就以表单与mysql交互说一下，本次只说，表单内容上传到数据库服务器 使用dw，新建一个流体网格，选择xhtml，简历手机网页，将css文件保存为test.css，在html页面插入一个表单（form），然后在表单里面插入一个8*2的表格，将表格设置为左右1:3的布局，将第一行和最后一行表格中的左右表格分别合并中间的表格，标签分别为，
交互式表格2020：交互式表格练习
02-24
- 针对不同设备（如手机、平板、桌面）优化表格布局，确保在任何屏幕尺寸下都能良好显示。 - 使用媒体查询(`@media`)和CSS Flexbox或Grid布局实现响应式表格。 6. **现代Web框架的应用** - 如React、Vue或...
email-form:关于构建表单HTML和CSS练习
04-08
在构建一个电子邮件表格，也就是常说的“email form”...通过练习，你可以更好地理解这些技术，并能创建出符合需求的交互式表单。在"email-form-main"这个项目文件中，你将有机会实际操作，将理论知识转化为实际代码。
Html5网页项目，帮助HTML布局练习
05-31
传统上，我们依赖表格、CSS表达式或者JavaScript来实现复杂的页面布局，但这些方法往往存在可维护性差、兼容性问题多等缺点。HTML5引入了一些新的元素，如`<header>`、`<footer>`、`<nav>`、`<section>`、`<article>...
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 4234
HTML over
XHTML学习
大河之犬的博客
09-20 395
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
css边框修饰
weixin_74261199的博客
09-18 766
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
CSS05-复合选择器
qq_31532983的博客
09-24 233
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
uniapp沉浸式导航栏+自定义导航栏组件
chu396815830的博客
09-19 1131
uniApp 中实现沉浸式导航栏和自定义导航栏组件。
CSS04-Chrome调试工具
qq_31532983的博客
09-24 268
Chrome调试工具
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值