<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>li</title>
<style type="text/css">
/*第一种方法:隐藏li前的小点,flag1使用display:block; */
#fly1 li{width:500px;height:80px;display:block;}
/*第二种方法:隐藏li前的小点,flag2使用list-style-type:none; */
#fly2 li{width:165px;height:240px;list-style-type:none; margin-top:20px; margin-bottom:20px; float:left;}
#fly3{width:220px;height:350px;display:block;}
#fly3 li{width:500px;height:20px;display:block;}
</style>
</head>
<body>
<!--------------flag1--------------------------------------->
<ul id="fly1">
<li style="background-color:#000;"></li>
<li style="background-color:#F00;"></li>
<li style="background-color:#FF0;"></li>
</ul>
<!------------flag2------主要是在css中使用float:left;-->
<ul id="fly2">
<li style="background-color:#000;"></li>
<li style="background-color:#F00;"></li>
<li style="background-color:#FF0;"></li>
</ul>
<!-----------------------------flag3------------------------------------>
<ul id="fly3">
<li style="background-color:#06F; position:absolute; z-index:3; left: 15px; top:693px;"></li>
<li style="width:20px; height:300px; background-color:#F00; position:absolute; z-index:2; left: 241px; top: 562px;"></li>
</ul>
<!--最后,当浏览器收缩到到原来的1/3宽度,
flag2会有变化,
效果就是flag2中 红 和黄 色块 会 直接挤下来-->
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
