查看效果：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. 【Win10应用开发】自适应磁贴中的分组

    老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子. 本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现. 当磁贴的内容被分组后,每个组中的内容就会被视为一个整体.比如某磁 ...

  2. MVC5 网站开发实践 1、建立项目

    目录 MVC5 网站开发实践 概述   一.建立项目 1.建立团队项目 在办公室和家里使用不同的电脑,为了方便代码的共享将项目建立为团队项目.   如图打开vs2013→新建→团队项目(图1),会自动 ...

  3. Android仿微信二维码扫描

    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...

  4. 创建 VXLAN - 每天5分钟玩转 OpenStack（111）

    前面我们讨论了 VXLAN 的理论知识,并且在 ML2 中完成了相关配置.今天将通过 Web UI 创建 vxlan100_net 并观察节点网络结构的变化. 打开菜单 Admin -> Net ...

  5. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  6. Notepad++使用小结

    还是那句话“工欲善其事必先利其器”用Notepad++也有一段时间了,也积累了一些东西,写篇博文与大家分享一下使用Notepad++的一些心得.  简单的说一下Notepad++是什么东西吧,Note ...

  7. No zuo no die：DDD 应对具体业务场景，Domain Model 重新设计

    写在前面 上联:no zuo no die why you try 下联:no try no high give me five 横批: let it go上联:no zuo no die why y ...

  8. mysql相关文章

    win7系统下如何配置php-Apache-mysql环境 Mac 可设置环境变量的位置.查看和添加PATH环境变量 Mac如何删除MySQL,Mac下MySQL卸载方法 mac+apache+php ...

  9. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下，另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  10. Selenium3.0 自动化测试

    早在2013年的时候,Selenium官方宣布,Selenium新的版本会在圣诞节的时候发布.但是,他们并没有说哪一个圣诞节发布. 转眼的三年过去了,目前已经发布到Selenium3.0 beta4版 ...