Web表格表单实验

最新推荐文章于 2024-05-21 12:45:25 发布

陌城羽

最新推荐文章于 2024-05-21 12:45:25 发布

阅读量1.3k

点赞数 37

文章标签：前端

本文链接：https://blog.csdn.net/weixin_60586504/article/details/134606407

版权

一、

在MyWeb文件夹中用HBuilder X等编辑器编写为MyTableDemo_1. html的文件。按如下要求采用表格布局完成CASIO计算器外观设计。浏览器运行结果如下图所示：设计要求如下：

（1）页面标题为“表格应用实例——计算器布局”；

（2）页面内容为3个图层，各自应用wrap、result、op三个id选择器，其中第1个图层中包含2个子图层。第1个图层中插入1幅图像 casio.bmp，第2个子图层插入4行4列的表格。

（3）head部分的style标记中各个id选择器的具体设置如下：

#wrap{ width:410px; height:450px; background-color:rgb(230,230,130); z-index:0; }

#result{ height:60px; width:390px; border:solid 1px; z-index:1;position:absolute;

top:50px;left:20px;background-color:white; }

#op{ height:310px; width:390px; z-index:1;position:absolute; top:115px;left:20px; }

td标记选择器设置为{ border:solid 1px black; width:58px;height:40px;

margin:10px; /*margin表示边距*/

cursor:pointer; /*设置鼠标指针变成手的形状*/ }

（4）主体中表格属性设置cellspacing="30" border="1" ，tr属性设置align="center"。

程序代码截图如下：

<!doctype html>
<html lang="en">
 <head>
		<meta charset="UTF-8">
		<title>表格应用实例——计算器布局</title>
		<style type="text/css">
			#wrap{
				width:410px;
				height:450px;
				background-color:rgb(230,230,130);
				z-index:0;
			}
			#result{			
				height:60px;
				width:390px;
				border:solid 1px;	
				z-index:1;
				position:absolute;
				top:50px;
				left:20px;
				background-color:white;
			}
			#op{			
				height:310px;
				width:390px;				
				z-index:1;
				position:absolute;
				top:115px;
				left:20px;
			}
			td{
				border:solid 1px black;
				width:58px;
				height:40px;
				margin:10px;  
				cursor:pointer; 
			}
		</style>
	</head>
	<body>
		<div id="wrap">
		<img src="casio.bmp "></img>
			<div id="result"></div>
			<div id="op">
				<table cellspacing="30" border="1">
					<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>
			</div>
		</div>
	</body>
</html>

运行如下：

2、

在MyWeb文件夹中用HBuilder X等编辑器编写为MyTableDemo_2. html的文件。实现如下图所示页面效果。要求使用CSS样式表统一定义table和td标记样式。要求如下：

（1）页面标题为“表格嵌套实例”；

（2）table标记样式：边框为8px、线型是双线、颜色为#0000ff。

（3）td标记样式：边框为1px、线型是solid、颜色为black、水平居中对齐。

（4）两个嵌套表格背景颜色分别是为#ffffee和#fefefe。

（5）外表宽度为300px、居中对齐、单元格间距和单元格边距均为0。

（6）两个子表宽度为80%、居中对齐、边距为1px。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格嵌套实例</title>
		<style>
			table{
				border: 8px double #0000ff;	
			}
			td{
				border: 1px solid black;
				text-align: center;
			}
		</style>
		
	</head>
	<body>
		<table width=300px cellspacing="0"cellpadding="0" align=center>
				<tr>
					<td>1</td>
					<td rowspan="2">2</td>
					<td>
						<table align="center";width="80%";border="1px";color=" #ffffee";>
							<tr>
								<td>a</td>
								<td rowspan="2">b</td>
								<td>c</td>
							</tr>
							<tr>
								<td>d</td>
								
								<td>f</td>
							</tr>
							<tr>
								<td>g</td>
								<td>h</td>
								<td>i</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>
						<table align="center"; width="80%";border="1px";bgcolor="#fefefe";>
							<tr>
								<td>a</td>
								<td colspan="2">b</td>
					
							</tr>
							<tr>
								<td>d</td>
								<td>e</td>
								<td>f</td>
							</tr>
							<tr>
								<td>g</td>
								<td>h</td>
								<td>i</td>
							</tr>
						</table>
					</td>
					
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>8</td>
					<td>9</td>
				</tr>
			
		</table>
	</body>
</html>

陌城羽

关注

37
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Web表格表单实验

（2）页面内容为3个图层，各自应用wrap、result、op三个id选择器，其中第1个图层中包含2个子图层。第1个图层中插入1幅图像 casio.bmp，第2个子图层插入4行4列的表格。（3）td标记样式：边框为1px、线型是solid、颜色为black、水平居中对齐。（2）table标记样式：边框为8px、线型是双线、颜色为#0000ff。（5）外表宽度为300px、居中对齐、单元格间距和单元格边距均为0。（6）两个子表宽度为80%、居中对齐、边距为1px。（1）页面标题为“表格嵌套实例”；
复制链接

扫一扫