課程
/前端開(kāi)發(fā)
/HTML/CSS
/初識(shí)HTML(5)+CSS(3)-升級(jí)版
有沒(méi)有辦法可以同時(shí)顯示移動(dòng)前和移動(dòng)之后的div位置就像效果圖那樣
2018-09-04
源自:初識(shí)HTML(5)+CSS(3)-升級(jí)版 13-7
正在回答
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative樣式</title><style type="text/css">#box1{??? width:200px;??? height:200px;?border:2px red dotted;?position:absolute;}#div1{??? width:200px;??? height:200px;?border:2px red solid;?position:relative;??? left:100px;??? top:50px;}
</style></head><body>??? <div? id="box1"> try</div>?<div id="div1"></div>?<span>偏移前的位置還保留不動(dòng),覆蓋不了前面的div沒(méi)有偏移前的位置</span></body></html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流動(dòng)模式下的塊狀元素</title>
<style type="text/css">
#one{
color: red;font-size: 20px;
border: 2px dashed red;
width: 300px;height: 300px;
position: relative;
}
#two{
color: red;
border: 2px solid red;
height: 300px;width: 300px;
position: absolute;
top: 50px;
left: 70px;
</style>
</head>
<body>
? ? <div id="one">之前的位置
? ? <div id="two">移動(dòng)后的位置
? ? </div>
</body>
</html>
不知道
__心無(wú)旁騖_ 提問(wèn)者
舉報(bào)
HTML(5)+CSS(3)基礎(chǔ)教程8小時(shí)帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽用法和意義
1 回答顯示的問(wèn)題
6 回答空格顯示問(wèn)題
1 回答顯示的有問(wèn)題
2 回答字體顯示問(wèn)題
1 回答select的選擇顯示問(wèn)題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢(xún)優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-09-17
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative樣式</title>
<style type="text/css">
#box1{
??? width:200px;
??? height:200px;
?border:2px red dotted;
?position:absolute;
}
#div1{
??? width:200px;
??? height:200px;
?border:2px red solid;
?position:relative;
??? left:100px;
??? top:50px;
}
</style>
</head>
<body>
??? <div? id="box1"> try</div>
?<div id="div1"></div>
?<span>偏移前的位置還保留不動(dòng),覆蓋不了前面的div沒(méi)有偏移前的位置</span>
</body>
</html>
2019-04-25
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流動(dòng)模式下的塊狀元素</title>
<style type="text/css">
#one{
color: red;font-size: 20px;
border: 2px dashed red;
width: 300px;height: 300px;
position: relative;
}
#two{
color: red;
border: 2px solid red;
height: 300px;width: 300px;
position: absolute;
top: 50px;
left: 70px;
}
</style>
</head>
<body>
? ? <div id="one">之前的位置
? ? <div id="two">移動(dòng)后的位置
? ? </div>
? ? </div>
</body>
</html>
2018-09-04
不知道