HTML,CSS，JS小实例

最新推荐文章于 2023-03-11 21:23:20 发布

Danny_hi

最新推荐文章于 2023-03-11 21:23:20 发布

阅读量2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43024228/article/details/101014652

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

eg1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#ICtable{
				font-family: "微软雅黑";
				width: 80%;
				border-collapse: collapse;
				text-align: center;
				margin: auto;
			}
			th{
				font-size: 20px;
				padding: 5px 0;
				background: #A7C942;
				color: #fff;
			}
			td{
				font-size: 16px;
				border: 1px solid #98bf21;
				padding: 5px 7px;
			}
			
			tr:nth-of-type(odd) td {
							background-color: #EAF2D3;
						}
		</style>
		<script>
		</script>
	</head>
	<body>
		<table id="ICtable">
			<tr>
				<th>指令寻址</th>
				<th>SYS_12</th>
				<th>SYS_13</th>
				<th>SYS_14</th>
				<th>SYS_15</th>
			</tr>
			<tr>
				<td>ROM空间</td>
				<td>1K</td>
				<td>2K</td>
				<td>4K</td>
				<td>5K</td>
			</tr>
			<tr>
				<td>BYTE寻址</td>
				<td>ALL</td>
				<td>ALL</td>
				<td>ALL</td>
				<td>ALL</td>
			</tr>
			<tr>
				<td>WORD寻址</td>
				<td>0~0x1F</td>
				<td>0~0x1F</td>
				<td>0~0x1F</td>
				<td>ALL</td>
			</tr>
			<tr>
				<td>BIT寻址</td>
				<td>0~0x1F</td>
				<td>0~0x1F</td>
				<td>ALL</td>
				<td>ALL</td>
			</tr>
		</table>
	</body>
</html>

效果图：
在这里插入图片描述

eg2:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div{
			width: 200px;
			height: 100px;
			float:left;
			border: 1px solid black;
			margin: 10px;
		}
	</style>
	<script>
		window.onload=function ()
		{
			var aDiv=document.getElementsByTagName("div");
			for(var i=0;i<aDiv.length;i++)
			{
				aDiv[i].style.background="green";
			}
		}
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

在这里插入图片描述
eg3:选项卡

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#div1 .active{background: yellow;}
		#div1 div{width: 200px;height: 200px;background: #CCC;border: 1px 
		solid #999;display: none;}
	</style>
<script>
	window.onload=function ()
	{
		var oDiv=document.getElementById("div1");
		var aBtn=oDiv.getElementsByTagName("input");
		var aDiv=oDiv.getElementsByTagName("div");
		
		for(var i=0;i<aBtn.length;i++)
		{
			aBtn[i].index=i;
			aBtn[i].onclick=function ()
			{
				for(var i=0;i<aBtn.length;i++)
				{
					aBtn[i].className="";
					aDiv[i].style.display="none";
				}
				this.className="active";
				aDiv[this.index].style.display="block";
			}
		}
	}
</script>
</head>
<body>
	<div id="div1">
		<input class="active" type="button" value="C++" />
		<input type="button" value="C#" />
		<input type="button" value="Java" />
		<input type="button" value="Python" />
		<div style="display:block;">C++擅长面向对象程序设计，还可以进行基于过程的程序设计</div>
		<div>C#是微软公司在2000年6月发布的一种新的编程语言</div>
		<div>Java是由Sun Microsystems公司于1995年5月推出的</div>
		<div>Python是一种跨平台的计算机程序设计语言</div>
	</div>
</body>
</html>

在这里插入图片描述

Danny_hi

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML,CSS，JS小实例

eg：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #ICtable{ font-family: "微软雅黑"; width: 80%...
复制链接

扫一扫