科技与生活网页作业_科技改变生活js网页-优快云博客

本文链接：https://blog.youkuaiyun.com/gougouxianka/article/details/139357208

图片素材与文字引入自百度

全网页大概四十分钟写完，适合小白。

唯一的难点就是点击图片然后图片转动消失，不过基本上没问题。

这个网页复习了基本的html结构，基本表单元素，浮动与定位，盒模型，js动画与jq的运用。

效果展示如图

点击图片就会转动并消失在浏览器窗口。

代码部分

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>科技与生活</title>
		<link rel="stylesheet" href="css/gyjs.css" />
	</head>
	<body>
		<div id="guanggao">
			<a href="./wy/denglu.html"><span>登录</span></a>
			<a href="./wy/guanyu.html"><span>关于</span></a>
		</div>
		<div id="err">
			<div>
				<h1>科技与生活</h1>
			</div>
			<div id="bei">
				<ul>
					<a href="#"><li style="font-weight: 900;">智能家居</li></a>
					<a href="./wy/szhzy.html"><li>数字化资源</li></a>
					<a href="./wy/ai.html"><li>ai科技</li></a>
				</ul>
			</div>
			<div class="neir">
				<div id="zuo">
					<h1>智能家居</h1>
					<p>通过物联网技术连接的家居设备</p>
					<div>
						<img src="img/OP (1).jpg" alt="" />
						<img src="img/OP (2).jpg" alt="" />
					</div>
				</div>
				<div id="you">
					<p>智能家居（smart home, home automation）是以住宅为平台，利用综合布线技术、网络通信技术、 安全防范技术、自动控制技术、音视频技术将家居生活有关的设施集成，构建高效的住宅设施与家庭日程事务的管理系统，提升家居安全性、便利性、舒适性、艺术性，并实现环保节能的居住环境 。</p>
					<p>
						将家居设备连接起来，实现智能化控制。我们可以通过手机、语音等方式远程控制家电，享受更加便捷的生活。此外，智能家居系统还可以根据我们的生活习惯，自动调节室内环境，提高生活质量。科技始终在你我身边. 
					</p>
				</div>
			</div>
			
		</div>
	</body>
</html>

css部分

*{
	margin: 0;
	padding: 0;
}
body{
	margin: 0px auto;
	text-align: center;
	background-color: black;
	
	
}
#bei{
	width: 100%;
	background-color: red;
}
ul{
	list-style: none;
	width: 320px;
	height: 40px;
	
	line-height: 0px;
	margin: 20px auto;
	
}
li{
	float: left;
	padding: 20px;
	
}
li:hover{
	background-color: burlywood;
}
h2{
	width: 300px;
	text-align: center;
	
	margin: 50px auto;
}
#err{
	margin: 0 auto;
	width: 1000px;
	background-color: white;
	height: 1200px;
}

a{
	text-decoration: none;
	list-style: none;
	color: black;
}
.neir{
	width: 100%;
	height: 25rem;
	background-color: brown;
}
#zuo{
	width: 50%;
	height: 25rem;
	
	float: left;
}

#zuo h1{
	margin-top: 20px;
	text-align:start;
}
#zuo p{
	text-align: start;
}
#zuo>div{
	margin-top: 50px;
}
#zuo>div img{
	width: 50%;
	height: 150px;
	float: left;
	border-radius: 25px;
}
#you{
	width: 50%;
	height: 25rem;
	
	float: right;
}
#you p{
	text-align: start;
	padding: 20px;
	margin-top: 20px;
	text-indent: 15px;
}
#guanggao{
	width: 80px;
	height: 80px;
	background-color: red;
	font-size: 30px;
	position: fixed;
	left: 50%;
	margin-left: 500px;
	top: 800px;
	border-radius: 10px;
}
form{
	margin: 0 auto;
	width: 800px;
	height: 300px;
	background-color: rebeccapurple;
	text-align: center;
}
input{
	margin: 20px;
}
.tijiao{
	text-align: center;
	font-size: 20px;
	width: 100px;
	height: 50px;
}

js部分

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
		<script>
			$(document).ready(function() {
				$("img").click(function() {
					$("img").animate({
						left: '100%'
					});

				});
			});
		</script>