Blogger Information
Blog 9
fans 0
comment 1
visits 4191
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月30日作业
红叶的博客
Original
478 people have browsed it

选项卡

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		body { margin: 0; font-size: 14px; color: #333; }
		ul,li,dl,dd { margin: 0; padding: 0;  list-style: none;}
		.clear {clear: both;}
		.box {border: 1px solid #999999; padding: 15px; width: 450px; height: 300px; margin:40px auto 0 auto;}
		.box .nav { height: 40px; background: #d6d6d6; line-height: 40px;clear: both; }
		.box .nav dd { float: left; width: 25%; text-align: center;  }
		.box .nav dd.on { background: #333333; color: #fff; }
		.box ul { display: none; margin: 10px 0 0 0;}
		.box ul li { line-height: 24px; border-bottom: 1px solid #ddd; }
		.box ul li span { float: right; }
	</style>
</head>
<body>
	<div class="box">
		<dl class="nav">
			<dd class="on">新闻动态</dd>
			<dd>行业新闻</dd>
			<dd>媒体报道</dd>
			<dd>体育新闻</dd>
		</dl>
		<ul style="display: block;">
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
			<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报:胜利在此复刻</a></li>
		</ul>
		<ul>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
			<li><span>2018-02-20</span><a href="">好消息!麦考腰背部无结构性损伤,北京时间周一出院!</a></li>
		</ul>
		<ul>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
			<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
		</ul>
		<ul>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
			<li><span>2018-03-01</span><a href="">火箭惨败后,德帅透露1重要消息,雷霆意外遭晴天霹雳</a></li>
		</ul>
	</div>

	<script type="text/javascript">

		var box = document.getElementsByClassName('box')[0]
		var dl = document.getElementsByClassName('nav')[0]
		var tab = document.getElementsByTagName('dd')
		var ul = document.getElementsByTagName('ul')

		for (var i=0; i<tab.length; i++) {
			tab[i].index = i
			tab[i].onmouseover = function (){
				for (var i=0; i<tab.length; i++) {
					tab[i].className = ''
					ul[i].style.display = 'none'
				}
				this.className = 'on'
				ul[this.index].style.display = 'block'		
			}		
		}
		
	</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

仿机器人聊天窗口

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿机器人聊天窗口</title>
	<style type="text/css">
		body { margin: 0; font-size: 14px; color: #333; }
		ul,li,dl,dd { margin: 0; padding: 0;  list-style: none;}

		.win { width: 500px; height: 400px; overflow-y: auto; overflow-x: none; border: 2px solid #ccc; margin: 30px auto 0 auto; }
		.win ul { padding: 15px; line-height: 1.8; }
		.bot { width: 504px;  margin: 0 auto;}
		.bot textarea { width:400px; height: 50px; border: 2px solid #ccc; padding: 5px 10px; float: left;}
		.bot button { width:80px; height: 64px; margin: 0; border: 2px solid #ccc; float: right;}
		
	</style>
</head>
<body>
	<div class="win">
		<ul>
			<li></li>
		</ul>
	</div>
	<div class="bot">
		<textarea cols="50" rows="3" name="text"></textarea>
		<button name="btn" type=button>发送</button>
	</div>
	<script type="text/javascript">
		var win = document.getElementsByClassName('win')[0]
		var list = document.getElementsByTagName('ul')[0]
		var text = document.getElementsByName('text')[0]
		var btn = document.getElementsByName('btn')[0]
		var i = 0
			btn.onclick = function () {
			if (text.value.length == 0) {
				alert('您还没有输入内容哦')
				return false
			}
			var value = text.value
			text.value = ''
			var li = document.createElement('li')
			li.innerHTML = value
			list.appendChild(li)
			i += 1
				setTimeout(function(){
				var info = ['请问有什么可以帮您的?','今天是星期六,不上班,有事工作日来','请排队取号,轮到你的时候再来问把']
				var temp = info[Math.floor(Math.random()*3)]
				var reply = document.createElement('li')
				reply.innerHTML = '<span style="color:#cc0000">'+temp+'</span>'
				list.appendChild(reply)
				i += 1
			},1000)
			if (i > 16) {
				list.innerHTML = ''
				i = 4
			}
		}
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码:

1.png2.png

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post