查看效果：http://hovertree.com/texiao/css/7.htm

具体实现请看样式部分。

完整代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>使用CSS把ul,li制作成表格-何问起</title><base target="_blank" />

<meta charset="utf-8" />

<style>.hovertreeulli ul{list-style:none;width:300px;border:solid 1px gray;padding:0px}

.hovertreeulli li{margin-left:0px;width:99%;border-bottom:1px dotted gray;text-align:center;line-height:30px}

a{color:blue;text-decoration:none}</style>

</head>

<body>

<div><h2>何问起</h2>

<h3>使用CSS把ul,li制作成表格</h3>

</div>

<div class="hovertreeulli">

<ul>

<li><a href="http://hovertree.com/">首页</a></li>

<li><a href="http://hovertree.com/map/">网站地图</a></li>

<li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li>

<li><a href="http://hovertree.com/menu/texiao/">特效</a></li>

<li><a href="http://cms.hovertree.com/">CMS在线预览</a></li>

<li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li>

<li><a href="http://hovertree.com/hvtart/bjae/9gjkwp4f.htm">原文</a></li>

</ul>

</div>

</body>

</html>

web前端： http://www.cnblogs.com/jihua/p/webfront.html

使用CSS把ul,li制作成表格的更多相关文章

  1. 基于DIV+ul+li实现的表格(多示例)

    一个无序列表biaoge,前四个列表项我们赋予了类biaotou.因为这四个项是表格头部,应该与表格数据有所区别.所以单独赋予了类,可以方便控制.下面我们开始CSS代码的编写:由 www.169it. ...

  2. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  3. css控制UL LI 的样式详解

    用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

  4. div+css（ul li）实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  5. css控制UL LI 的样式详解(推荐)

    代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...

  6. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. CSS中ul li居中的问题

    一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来 ...

  8. css 中ul li 与 ul>li的区别

    ul li :后代选择器,ul 里所有的 li 元素,包括 ol 里的 li ; ul>li :子代选择器,下一级的DOM节点,不包括 ol 里的 li . ul>ol>li :子代 ...

  9. 将word文件快速转换成表格的技巧

    最近烦心事还真是很多,世界买家网最近就遇到了很多烦心事. 从www.buyerinfo.biz网站中的数据导出为csv格式的文件,我导出了buyer的数据,那怎么把它制作成表格呢? 找了下,发现还是比 ...

随机推荐

  1. SSIS 参数的值

    一,SSIS Parameter Value 的type 一个Parameter的Value共有三种类型,分别是Design Value,Server Value,Execution Value. D ...

  2. ClickOnce部署（3）：使用证书

    在讲述证书的使用前,我们先来了解另外一个知识——发布网页. 在前面所说的ClickOnce部署中,如果大家细心的话,应该会发现这么个问题. 如上图,发布成功后,在"输出"窗口中提示 ...

  3. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  4. Python下使用help(dict)，显示'more'不是内部或外部命令，也不是可运行的程序或批处理文件，该如何处理？

    1.首先需要用管理员身份运行cmd. 2.然后检查环境变量中path中是否添加C:\Windows\System32这个路径.

  5. 深入理解脚本化CSS系列第一篇——脚本化行内样式

    × 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...

  6. 快速搭建php环境

    WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...

  7. 安装最新版本的PHPUnit后，不能使用

    我使用的是widows系统.本来3.7.8版本的Phpunit用的是非常顺畅的,最近重新安装phpunit,安装了最小版本,然后在使用的时候就会报很多各种错误.无奈之下只能降版本到3.7.8 首先要卸 ...

  8. 附录E 安装Kafka

    E.1   安装Kafka E.1.1    下载Kafka Kafka是由LinkedIn设计的一个高吞吐量.分布式.基于发布订阅模式的消息系统,使用Scala编写,它以可水平扩展.可靠性.异步通信 ...

  9. cordova plugin add出现CERT_UNTRUSTED错误解决方法

    介绍 目前使用ionic+cordova完成hybmid app开发,在安装geolocation插件时爆出来一个莫名的错误: Fetching from npm failed: CERT_UNTRU ...

  10. JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件

    一.RFC882文档简单说明 RFC882文档规定了如何编写一封简单的邮件(纯文本邮件),一封简单的邮件包含邮件头和邮件体两个部分,邮件头和邮件体之间使用空行分隔. 邮件头包含的内容有: from字段 ...