html中测试div、ul和li、table排列多个块
前面有三篇博文测试了这三种方式，
一.相关博文：LODOP问答部分链接、
该文用的是div定位，用的是所有小div相对于大div进行定位，大的div设置relative定位，小的设置absolute相对于该大的div定位。
测试代码：
<style>
#A1{background:#e1e2e6;height:330px;border-radius:20px;position:relative;}
#A1 div{line-height:50px;text-align:center;border-radius:20px;position:absolute;float:left;}
a{text-decoration:none;font-weight:bold;}
#div1{height:50px;width:100px;top:20px;left:20px;background:rgba(255,0,0,0.5);}
#div1 a{color:black;}
#div2{height:50px;width:120px;top:20px;left:140px;background:rgba(0,255,0,0.5);}
#div2 a{color:blue;}
#div3{height:50px;width:80px;top:20px;left:280px;background:rgba(255,0,0,0.5);}
#div3 a{color:black;}
#div4{height:50px;width:100px;top:20px;left:380px;background:rgba(0,255,0,0.5);}
#div4 a{color:blue;}
#div5{height:50px;width:160px;top:20px;left:500px;background:rgba(255,0,0,0.5);}
#div5 a{color:black;}
#div6{width:200px;height:200px;top:80px;left:20px;background:rgba(0,0,255,0.7);
text-align:justify!important;line-height:25px!important;padding:10px;
}
#div6 a{color:#f797e4;}
.a1{color:black!important;}
</style>
</head>
<body>
<p>点击链接进入相关简短问答博文：</p>
<div id="A1">
<div id="div1"><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9790615.html">问答大全</a></div>
<div id="div2"><a target="_blank" href="https://www.cnblogs.com/huaxie/p/11301778.html">纸张打印机</a></div>
<div id="div3"><a target="_blank" href="https://www.cnblogs.com/huaxie/p/10860746.html">注册</a></div>
<div id="div4"><a target="_blank" href="https://www.cnblogs.com/huaxie/p/11045192.html">table表格</a></div>
<div id="div5"><a target="_blank" href="https://www.cnblogs.com/huaxie/p/11550645.html">clodop测试地址</a></div>
<div id="div6">
<a target="_blank" href="https://www.cnblogs.com/huaxie/p/11840694.html">字体</a><br>
<a target="_blank" href="https://www.cnblogs.com/huaxie/p/11890022.html">行间距、字间距</a><br>
<a target="_blank" href="https://www.cnblogs.com/huaxie/p/11736705.html">clodop回调函数</a><br>
<a target="_blank" href="https://www.cnblogs.com/huaxie/p/11683913.html">SET_PRINT_STYLEA</a><br>
<a target="_blank" href="https://www.cnblogs.com/huaxie/p/9603229.html">页眉页脚</a><br>
<a class="a1" target="_blank" href="https://www.cnblogs.com/huaxie/p/10082571.html">超文本</a><br>
<a target="_blank" href="https://www.cnblogs.com/huaxie/p/11038280.html">条码</a><br>
</div>
</div>
二.相关博文：常见问答的点击到链接1、
该文用的是ul和li,一个div里盛放了一个ul，对ul里的li进行设置。该代码也就是相关博文三里的上半部分。
三.相关博文：LODOP常见问题连接(含常见小问答博文）下半部分(粉色的那些区块)、
该文下边部分用的是table，通过设置td的间距实现排列多个区块。这里实际没有设置边距，用的是给td加了白色的border，由于文章页面本身是白色，白色的border就和边距差不多。 上半部分就是相关博文2里的内容。
二和三的，测试代码：
<style>
#divall ul{list-style-type:none;margin:0px;}
#divall li{float:left;display:block;width:100px;height:50px;background:gray;margin-left:10px;margin-top:10px;text-align:center;}
#divall p{margin:0px;}
#divall a{text-decoration:none;font-weight:bold;}
.clearFloat{clear:both;} .fs20{font-size:20px;line-height:50px;}
.fs15{font-size:15px;line-height:50px;}
.fs12{font-size:12px;line-height:50px;}
#divall .corWhi{color:white!important;}
#divall .corYel{color:yellow!important;}
#divall .bgblue{background:blue!important;}
#divall .bg_dpblue{background:#2a4278!important;} #div_table{clear:both;margin-left:0px;}
#div_table table{border-collapse:collapse;}
#div_table td{width:100px;height:50px;background:#f1c7c7;text-align:center;line-height:50px;border:10px solid white;padding:0px!important;}
#div_table a{text-decoration:none;font-weight:bold;color:blue;font-family:楷体;}
</style>
<div id="divall">
<ul>
<!--第一排-->
<li class="fs20"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/9790615.html">问答大全</a></li>
<li class="fs15"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11301778.html">纸张打印机</a></li>
<li class="fs20"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/10860746.html">注册</a></li>
<li class="fs20"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11045192.html">table表格</a></li>
<!--第二排-->
<li class="fs12 clearFloat"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/11550645.html">clodop测试地址</a></li>
<li class="fs20"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11840694.html">字体</a></li>
<li class="fs20"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/10082571.html">超文本</a></li>
<li class="fs12"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11890022.html">行间距、字间距</a></li>
<!--第三排-->
<li class="fs12 clearFloat"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11736705.html">clodop回调函数</a></li>
<li class="fs20"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11038280.html">条码</a></li>
<li class="fs20"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/9603229.html">页眉页脚</a></li>
<li class="fs12"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/11683913.html">SET……STYLEA</a></li>
<!--第四排-->
<li class="fs20 clearFloat"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11988181.html">水平居中</a></li>
<li class="fs20 bg_dpblue"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/10132472.html">简短排查</a></li>
<li class="fs20 bg_dpblue"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/10265673.html">提示报错</a></li>
<li class="fs20"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11381365.html">慢进度条</a></li>
<!--第五排-->
<li class="fs20 clearFloat"><a class="corYel" target="_blank" href="https://www.cnblogs.com/huaxie/p/11532205.html">套打</a></li>
<li class="fs15"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/11364736.html">虚拟打印机</a></li>
<li class="fs20"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/11248349.html">偶尔出现</a></li>
<li class="fs15"><a class="corWhi" target="_blank" href="https://www.cnblogs.com/huaxie/p/9933528.html">反馈排查等</a></li>
</ul>
</div> <div id="div_table">
<table>
<tr>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/11248349.html">clodop端口</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9619044.html">打印第几页</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9639085.html">使用lodop</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9640491.html">高度自动分页</a></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9669963.html">传入查看样式</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9679314.html">条码宽度不一</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9679459.html">二维码大小同</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9700435.html">页码</a></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9705241.html">可重选</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9705355.html">lodop或c</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9707548.html">inita与page</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9707717.html">设计快捷键</a></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9707880.html">c#调用lodop</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9708182.html">打印透明图</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9708290.html">隐藏窗口按钮</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9711631.html">打印虚线</a></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9712832.html">打印直线</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9717172.html">护眼色</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9732406.html">打印项层级</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9810583.html">任务基本结构</a></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9947181.html">允许标点溢出</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9946940.html">卸载lodop</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9952308.html">连续纸高</a></td>
<td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/10537362.html">条码右侧数值</a></td>
</tr>
</table>
</div>
总图示：
html中测试div、ul和li、table排列多个块的更多相关文章
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
- CSS中如何选择ul下li的奇数、偶数行
<style> #Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin- ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- ul、li中的DIV垂直居中
当li高度可动态改变时,li中的DIV始终保持垂直居中. 由于高度不固定,不能用margin或者padding解决. 最头疼的是vertical-align: middle;也莫名其妙的失效了. 最终 ...
- div、ul、li等无法居中问题，text-align无效 margin auto无效
很简单.如果是div,直接把div换成: <table align="center"> <tr> <td> ...
- DIV+ul+LI实现表格效果以及div带滑动条
写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...
- jquery 在ul中取得第一级的li
在ul中取得第一级的li <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2<li ...
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- 基于DIV+ul+li实现的表格(多示例)
一个无序列表biaoge,前四个列表项我们赋予了类biaotou.因为这四个项是表格头部,应该与表格数据有所区别.所以单独赋予了类,可以方便控制.下面我们开始CSS代码的编写:由 www.169it. ...
随机推荐
- BigDecimal加减乘除计算
一.简述 java.math.BigDecimal不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值(unscaledValue)和32位的整数标度(scale)组成. ...
- beta冲刺总结那周余嘉熊掌将得队
作业格式 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺 团队名称: 那周余嘉熊掌将得队 作业目标:beta冲刺总结 队员学号 队员姓名 博客地址 备注 221600131 J ...
- Nginx——配置文件服务下载
前言 只是临时搭建的一个下载服务,所以就直接用nginx来咯 步骤 解析域名 将域名解析到要部署应用对应的服务器,就是个解析操作,没啥好讲的 创建目录 # mkdir /data/install/ 配 ...
- 几种访问HDFS文件的客户端的总结
HDFS是英文Hadoop Distributed File System的缩写,中文翻译为Hadoop分布式文件系统,它是实现分布式存储的一个系统,所以分布式存储有的特点,HDFS都会有,HDFS的 ...
- UI系统的三个主要关系
1.UI的结构.组织和组件.布局.渲染效率:(系统内置的组件有哪些?) 2.UI与事件的关系: 3.UI与数据的关系:
- Python-内存泄漏 持续增长 检查点
仅个人目前遇见的内存问题, 可能不适用所有问题 一下只是简单的实例代码, 可能跑不起来, 只是看看 可变变量参数 小例子: def foo(a, b=[]): b.append(a) print b ...
- 如何进行seo优化要点总结
一.搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果.深究其背后的故事,搜索引擎做了很多事情. 在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关 ...
- 【CSGRound2】逐梦者的初心（洛谷11月月赛 II & CSG Round 2 T3）
题目描述# 给你一个长度为\(n\)的字符串\(S\). 有\(m\)个操作,保证\(m≤n\). 你还有一个字符串\(T\),刚开始为空. 共有两种操作. 第一种操作: 在字符串\(T\)的末尾加上 ...
- 第09组 Alpha冲刺（2/6）
队名:观光队 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 完成服务器连接数据库部分代码 展示GitHub当日代码/文档签入记录 接下来的计划 服务器网络请求. 还 ...
- planning algorithms chapter 3
chapter 3 几何表示和变换 P.S: 总算到了 motion planning 部分了 几何建模 几何建模主要有两类方法:边界表示法和实体表示法. 环境模型可以是二维或三维,实体主要包括障碍物 ...