用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> </li>
 <li> </li>
 <li class="border-r"> </li>
</ul>
<ul>
 <li> </li>
 <li> </li>
 <li class="border-r"> </li>
</ul>
<ul>
 <li> </li>
 <li> </li>
 <li class="border-r"> </li>
</ul>
<ul>
 <li class="border-b"> </li>
 <li class="border-b"> </li>
 <li class="border-l"> </li>
</ul>
</body>
</html>
　　将上面的代码保存成html格式的网页文档就能看到效果了。

时间： 2024-12-10 14:57:26

用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;

HTML用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-

css常见三列布局例子代码

一.固定宽度三列布局  代码如下 复制代码 <div id="wrapper">  <div id="header">header</div>  <div id="container" class="cls">   <div id="aside">    <div class="inner">     aside  

CSS 三列布局

1.普通三列布局 <!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="

关于三列布局中间列的居中问题

请看代码 <style type="text/css"> body{ margin:0; padding:0} .left{ width:100px; background:#06F;float:left; height:100px;} .mid{background:#099; height:100px;} .right{ width:100px; background:#F00; float:right;height:100px;} </style> <

CSS教程:使用ul进行网页的多列布局

 几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教.   当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式:     使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用<ul>列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用<ul>来进行页面的多列布局.  

CSS使用ul进行网页的多列布局

  几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教. 当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用〈ul〉列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用〈ul〉来进行页面的多列布局.         这是一个固定

CSS教程：使用ul进行网页的多列布局

几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教. 当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个 方法,那就是使用<ul>列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用<ul>来进行页面的 多列布局. 这是一个固定宽

使用Div+CSS进行网页的多列布局

这几天我在用Div+CSS进行网页三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方还是请各位多多指教. 当您需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用 列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用来进行页面的多列布局.