HTML期末复习

最新推荐文章于 2024-08-30 16:48:59 发布

花园宝宝在逃秋乏

最新推荐文章于 2024-08-30 16:48:59 发布

阅读量54

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_69701725/article/details/134193343

版权

1 表格实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
	table{
		border: #4309EF
		
	}
</style>
	<table border="1">
		<thead bgcolor="#E71114">
		<tr>
			<th>行业</th>
		    <th>名称</th>
			<th>官网</th>
			<th>性质</th>
		</tr>
		</thead>
		<tbody bgcolor="#E47577">
		<tr>
			<td>高级程序语言</td>
			<td>W3School</td>
			<td>www.w3school.com</td>
			<td>教育</td>
		</tr>
		<tr>
			<td rowspan="3">京东</td>
			<td>京东</td>
			<td>www.jd.com</td>	
			<td>购物</td>
		</tr>
		<tr>
		    <td>当当</td>
			<td>www.dd.com</td>
			<td>购物</td>
		</tr>
		<tr>
			<td>淘宝</td>
			<td>www.tb.com</td>
			<td>购物</td>
		</tr>
		<tr>
			<td rowspan="2">外卖</td>
			<td>美团</td>
			<td>www.mt.com</td>
			<td>外麦</td>
		</tr>
		<tr>
			<td>饿了么</td>
			<td>www.rlm.com</td>
			<td>外卖</td>
		</tr>
	    </tbody>
	</table>
</body>
</html>

2 计算表面积和体积

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<div >
	
</div>
<script>
	function jisuan(){
		var a=document.getElementById("chang").value;
		var b=document.getElementById("kuan").value;
		var c=document.getElementById("gao").value;
		var s=(a*b+a*c+b*c)*2;
		var v=a*b*c;
		document.getElementById("bmj").innerHTML=s;
		document.getElementById("tj").innerHTML=v;
	}
</script>
</head>

<body>
	长:<input id="chang" type="text" name="chang" value="" size="10"/><br>
	宽:<input id="kuan" type="text" name="kuan" value="" size="10"/><br>
	高:<input id="gao" type="text" name="gao" value="" size="10"/><br>
	<input type="button" name="jisuan" value="计算体积和表面积" onClick="jisuan()"/><br>
	此处显示表面积:<p id="bmj" class="display" style="font-size: 18px;"/></p><br>
	此处显示体积:<p class="display" id="tj" style="font-size: 18px;"/></p>
</body>
</html>

3 隐藏显示字块

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$("#button").click(function(){
			$("#get").slideToggle("slow");
		});	  					  
	});	
</script>
<style type="text/css">
#button,#get
	{
	text-align: center;
	padding:50px;
	background: red;
	width: 450px;
	}
#get
	{
		padding: 50px;
		display: none;
		width: 450px;
	}
</style>
</head>
<body>
<div id="button">点击隐藏显示色块</div>
<div id="get">njiijdsf</div>
</body>
</html>