仿php中文网选项卡和聊天对话框2018-04-02 - 每日作业

Home > List of blog posts > 仿php中文网选项卡和聊天对话框2018-04-02

Blogger Information

Blog 33

fans 0

comment 0

visits 24534

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战1：仿PHP中文网选项卡</title>
	<style type="text/css">
		h2{
			text-align: center;
		}

		.box{
			width: 550px;
			height: 550px;
			background-color: white;
			border:1px solid lightgray;
			margin: auto;


		}

		.box>ul{
			margin: 0;
			padding: 0;
			background-color:#F8F8F8;
			overflow: hidden;
		}

		.box>ul li{
			float: left;
			list-style-type: none;
			width: 90px;
			height: 36px;
			border-right:1px solid lightgray; 
			border-bottom:1px solid lightgray; 
			text-align: center;
			line-height: 36px;
		}

		.box>ul .active{
			background-color: white;
			font-weight: bolder;
			border-bottom:none;
			border-top:3px solid orangered;

		}

		.box>ul+span{
			float: right;
			width: 90px;
			height: 36px;
			margin-top: -36px;
			line-height: 36px;
		}

		.box>ul+span a{
			text-decoration: none;
			color: black;
		}

		.box div ul{
			margin: 0;
			padding: 20px;
			list-style-type: none;			
		}
		.box div ul a{
			line-height: 1.7em;
			text-decoration: none;
			color: gray;
		}

		.box div ul span{
			float: right;
			color: red;
		}

		.box div ul a:hover{
			color: black;
		}

		.box div{
			display: none;

		}
	</style>
</head>
<body>
        <!-- 标题 -->
	<h2>实战1：仿PHP中文网选项卡</h2>
	<div class="box">
		<!-- 1.先写ul列表 -->
		<ul>
			<li class="active">技术文章</li>
			<li>网站源码</li>
			<li>原生手册</li>
			<li>推荐博文</li>
		</ul>
		<!-- 2.写右边的“更多下载”标签 -->
		<span><a href="">更多下载>></a></span>

		<!-- 3.写中间的列表 -->
		<div style="display: block;">
			<ul>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
				<li><a href="">js教程 | 使用Vue构建可重用的分页组件</a><span>2018-03-30</span></li>
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-02-20</span></li>
				
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
				<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改</a><span>2018-03-25</span></li>
			
			</ul>
		</div>

		<div>
			<ul>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				<li><a href="">KongLi的博客 | javascript实战2</a><span>2018-03-31</span></li>
				
			</ul>
		</div>

	</div>

	<script type="text/javascript">
		// 1.获取选项卡和对应的列表
		var box=document.getElementsByClassName('box')[0]
		var ul = box.getElementsByTagName('ul')[0]
		var li = ul.getElementsByTagName('li')
        
		var div=box.getElementsByTagName('div')

		for(var i=0;i<li.length;i++ ){
			li[i].index=i
			li[i].onmouseover=function(){

				for(var i=0;i<li.length;i++){
					li[i].className='none'
					div[i].style.display='none'
				}
				this.className='active'
				div[this.index].style.display='block'
			}
		}
		

		


	</script>
</body>
</html>

运行实例 »

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

聊天对话框效果图：

聊天对话框代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实战2：在线客服</title>
	<style type="text/css">
	    h2{
	    	text-align: center;
	    } 
		.box{
			width: 400px;
			height: 650px;
			background-color: skyblue;
			margin: auto;
		}
		.box div{
			width: 360px;
			height: 500px;
			border:3px double green;
			background-color: white;
			margin: auto;
		}

		ul{
			margin: 0;
			padding: 15px;
			list-style-type: none;
			line-height: 2em;
			overflow: hidden;
			/*border: 1px solid red;*/
		}
		table{
			width: 90%;
			height: 80px;
			margin: auto;
		}

		textarea{
			resize:none;
		}

		button{
			width: 50px;
			height: 30px;
			background-color: green;
			color: white;
			border: none;
		}

		button:hover{
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul></ul>
		</div>
		<table>
			<tr>
				<td><textarea cols="40" rows="5" name="text"></textarea></td>
				<td><button type="button">发送</button></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		// 获取文本输入框
		var text=document.getElementsByName('text')[0]
		// 获取发送按钮
		var button=document.getElementsByTagName('button')[0]
		// 获取文本显示框
		var ul=document.getElementsByTagName('ul')[0]
		var pic1='<img src="image/1.jpg" alt="" width="30" height="30" style="border-radius:50%"/>'
		var pic2='<img src="image/2.jpg" alt="" width="30" height="30" style="border-radius:50%"/>'
		var sum=0

		// 给按钮添加点击事件
		button.onclick=function(){
			// alert(text.value)
			if(text.value.length==0){
				alert('客观，请输入内容')
				return false
			}
			var usercomment=text.value
			text.value=''
			// 创建一个新节点
			var li=document.createElement('li')
			li.style.overfolw='hidden'
			li.style.float='right'
			li.innerHTML=usercomment+pic1
			sum+=1
			ul.appendChild(li)
			
			setTimeout(function(){
				var info=['想你了，宝贝','和我在一起好不好','我想和你做羞羞的事','我给你1000万你就答应我好不']
			    var temp=info[Math.floor(Math.random()*4)]
				// 创建一个回复的节点
				var reply=document.createElement('li')
				reply.style.clear='both'
				// reply.style.vertical-align='top'
				reply.innerHTML=pic2+'<span style="color:red">'+temp+'</span>'
				sum+=1
				ul.appendChild(reply)
			},2000)	

			if(sum>9){
				ul.innerHTML=''
				sum=0

			}

		

		}
	</script>
</body>
</html>

运行实例 »

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

手写代码：

Correction status：qualified

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

3月15日作业

2018-03-16 17:03:32