简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > PHP学习第11天 相册与计算器 2018年3月29日
Blogger Information
Blog 16
fans 0
comment 0
visits 9584
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP学习第11天 相册与计算器 2018年3月29日
方圆电脑
Original
525 people have browsed it

PHP学习第11天 相册与计算器 2018年3月29日

作业要求: 

1. 模仿课堂案例制作相册与计算器，并把全部制作过程发到博客中；
2. 迷你计算器的案例要求代码手抄一遍。

代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.实战:明星相册</title>
	<style type="text/css">
		.box {
			width: 500px;
			height: 700px;
			background-color: #efefef;
			border: 1px solid lightgray;
			margin: 20px auto;
			text-align: center;
			color: #636363;
			box-shadow: 2px 2px 2px #999;
		}
		.box ul {
			margin:0;
			padding:0;
			/*将ul转为BFC独立块,使之不受内部浮动元素的影响*/
			overflow: hidden;
		}
		.box ul li {
			list-style-type: none;
			float:left;
			/*width: 100px;*/
			/*height: 40px;*/
			background-color: skyblue;
			margin-left: 20px;

		}

		.box ul li a {
			/*将a转为块元素,并设置为li的宽高,这样可以使整个li可以被点击*/
			display: block;
			width: 100px;
			height: 40px;
			line-height: 40px;
			color: white;
			text-decoration: none;
		}
		.box ul li:hover {
			font-size:1.2em;
			background-color: coral;
		}

		.box .pic {
			width: 450px;
			height:450px;
			border: 1px solid lightgray;
			/*消除img标签底部的空间区*/
			line-height: 1px;
			margin: auto;
			margin-top: 50px;

		}

		.box .pic img {
			width: 100%;
			height: 100%;
		}

		.box .pic img:hover {
			/*border-radius: 50%;*/
		}

	</style>
</head>
<body>
	<!-- 知识点:
		1.js代码可以写在哪里?2.js如何调用的? 3.js函数的使用语法-->
	<div class="box">
		<h2>明星相册</h2>
		<ul>
			<!-- <li><a href="../images/zly.jpg" onclick="document.getElementById('img').src = this.href;return false">赵丽颖</a></li> -->
			<li>
				<a href="../images/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this);return false">赵丽颖</a>
			</li>
			<li>
				<a href="../images/gyy.jpg" title="《倚天屠龙记》,《咱们经婚吧》,《爱无悔》..." onclick="changePic(this);return false">高圆圆</a>
			</li>
			<li>
				<a href="../images/sl.jpg" title="《那年花开月正圆》,《甑环传》,《玉观音》..." onclick="changePic(this);return false">孙俪</a>
			</li>
			<li><a href="../images/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this);return false">范冰冰</a></li>
		</ul>
		<div class="pic">
			<img src="../images/zwt.png" alt="" id="img">
			
		</div>
		<p id='info'></p>
	</div>
	
	<script type="text/javascript">
		function changePic(pic) {
			//1.获取到要替换的明星图片与简介信息
			var picUrl = pic.href
			var picInfo = pic.title
			var picName = pic.innerHTML

			//2.获取到页面中,要被替换掉的图像元素对象
			var img = document.getElementById('img')
			var p = document.getElementById('info')

			//3. 将对应的图像与信息占位符进行替换
			img.src = picUrl
			p.innerHTML = picName+':'+picInfo
			p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>'

		}
	</script>


</body>
</html>

运行实例 »

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

（未完待续）

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！