这是我写的源代码,你看下,并共享给其他网友,主要用到了display:inline-block;
<style type="text/css" >
body{ margin:0; padding:0; background-image :url("放大镜.png"); background-attachment :fixed ; background-position :bottom right ; background-repeat :no-repeat ;}
.tab{ width:500px ; border:0px solid black; position:relative ; left:100px; top:100px; }
.tab ul{ width:500px ;height:50px; border-bottom:0px solid red; list-style:none; overflow:hidden ; display:block ; clear:both ; margin:0; padding:0;}
.tab ul li{ width:100px; height:50px; float:left; border-right:0px solid Blue;}
.he{ }
</style>
<div class="tab">
<ul style="float:left; height:100px; width:200px; display:inline;">
<li style="float:left; width:200px; height:100px; background-color :Aqua ; "></li>
</ul>
<ul style=" height:100px; width:200px; display:inline ; margin:0; padding:0;">
<li style=" width:200px; background-color :Black ; display:inline ; "> </li>
<li style="float:left; width:200px; background-color:Fuchsia ; display:inline ;"> </li>
</ul >
<ul style=" width:100px; display:inline-block ; height:100px; margin:0; padding:0;">
<li style=" background-color :Green ; width:30px; height:100px;"></li>
<li style=" background-color :Lime ; width:40px; height:100px;"></li>
<li style=" background-color :Green ; width:30px; height:100px;"></li>
</ul >
</div>
我的思路就是这样
顺便写了代码,给其他网友以帮助。
还有给点建议,合并行使用这个<ul><li>好,还是只用<div>全部是都是<div>好啊,谢谢了
以后做网站布局用得着<ul><li>吗?
参考资料:自己写的