改背景颜色、固定定位+锚记（复习） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0; padding:0;
            }
            div{
                margin:0 auto;
                width:500px;
                height:300px;
                line-height:300px;
                background-color:red;
                text-align:center;
                
            }
            .red{
                background-color:red;
            }
            .blue{
                
                background-color:blue;
                
                
            }
            button{
                /*display:inline-block;*/
                width:100px;
            }
        </style>
    </head>
    <body>
        <div class="red">
            <button onclick="hello()">改变背景颜色</button>
            <!--<a href="javascript:alert('hello')">改变背景颜色</a>-->
        </div>
    </body>
    <script type="text/javascript">
        let divs=document.getElementsByTagName('div')
        function hello(){
            //找到需要改变背景颜色的容器
            
            if(divs[0].className=='red'){
                divs[0].className='blue'
            }else{
                divs[0].className='red'
            }
            
        }
    </script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位+锚记.html</title>
		<style type="text/css">
			.main{
				height: 3000px;
				padding: 1500px 0;
			}
			.img{
				position: fixed;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<!--网页高度三屏 -->
		<div class="main">
			<h1 id="top">我是顶部</h1>
			<div class="img">
				<a href="#top"><img src="img/回到顶部.png"></a>
			</div>
			<!--点击图片，回到顶部-->
		
			
		</div>
	</body>
</html>
posted @ 2026-05-20 21:11  -王心雨-  阅读(9)  评论(0)    收藏  举报