HTML学习：计算器-表格版+CSS

最新推荐文章于 2021-09-29 10:15:37 发布

是老侯啊

最新推荐文章于 2021-09-29 10:15:37 发布

阅读量1.6k

点赞数 2

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Laohou21/article/details/83903680

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器-表格版+css</title>
		<style>
			td{
				font-size: 30px;
			}
			table{
				width: 35%;
				margin: 0 auto;
			}
			.classtr{
				text-align: center;
				background-color: deepskyblue;
			}
			.classtd{
				width: 25%;
			}
			.classbg{
				background-color: dimgray;
			}
			#inner{
				border: 1px solid red;
				height: 99.5%;
			}
		</style>
	</head>
	<body>
		<table height="90px" cellspacing="0" class="classbg">
			<tr>
				<td>
					&nbsp;&nbsp;&nbsp;&nbsp;<font style="color:red">●
					<font style="color: blue">●
					<font style="color:yellow">●
				</td>
			</tr>			
			<tr>
				<td height="50px" >
					<table style="width: 99%;" cellspacing="0" id="inner">
						<tr>
							<td bgcolor="white"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<table  cellspacing="5" height="450px" class="classbg">
			<tr class="classtr">
				<td class="classtd">AC</td>
				<td class="classtd">+/-</td>
				<td class="classtd">%</td>
				<td>&divide;</td>
			</tr>
			<tr class="classtr">
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>&times;</td>
			</tr>
			<tr class="classtr">
				<td >4</td>
				<td>5</td>
				<td> 6</td>
				<td>-</td>
			</tr>
			<tr class="classtr">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>+</td>
			</tr>
			<tr class="classtr">
				<td>0</td>
				<td>&lt;-</td>
				<td>.</td>
				<td>=</td>
			</tr>
		</table>
	</body>
</html>

是老侯啊

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML学习：计算器-表格版+CSS

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器-表格版+css&lt;/title&gt; &lt;style&gt; td{ font-size: 30px; } table{ width:
复制链接

扫一扫