系统系  - 操作系统 - 工具软件 - 病毒安全 - Vista专区 WEB2.0  - 奇趣 - 发现分享 - 评论员文章 - 战国策 视　频  - 体育 - 娱乐 - 科技 - 教程
办公系  - Word - Excel - Powerpoint - 网站建设 动画系  - Flash - Ascript - Flex - MsE Design 教程 编程系  - Asp - Asp.Net - Php - Jsp、Java - CGI/perl
艺术系  - 酷赏 - 工业 - 建筑 - 界面 - 平面 - 视觉 网站系  - HTML/Xhtml - Js、Ajax - Css - XML、XSLT 下　载  - 图形图像 - 多媒体 - 系统办公
 
Aoaob.com学院网站系HTMLXhtml正文

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

创建日期：2008年1月6日 来自：knowsky 浏览：644次 作者：匿名

　　先看看效果：

　　

　　下面是源代码：

<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格式的网页文档就能看到效果了。
责编：aoaob
相关搜索： 用UL实现非Table四行三列布局   HTML教程  
Google
上一篇：制作强制固定表格大小的效果
下一篇：分享HTML中少为人知的个性化标记
嗷嗷毙技术网版权申明：大家可以自由转载我站点的文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来链接，自行链接）。文章版权归作者所有。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。
搜索 
Google
最新 热门 推荐 随机