<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改CSS样式</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1,.c2,.c3{
width: 100px;
height: 100px;
background-color: green;
}
.c2 {
position: relative;
top: 200px;
left: 200px;
background-color: red;
}
.c3 {
position: absolute;
left: 100px;
top: 100px;
background-color: blue;
}
.hide {
display: none;
}
.c4 {
width: 100px;
height: 100px;
background-color: #111111;
}
</style>
</head>
<body>
<div class="c4 hide"></div>
<p>小强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<p>er强</p>
<div class="c4 hide"></div>
<div class="c1 hide">我的div</div>
<div class="c2">
<div class="c3">我的div</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("p").click(function () {
// $(this).css("color","red");
// $(this).css("font-size","30px");
//修改多个样式,用字典键值对
$(this).css({"color":"red","font-size":"30px"});
});
//相对最初的移动
// $(".c1").offset();
$(".c1").offset({top:100,left:100});
//相对父标签的移动
$(".c3").position();
$(window).scroll(function () {
if ($(window).scrollTop() > 100){
$(".c4").removeClass("hide");
}else {
$(".c4").addClass("hide");
}
})
$(".c4").click(function () {
$(window).scrollTop(0)
})
</script>
</body>
</html>