简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >20180330作业

20180330作业

朱佳楠的博客
朱佳楠的博客原创
2018年04月09日 11:45:35472浏览

选项卡切换实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style>
		h2{
			text-align: center;
		}
		.box{
			width: 538px;
			height: 500px;
			margin:20px auto;
			background-color: white;
			border: 1px solid #ccc;
		}
		li{
			list-style: none;
		}
		.box>ul{
			margin: 0;
			padding: 0;
			background-color: #f8f8f8;
			border-bottom: 1px solid #ccc;
			overflow: hidden;		/*不太理解用法*/	
		}		
		.box>ul li{
			float: left;
			width: 90px;
			height:36px;	
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			text-align: center;
			line-height: 36px;			
		}
		.box ul+span{
			float: right;
			width:90px;
			height: 36px;
			line-height: 36px;
			margin-top: -36px;
		}
		.box ul + span >a{
			color: #696969;
			text-decoration: none;
		}
		.box ul li.active{
			border-top: 3px solid orangered;			
			border-bottom: none;
		}
		.box div{
			display: none;
		}
		.box div ul{
			margin:0;
			padding: 10px;
		}
		.box div ul li{
			line-height:1.5em;
		}
		.box div ul li a{
			color: #636363;
			text-decoration: none;
		}
		.box div ul li a:hover{
			color: #000;
		}
		.box div ul li a+span{
			float:right;
			color: red;	
		}




	</style>
</head>
<body>
	<h2>仿PHP中文网选项卡实战</h2>
	<div class="box">
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<span><a href="">更多下载</a></span>
		<div style="display:block">
			<ul>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				<li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
				
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
				<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>			
				
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
				<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
			</ul>
		</div>
		<div>
			<ul>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
				
			</ul>
		</div>
	</div>
	<script>
		var box = document.getElementsByClassName('box')[0];
		var ul = box.getElementsByTagName('ul')[0];
		var li = ul.getElementsByTagName('li');
		var list = box.getElementsByTagName('div');
		for(var i=0;i<li.length;i++){
			li[i].index = i;
			li[i].onmouseover=function(){
				for(var j=0;j<li.length;j++){
					li[j].className = '';
					list[j].style.display = 'none';
				}
				this.className = 'active';
				list[this.index].style.display = 'block';
			}
		}
	</script>
</body>
</html>

运行实例 »

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

实例截图：

%FT5V6A1VC890})DHZ@[MZ3.png

仿机器人聊天窗口实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿机器人聊天窗口</title>
	<style>
		.main{
			width:450px;
			height:650px;
			border: 1px solid #dcdcdc;
			margin:30px auto;
			background-color: lightskyblue;
		}
		.main h2{
			text-align: center;
		}
		.main div{
			width:88%;
			height:500px;
			background-color: #efefef;
			margin:auto;
			border: 4px double green;
		}
		}.main div ul{
			padding: 15px;
		}
		.main div ul li{
			list-style-type: none;
			line-height: 2em;
		}
		table{
			width: 88%;
			height:80px;
			margin:auto;
		}
		button{
			width:50px;
			height:30px;
			background-color: seagreen;
			color: white;
		}
		button:hover{
			background-color: orange;			
		}
	</style>
</head>
<body>
	<div class="main">
		<h2>在线客服</h2>
		<div>
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td>
					<textarea name="text" id="" cols="45" rows="3"></textarea>
				</td>
				<td>
					<button>发送</button>
				</td>
			</tr>
		</table>
	</div>
	<script>
		var btn = document.getElementsByTagName('button')[0];
		var text = document.getElementsByName('text')[0];
		var ul = document.getElementsByTagName('ul')[0];
		var num = 0;
		btn.onclick = function(){
			if(text.value.length == 0){
				alert('是不是忘记输入内容了？');
				return false;
			}
			var data1 = text.value;
			text.value = '';
			var li = document.createElement('li');
			li.innerHTML = '自己：'+data1;
			ul.appendChild(li);
			num +=1;
			setTimeout(function(){
				var info = ['您要问什么？','不可以！','安徽在哪呢？'];
				var data2 = info[Math.floor(Math.random()*3)];
				var kefu = document.createElement('li');
				kefu.innerHTML = '客服：'+data2
				ul.appendChild(kefu);
				num+=1;
			},1000);
			if(num>=10){
				ul.innerHTML = '';
				num = 0;
			}
		}
	</script>
</body>
</html>

运行实例 »

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

实例截图：

O6)JBEY31`@`C$JRM$HQMHI.png

上一条：jQuery 文档操作 20180409-11:51下一条：关于appendTo()、prepend()等知识的学习-2018年4月9日上午11：34完成
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多