模態(tài)對話框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>模態(tài)對話框2</title>
<style>
.shadow {
background-color: black;
height: 1000px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
z-index: 100;
display: none;
}
.content {
background-color: white;
width: 300px;
height: 400px;
position: fixed;
top: 100px;
left: 500px;
right: 200px;
z-index: 2000;
display: none;
}
</style>
</head>
<body>
<button id="btn">點我</button>
<div class="shadow"></div>
<div class="content">
<form action="">
用戶名<input type="text">
<input type="submit">
<input type="button" id="cancel" value="取消">
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
console.log(jQuery)
</script>
<script>
$('#btn').click(function () {
//console.log(123);
//$(".shadow").css('display','block');
//$(".content").css('display','block');
$(".shadow").show();
$(".content").show();
});
$('#cancel').click(function () {
$(".shadow").hide();
$(".content").hide();
})
</script>
</html>
定位
絕對定位：以頁面為參考點進行移動，固定定位是絕對定位的一種
相對定位：以標簽元素本身作為移動對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.div1{
width: 500px;
height: 500px;
background-color: red;
position: relative;
bottom: 100px;
right: 100px;
}
{#.div2{#}
{# width: 500px;#}
{# height: 500px;#}
{# background-color: blue;#}
{# position: absolute;#}
{#}#}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
