资讯详情

WEB基础---HTML，Css，js经典习题

(1)制作表格

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <style>    table{     border: 1px solid black;    }    th,td{     border: 1px solid black;     width: 80px;     height: 60px;     text-align: center;    }    .mybody td{     color: #008000;    }        .myalert{     background-color: #F08080;    }   </style>  </head>  <body>   <table>    <thead>     <tr>      <th>姓名</th>      <th>年龄</th>      <th>班级</th>     </tr>    </thead>    <tbody class="mybody">     <tr>      <td>小明</td>      <td>15</td>      <td>722</td>     </tr>     <tr>      <td class="myalert">小明2</td>      <td>26</td>      <td>720</td>     </tr>          <tr>      <td>小明3</td>      <td>36</td>      <td>711</td>     </tr>         </tbody>           </table>  </body> </html>

（2）div布局

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <style>    .main {     width: 500px;     height: 500px;     border: 1px solid black;      margin: 30px auto;     }     .main>.innerdiv {     width: 65px;     height: 65px;     border: 1px solid black;     float: left;     margin: 16px;    }     .panel {     width: 300px;     height: 150px;     border: 1px solid black;     margin: 0px auto;    }     .panel>p {     text-align: center;    }    .panel input[type="button"]{     width: 80px;     height: 40px;    }   </style>  </head>  <body>   <div class="main">    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>     <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>     <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>     <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>     <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    <div class="innerdiv"></div>    </div>    <div class="panel">    <p>     计时:0秒<br />     计分:0分    </p>    <p>     <input type="button" value="开始" />     <input type="button" value="结束" />    </p>   </div>   </body> </html>

（3）div布局

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <style>       html,body{     width: 100%;     height: 100%;     padding: 0px;     margin: 0px;    }          .main {     width: 100%;     height: 100%;     background-color: lightgrey;    }     .top {     width: 100%;     height: 30%;     background-color: lightcoral;    }     .bottom {     width: 100%;     height: 70%;     background-color: lightgoldenrodyellow;    }        .left{          width: 20%;     height: 100%;     background-color: lightblue;     float: left;    }    .right{     width: 80%;     height: 100%;     background-color: lightgreen;     float: left;    }           </style>  </head>  <body>   <div class="main">    <div class="top"></div>    <div class="bottom">     <div class="left"></div>     <div class="righ"></div>
			</div>
		</div>
	</body>
</html>

（4）div布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 
			 
			 */
			.mydiv{
				width: 300px;
				height: 200px;
				border: 1px solid black;
				position: fixed;
				top: 200px;
				left: 50%;
				margin-left: -150px;
			}
			
			.main{
				width: 100%;
				height: 600px;
				background-color: lightgray;
			}
			
		</style>
		
		
	</head>
	<body>
		<div class="main">
			
		</div>
		<div class="mydiv"></div>
	</body>
</html>

（5）导航条制作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul>li{
				/* float: left;
				list-style: none;
				margin-left: 30px; */
				display: inline-block;
				border: 1px solid lightgrey;
				width: 80px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
			}
			ul>li>a{
				text-decoration: none;
				color: #ADD8E6;
			}
			ul>li:hover{
				background-color: lightsalmon;
				cursor: pointer;
			}
		
		</style>
	</head>
	<body>
		<ul>
			<li><a href="###">首页</a></li>
			<li><a href="###">卫浴产品</a></li>
			<li><a href="###">瓷砖产品</a></li>
			<li><a href="###">工程案例</a></li>
			<li><a href="###">关于我们</a></li>
			
		</ul>
		
	</body>
</html>

（6） div-css页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 
		 div+css布局
		 
		 1.考虑好比例
		 2.考虑好元素之间嵌套关系
		 
		 */
			html,body{
				margin: 0px;
				padding: 0px;
				height: 100%;/* 使用比例时 需要父元素高度指定 */
				width: 100%;
			}
		
			.mainPanel{
				width: 100%;
				height: 100%;
				background-color: #F08080;
			}
			
			.top{
				width: 100%;
				height: 20%;
				background-color: lightcyan;
			}
			
			.top{
				width: 100%;
				height: 20%;
				background-color: lightcyan;
			}
		
			.bottom{
				width: 100%;
				height: 80%;
				background-color: lightgoldenrodyellow;
			}
			
			.left{
				width: 20%;
				height: 100%;
				background-color: lightseagreen;
				float: left;
			}
			.right{
				width: 80%;
				height: 100%;
				background-color: lightgrey;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div class="mainPanel">
			<div class="top"></div>
			<div class="bottom">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</body>
</html>

（7）元素居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mainPanel{
				width: 300px;
				height: 500px;
				border: 1px solid black;
				margin: 0px auto;
			}
			
			.innerDiv{
				width: 200px;
				height: 50px;
				border: 1px solid black;
				margin: 200px auto;
				text-align: center;
				line-height: 50px;
			}
			
			.alertDiv{
				width: 200px;
				height: 50px;
				border: 1px solid black;
				background-color: aliceblue;
				position: absolute;
				top: 200px;
				left: 50%;
				text-align: center;
				line-height: 50px;
				margin-left: -100px;
			}
			
		</style>
	</head>
	<body>
		<div class="mainPanel">
			<div class="innerDiv">
				文字<span>abc</span><a href="###">连接</a><input type="button" value="按钮" />
			</div>
		</div>
		<div class="alertDiv">
			警告!! 这是一个漂浮的块
		</div>
	</body>
</html>

（8）全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <input id="checkAllBtn" type="checkbox" onclick="checkAll()" /><label for="checkAllBtn">全选</label>
		 -->
		 <input type="button" value="全选" onclick="checkAll2()" />
		  <input type="button" value="反选" onmouseout="checkRecv()" />
		  <input id="mytext" type="text" value="我的文本框" onchange="checkRecv()" onkeyup="getTextVal()"/>
		  <select onchange="checkRecv()">
			  <option>选项1</option>
			  <option>选项2</option>
			  
		  </select>
		 <hr />
		 <div id="mydiv">
			 <input class="cbs" type="checkbox"/>
			 <input class="cbs" type="checkbox" />
			 <input class="cbs" type="checkbox" />
			 <input class="cbs" type="checkbox" />
		 </div>
		 <!-- 
		 有状态值的属性
		 checked
		 selected
		 disabled
		 
		 
		 -->
		 
		 <form onsubmit="return myFun()"></form>
		 
	</body>
	<script>
	    /* 
		全选 反选 典型场景
		
		记录用户点击过程中的状态切换 */
		var cbChedked = false;//通过变量记录
	
		function checkAll(){
			//console.log(document.getElementById("myele").checked); 
			console.log(document.getElementById("checkAllBtn").checked);
			console.log(document.getElementById("mydiv").getElementsByTagName("input"));
			var eles = document.getElementById("mydiv").getElementsByTagName("input");
			for(var i = 0;i<eles.length;i++){
				eles[i].checked = document.getElementById("checkAllBtn").checked;
			}
			
			
		}
		
		function checkAll2(){
			cbChedked = !cbChedked;
			var eles = document.getElementById("mydiv").getElementsByTagName("input");
			for(var i = 0;i<eles.length;i++){
				
				eles[i].checked = cbChedked;
			}
			
			
		}
		
		function checkRecv(){
			var eles = document.getElementById("mydiv").getElementsByTagName("input");
			for(var i = 0;i<eles.length;i++){

				eles[i].checked = !eles[i].checked;
			}
		}
		
		function getTextVal(){
			console.log(document.getElementById("mytext").value);
			
		}
			
	
	
	</script>
</html>

（9） 图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mydiv{
				width: 93px;
				height: 130px;
				border: 1px solid black;
			}
		
		</style>
	</head>
	<body>
		<div class="mydiv">
			<img id="myimg" src="img/pic1.png" />
		</div>
		
		<hr />
		<input  type="button" value="第一张" onclick="firstPic()" />
		<input type="button" value="上一张" onclick="prevPic()"/>
		<select id="mysel" onchange="changePic()">
			<option value="1">第1张</option>
			<option value="2">第2</option>
			<option value="3">第3</option>
			<option value="4">第4</option>
			<option value="5">第5</option>
			<option value="6">第6</option>
			<option value="7">第7</option>
			<option value="8">第8</option>
			
		</select>
		<input type="button" value="下一张" onclick="nextPic()"/>
		<input type="button" value="最后一张" onclick="lastPic()"/>
		<hr />
		<input type="radio" value="1" name="picindex" onclick="radioChangePic(this)"/>显示
		<input type="radio" value="2" name="picindex" onclick="radioChangePic(this)"/>隐藏
	</body>
	<script>
	/* 
	 找元素 改属性
	 给某个元素赋值  
	 值从哪来
	     自己建变量
		 元素身上的属性
	 
	 
	 */
	
	    var imgidx = 1;
		function firstPic(){

			document.getElementById("myimg").src = "img/pic1.png";
		}
		
		function lastPic(){

			document.getElementById("myimg").src = "img/pic8.png";
		}
		function nextPic(){
		    imgidx++;
			document.getElementById("myimg").src = "img/pic"+imgidx+".png";
		}
		
		function prevPic(){
			imgidx--;
			document.getElementById("myimg").src = "img/pic"+imgidx+".png";
		}
		
		
		function changePic(){
			//下拉列表改变图片索引
			console.log(document.getElementById("mysel").value);
			document.getElementById("myimg").src = "img/pic"+document.getElementById("mysel").value+".png";
		}
		
		function radioChangePic(myobj){
			//切换显示 隐藏
			switch(myobj.value){
				case '1':document.getElementById("myimg").style.display = "inline";break;
				case '2':document.getElementById("myimg").style.display = "none";break;
			}	
			
		}
		
		
	</script>
</html>

（10）div切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mydiv{
				width: 600px;
				height: 400px;
				border: 1px solid black;
				display: none;
			}
			span{
				border: 1px solid black;
			}
			.closeBtn{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="spans">
			<span onclick="addSpanAndDiv()">+</span>
			<span id="span1" style="background-color: lightcoral;" onclick="showdiv(this)">tab1<span class="closeBtn" onclick="closeDiv(this)">X</span></span>
			<span id="span2" onclick="showdiv(this)">tab2<span class="closeBtn" onclick="closeDiv(this)">X</span></span>
			<span id="span3" onclick="showdiv(this)">tab3<span class="closeBtn" onclick="closeDiv(this)">X</span></span>
			<span id="span4" onclick="showdiv(this)">tab4<span class="closeBtn" onclick="closeDiv(this)">X</span></span>

		</div>
		
		<div id="divs">
			<div id="div1" style="display: block;" class="mydiv">d1</div>
			<div id="div2" class="mydiv">d2</div>
			<div id="div3" class="mydiv">d3</div>
			<div id="div4" class="mydiv">d4</div>

			
		</div>
	</body>
	<script>
		var spanidx = 4;
	
		function showdiv(myobj){
			//所有span恢复背景白色
			var eles = document.getElementById("spans").getElementsByTagName("span");
			for(var i = 0;i<eles.length;i++){
				eles[i].style.backgroundColor = "white";
			}
			//点击到的span背景变成红色
			myobj.style.backgroundColor = "lightcoral";
			console.log(myobj.id.replace("span","div"));
			//所有块隐藏
			var eles = document.getElementById("divs").getElementsByTagName("div");
			for(var i = 0;i<eles.length;i++){
				eles[i].style.display = "none";
			}
			//显示特定的块
			var divid = myobj.id.replace("span","div");
			if(document.getElementById(divid) != null){
				document.getElementById(divid).style.display = "block";
			}
			
		}
		
		function addSpanAndDiv(){
			//通过innerHTML 动态添加页面元素
			spanidx++;
			document.getElementById("spans").innerHTML+=' <span id="span'+spanidx+'" onclick="showdiv(this)">tab'+spanidx+'</span> ';
			document.getElementById("divs").innerHTML+=' <div id="div'+spanidx+'" class="mydiv">d'+spanidx+'</div> ';
			
		}
		
		function closeDiv(myobj){
			console.log(myobj.parentNode);
			var divid = myobj.parentNode.id.replace("span","div");
			document.getElementById("spans").removeChild(myobj.parentNode);
			document.getElementById("divs").removeChild(document.getElementById(divid));
		}
		
	
	</script>
</html>

（11）定时跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <input type="button" value="按钮触发定时" onclick="startInterval(this)" /> -->
		<span id="myTimeNum">3</span>秒后页面跳转<span id="showDot">.</span>
		
		
	</body>
	<script>
		/* function startInterval(myobj){
			myobj.disabled = true;
			
			setInterval(function(){
				console.log(1);
			},1000)
			
		} */
		
		setInterval(function(){
			if(document.getElementById("showDot").innerHTML.length==5){
				document.getElementById("showDot").innerHTML = "";
			}
			document.getElementById("showDot").innerHTML+="."
		},200)
		
		setInterval(function(){
			var oldNum = parseInt(document.getElementById("myTimeNum").innerHTML);
			var newNum = oldNum - 1 ;
			document.getElementById("myTimeNum").innerHTML = newNum;
			
			
		},1000)
		
		setTimeout(function(){
			location.href = "http://www.baidu.com";
		},3000)
	
	
	</script>
</html>

标签： 60p直针直脚连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台