查看效果：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. WPF 浏览文件夹，获取其路径

    public void GetPath(System.Windows.Controls.TextBox TB) { FolderBrowserDialog FBD = new FolderBrowse ...

  2. JAVA服务器搭建之问题总结

    负责维护公司产品的web服务器搭建与维护,最近遇到一下状况,今天在这里简单总结一下,希望对于刚刚一些刚入行的小伙伴有所帮助,避免再走弯路. 第一点:Tomcat内存设置: 一.常见的Java内存溢出有 ...

  3. JSON入门指南--服务端处理JSON

    平时公司使用的ASP.NET MVC3来开发Web项目,其实在ASP.NET中已经原生的支持JSON.所以基本不需要引进Newtonsoft.Json.dll.下面看在MVC4中,后台生成JSON数据 ...

  4. C语言 第四章 分支结构练习

    一.输入语文,数学成绩,根据平均分分3档 #include "stdio.h" void main() { //接受用户输入 float chinese,math,avg; pri ...

  5. 1Z0-053 争议题目解析470

    1Z0-053 争议题目解析470 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 470.Which NLS parameter can be used to change the ...

  6. 数据库SQL Service 2014中文版的安装和配置教程

    一.我的电脑环境 1.windows8.1(64位) 2.之前电脑没有安装数据库的软件 二.装机之前准备(我这儿提供百度云保存和下载) 1.下载一个“Sql service 2014中文版” http ...

  7. (十二) WebGIS中矢量图层的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...

  8. 【原创】新手入门一篇就够：从零开发移动端IM

    一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...

  9. Android之自定义ViewPager实现图片的无线轮播

    PS:以前也写过关于图片轮播这一块的博客.不过写的很烂,并且很多情况没有考虑到(没有支持无线轮播,和手势点击事件).因此这里写一篇补上.也是当时太年轻了. 注:图片请放大后再看.否则看不清楚. 学习内 ...

  10. Linux中读写权限

    learn the auth of Linux.   Generally, r-x w: write , modify and delete  -2 r: read   -4 x: execute   ...