level 1
树与花海
楼主
如下HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1{
color:blue;
}
#d1{
display:inline;
background-color:green;
width:30px;
height:20px;
margin:20px;
}
#d2{
display:inline;
background-color:yellow;
width:30px;
height:20px;
margin:20px;
}
#d3{
background-color:#7CFC00;
border-style:solid;
margin-left:20px;
width:360px;
height:100px;
}
#d4{
border-style:solid;
width:400px;
height:250px;
}
</style>
</head>
<body>
<h1>图层嵌套的应用</h1>
<div id="d4">
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</div>
</body>
</html>
这个页面用Google浏览器运行出来以后效果是这样的：
用Microsoft Edge运行出来效果是这样的：
用IE浏览器运行出来效果是这样的：
但是书上的效果是这样的：
请问这个HTML文件真的能实现书上的这个效果吗？
2018年04月10日 14点04分
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1{
color:blue;
}
#d1{
display:inline;
background-color:green;
width:30px;
height:20px;
margin:20px;
}
#d2{
display:inline;
background-color:yellow;
width:30px;
height:20px;
margin:20px;
}
#d3{
background-color:#7CFC00;
border-style:solid;
margin-left:20px;
width:360px;
height:100px;
}
#d4{
border-style:solid;
width:400px;
height:250px;
}
</style>
</head>
<body>
<h1>图层嵌套的应用</h1>
<div id="d4">
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</div>
</body>
</html>
这个页面用Google浏览器运行出来以后效果是这样的：
用Microsoft Edge运行出来效果是这样的：用IE浏览器运行出来效果是这样的：但是书上的效果是这样的：请问这个HTML文件真的能实现书上的这个效果吗？