摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第十二和十三节背景控制和元素转换</title> <link rel="shprtcut icon" type="im
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第十二和十三节背景控制和元素转换</title>
<link rel="shprtcut icon" type="image/x-icon" href="images/favicon.ico">
<linl rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
*{padding:0px;margin:0px;}
#hah{height:200px;width:200px;background:url(images/logo2.png) no-repeat center bottom;}
p{display:inline;}
b{display:block;}
.box{width:100px;height:20px;background:yellow;}
.main{width:100px;height:20px;background:pink;display:none;}
.hh{width:50px;height:20px;background:red;display:none;}
.box:hover .main{display:block;}
.main:hover .hh{display:block;}
/*鼠标放在box后会呈现main盒子，点盒子后会呈现hh盒子，一环扣一环
</style>
</head>
<body>
<div id="hah">11</div>
<p>块级元素转化为行内元素</p><span>123</span>
<b>行内元素转为块级元素</b><span>123</span>
<div>将标签转为行内块元素</div><span>123</span>
<div class="box">导航
<div class="main">小菜单<div class="hh">大苹果</div></div>
</div>
</body>
</html>
上述代码是集合了浮动以及相对定位和绝对定位,以及背景图片控制还有边框的圆角.大体内容就这样,补充内容是块级元素和行内元素,行内块元素的的转换
批改老师：灭绝师太批改时间：2018-11-07 15:40:49
老师总结：棒……多练习有好处呀，可以仔细掌握所学的代码
