网站公告列表

没有公告

加入收藏
设为首页
联系站长
轻松学电脑>>网页制作>>其它教程>>用UL实现非Table四行三列布局
双击滚屏阅读

用UL实现非Table四行三列布局

  先看看效果:

  

  下面是源代码:

<html>
<head>
<title>test</title>
<style type="text/CSS">
ul{
 margin:0px;
 padding:0px;
 width:200px;
 }
ul li{
 float:left;
 list-style-type:none;
 border-top:#000 solid 1px;
                border-left:#000 solid 1px;
 width:65px;
 }
.border-r{
               border-right:#000 solid 1px;
                }
.border-b{
               border-bottom:#000 solid 1px;
                }
.border-l{
               border-right:#000 solid 1px;
               border-bottom:#000 solid 1px;
                }
</style>
</head>
<body>
<ul>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li class="border-r">&nbsp;</li>
</ul>
<ul>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li class="border-r">&nbsp;</li>
</ul>
<ul>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li class="border-r">&nbsp;</li>
</ul>
<ul>
 <li class="border-b">&nbsp;</li>
 <li class="border-b">&nbsp;</li>
 <li class="border-l">&nbsp;</li>
</ul>
</body>
</html>

  将上面的代码保存成html格式的网页文档就能看到效果了。

 
  • 上一篇文章:

  • 下一篇文章:
  • 广告
    阅读top10
    普通文章[突破]在线编辑器任意…
    普通文章[JS]点出统计器
    普通文章[效果]JS折叠菜单
    普通文章javascript的函数
    普通文章怎么用javascript…
    普通文章百分百弹窗
    普通文章hta应用—代码统计工具
    普通文章小方框中浏览大图
    普通文章js版sliderBar(滑动条…
    普通文章JS代码格式化和语法着…
    普通文章好玩的样式—放大效果
    普通文章用css制作星级评分
    普通文章关于textarea的直观换…
    普通文章仿windows选项卡效果拾…
    查看用UL实现非Table四行三列布局全部内容
    本站提供:电脑教程 网页制作 Flash教程 PhotoShop教程等免费教程。
    Copyright © 2006-2008轻松学电脑All Rights Reserved