需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签，输入js代码：
<div style="background: url(small2.png)height: 60px">
<span style="position: absoluteright: 10px">123</span>
</div>
3、浏览器运行index.html页面，此时文字成功浮动到了图片右上方了。
浮动和盒状模型、定位是CSS重点和难点。浮动，就是让div样式层块，向左或向右（靠）浮动。
Float:left 靠左浮动；Float:right 靠右浮动；clear:both清除浮动，简单举例如下：
CSS样式如下：
.box1{ float:left width:200px height:300px background:#f00}/* 设置div对象浮动靠左*/.box2{ float:rightwidth:200px height:300pxbackground:#0f0}/* 设置div对象浮动靠右 */
.clear{ clear:both}/*清除浮动*/
html代码如下：
<div class="divcss5"><div class="box1">布局靠左浮动</div>
<div class="box2">布局靠右浮动</div>
<div class="clear"></div><!-- html注释：清除float产生浮动 -->
</div>
效果如下：
浮动利用好了，再结合相对定位，绝对定位，CSS排版基本上就能搞定了，细节的东西在实践中去体验吧。
<html><style type="text/css">
.black_overlay{
display: none
position: absolutetop: 0%
left: 0%
width: 100%
height: 100%
background-color: black
z-index:1001
-moz-opacity: 0.8
opacity:.80
filter: alpha(opacity=80)
}
.white_content{
display: none
position: absolute
top: 25% left: 25%
width: 50%
height: 50%
padding: 16px
border: 16px solid black
background-color: white
z-index:1002
overflow:auto
}
</style>
<script type="text/javascript">
</script>
<body>
<input type="button" text="d出层" onClick="document.getElementById('light').style.display='block'document.getElementById('fade').style.display='block'">
<div id="light" class="white_content">
<a href="#" onClick="document.getElementById('light').style.display='none'document.getElementById('fade').style.display='none'" style="color:blackz-index:9999">Close</a>
<div style="width:715pxheight:360pxborder:#ccc solid 1px" id="dituContent">
这里就是d出的内容
</div>
</div>
</body>
</html>
就是这样的。使用postion属性和层的隐藏和显示就实现啦
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）