网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换

最新推荐文章于 2024-10-01 18:51:18 发布

泪湿眼眸

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量393

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_45085385/article/details/122018495

版权

本教程介绍了如何利用JavaScript基础实现网页背景图片的动态切换效果，适用于进阶的网站设计学习者。通过简单的代码示例，读者可以了解到JavaScript在控制CSS属性方面的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>阶段案例9.4|21305雷文涛|</title>
		<style type="text/css">
		*{margin: 0; padding: 0;list-style: none;}
			.div-bj{
				margin: 0px auto;
				margin-top: 10%;
				width: 75%;
				height: 600px;
				box-sizing: border-box;
				
			}
			.div-yuan{
				display: inline-block;
				width: 80px;
				height: 80px;
				border-radius: 40px;
				/* background-color: orange; */
				margin: 33px;
				border: 2px solid white;
				z-index: 120;
				position:relative;
				top: 300px;
				left: 9%;
			}
			.div-yuan:hover{
				cursor: pointer;
				transition: 0.3s;
				width: 70px;
				height: 70px;
				margin: 37px;
				border-radius: 36px;
				border: 3px solid red;
			}
			.div-zi{
				display: inline-block;
				width: 120px;
				height: 92px;
				border-radius:10px;
				background-color: darkgreen;
				font-size: 20px;
				line-height: 120px;