ul+li做出多行多列 表格

最新推荐文章于 2022-04-22 16:44:30 发布
最新推荐文章于 2022-04-22 16:44:30 发布
阅读量5.9k 收藏
点赞数
分类专栏： Css 文章标签： class float table

<html>

<head>

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

<title>ul+li做出横纵表格</title> <style type="text/css">

#h-table {width:250px;margin-top:20px;}

#h-table ul li {list-style:none;float:left;width:100px;background-color:#801;margin-left:2px;margin-bottom:2px;}

#h-table2 {clear:left;}

#h-table2 ul li ul li {list-style-type:none;float:left;width:100px;background-color:#3FC;margin-left:2px}

#h-table2 .col {clear:both;list-style:none;line-height:30px}

#v-table {margin:0 auto;clear:left}

#v-table ul {width:85px;float:left;padding:0 0 0 0;margin:0 0 0 2px;}

#v-table ul li {list-style:none;color:blue;background-color:#CF0;line-height:30px;margin-bottom:2px;};

#table {

clear:left;

width:300px;

background-color:silver;

}

#table ul {

clear:left;

margin:0px;

padding:0px;

width:481px;

list-style-type:none;

border-bottom:1px #000 solid;

 

}

#table li {

float:left;

display:block;

margin:0px;

padding:0px;

width:95px;

 

}

</style>

</head>

<body>

 

<div id="h-table"><h3>横-单ul多

 

li</h3><ul><li>one</li><li>two</li><li>one</li><li>two</li><li>one</li><li>two</li><li>one</li><li>two</li></ul></div>

 

<div id="v-table"><h3>纵-多ul</h3><ul><li>one</li><li>two</li></ul><ul><li>three</li><li>four</li></ul><ul><li><a

 

href="http://hi.baidu.com/1babyo" target="new">我的博客</a></li><li>php</li></ul></div>

<div id="h-table2"><h3>横-多ul多li</h3><ul><li class="col"><ul><li>one</li><li>two</li></ul></li><li

 

class="col"><ul><li>three</li><li>four</li></ul></li><li class="col"><ul><li><a href="http://hi.baidu.com/1babyo"

 

target="new">我的博客</a></li><li>php</li></ul></li></ul></div>

<div id="table"><h3>横-多ul</h3>

<ul>

<li>123</li>

<li>123</li>

<li>123</li>

<li>123</li>

<li>456</li>

</ul>

<ul>

<li>abc</li>

<li>abc</li>

<li>abc</li>

<li>abc</li>

<li>def</li>

</ul>

<ul>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>DEF</li>

</ul>

<ul>

<li>123</li>

<li>123</li>

<li>123</li>

<li>123</li>

<li>456</li>

</ul>

<ul>

<li>abc</li>

<li>abc</li>

<li>abc</li>

<li>abc</li>

<li>def</li>

</ul>

<ul>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>DEF</li>

</ul>

<ul>

<li>123</li>

<li>123</li>

<li>123</li>

<li>123</li>

<li>456</li>

</ul>

<ul>

<li>abc</li>

<li>abc</li>

<li>abc</li>

<li>abc</li>

<li>def</li>

</ul>

</body>

</html>

萧萧西风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ul和li实现分两列（多列）布局显示
09-25
DIV+CSS分两列（多列）布局显示，下面有个不错的示例，大家可以参考下
ul和li简单语句实现DIV+CSS分两列（多列）布局显示(转)
系统运维
05-04 958
显然：UL+LI在布局上比table灵活得多。 比较分两列或者多列显示： table：你需要在服务器上写一大堆代码判断是不是需要换行，或者切分是不是准确 DIV：你只需要定义好css，剩下的做事情叫交给浏览器吧。 最简单的代码：用ul除以li的宽度=列数 &lt;style type="text/css"&gt; .mycode{ width:300...
应用ul、li实现表格形式
暖阳的进步乐园
05-03 1254
　　昨天在52CSS.com的留言板，有一位朋友在呐喊：用DIV的UL LI要如何实现表格的那种形式啊？　　我感觉挺纳闷，表格的数据，就应该使用表格来组织，不是说制作符合WEB标准的网站，表格就一无是处、彻底下岗了。表格类的数据，它有着得天独厚的条件，也非常方便组织。这类数据内容直接使用表格就可以了。　　或许你认为你的数据并不是表格式的数据，还有着其它的用法或你自己的见解，我们也可以用ul、li来
php多行多列统计表,ul+li做出多行多列 表格
weixin_34542623的博客
03-20 236
ul+li做出横纵表格 #h-table {width:250px;margin-top:20px;}#h-table ul li {list-style:none;float:left;width:100px;background-color:#801;margin-left:2px;margin-bottom:2px;}#h-table2 {clear:left;}#h-table2 ul l...
ul li 做成table样式
iteye_14791的博客
02-14 1583
区别：用table做的表格比较难通过css改变全新样式，用ul li　在以后要改变样式就相对快速多了     &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;MET..
css多行多列的新闻模式
10-30
在这篇文档中，提到了实现多行多列新闻模式的关键点：a的浮动和li的清除浮动。在CSS中，浮动（float）属性是用来实现文字环绕的效果。然而，当元素应用了浮动之后，它会脱离正常的文档流，因此可能导致父元素高度...
CSS网页布局使用表格可以吗？
09-27
在CSS样式实现时，我们可以通过定义合适的属性来控制元素的显示效果，比如使用`display`属性将`<span>`设置为`inline-block`，或者利用Flexbox和Grid布局来实现复杂的多列或多行布局，无需依赖表格。 总的来说，...
实验2列表、表格与多媒体标签（学生端资料）.zip
最新发布
03-14
表格可以有多行多列，并通过`<thead>`、`<tbody>`和`<tfoot>`标签来区分表头、主体和页脚。例如： ```html 姓名 年龄 城市 张三 <td>25 北京 李四 <td>30 上海 ``` 3. 多媒体...
实现表格动态滚动效果
05-04
接下来，使用`ul`和`li`标签来构建表格的行和列。为`ul`设置`display: flex`并开启`flex-wrap`以实现多行布局，为`li`设置宽度和内边距来模拟单元格： ```css .table-container ul { display: flex; flex-wrap: ...
第二部分 列表与表格2.doc
09-22
每个表格由多行`<tr>`组成，行内包含多个单元格`<td>`。例如： ```html 第 1 个单元格的内容 第 2 个单元格的内容 第 1 个单元格的内容 第 2 个单元格的内容 ``` 表格有许多属性，如`border`设置边框...
CSS布局实例用ul、li来实现表格
08-29
用ul、li来实现表格形式的布局，实现了类似于表格的效果，另类的感觉
ul li实现表格样式
07-11
使用ul li 标签实现的表格样式，可代替table标签，避免搜索引擎收录不了表格中的关键字
ul打造表格样式
03-19
NULL 博文链接：https://leon1509.iteye.com/blog/733025
css控制UL LI 的样式详解(推荐)
09-25
DIV+CSS里，我们用得最多的就是ul li来显示数据，如新闻按钮等。下面给大家一个css ul li的例子供学习
ul li实现多行多列的布局思路
m0_52518047的博客
04-22 4821
最近呢在练手css布局，之前在工作中，也会经常遇到这种多行多列的布局，其实css实现的路径挺多的，如下图式的布局一般多是ul li来实现，在此我想写一下我自己的实现思路： 上图式京东官网上的一个模块 <div class="icon"> <ul> <li> <img src="./icon/1.png" alt=""> <span> 话费
使用CSS把ul,li制作成表格
u011927449的博客
07-06 1240
查看效果：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" /
ul和li简单语句实现DIV+CSS分两列（多列）布局显示
№快乐因你♂
05-02 7010
最简单的代码：     .mycode{ width:300px; height:74px; float:left;}       .mycode ul{ width:280px;}       .mycode li{ width:100px; float:left; display:block;}               博客小子         博
如何用css画一个三角形
YouYi__的博客
09-09 367
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值