网页技巧:用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格式的网页文档就能看到效果了。

时间: 2025-01-21 01:35:09

网页技巧:用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 sol

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教程:使用ul进行网页的多列布局

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

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

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

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

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

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

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

网页设计采用DIV+CSS相比TABLE的优势有哪些

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 几年前DIV+CSS开始逐渐成为网页设计的首选方式,目前来看,DIV+CSS已成为网页设计的标准,国内非常多的网站在这几年已完成了从TABLE到DIV+CSS的重构.笔者也是一名偏爱这种方式的网页设计师,工作3年来一直采用div+css方式为客户提供设计.那么相比TABLE,它具有哪些优势呢?下面谈谈个人几点体会和认识,希望对同行和有关人员有

浏览器-在win7系统下。网页用了ul,li里面的有些字不在一条线上。

问题描述 在win7系统下.网页用了ul,li里面的有些字不在一条线上. 在win8系统里,只有谷歌浏览器会出现问题,在mac系统里,都木有问题.老板说我们眼瞎,我们说电脑系统分辨率,字体渲染问题,还不相信.请各位大神有什么补救方法吗? 示例: <ul><li>农补查询</li></ul> 解决方案 浏览器不支持,没办法.让用户固定浏览器.或者单独优化谷歌 解决方案二: 调整css样式可以解决的问题.你试试line-height:设置ul的高度,间距等看是否

设计出迷人的响应式网页技巧

  响应式网页设计很流行,而且绝无秘密可言.行家们倡导,各品牌趋之若鹜.这不仅是创建一个移动端站点,而是让你的网站适用于每种浏览器尺寸,不论桌面端.平板还是智能手机 响应式设计的秘诀,是创建一个不论大小尺寸都美观的网站.在点开你的设计软件着手动工之前,你需要考虑很多.这是个额外步骤,最终成品却总能证明它的价值所在.很明显,设计师若不考虑响应式设计,网站就会倾向于呆板无趣 设计师绝对有必要保持自己的创意贯穿整个响应式站点.鉴于更多人在使用平板和智能手机,你总希望保证每个人都能访问你的网站.这里有一