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_STYLEAa><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……STYLEAa>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">使用lodopa>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或ca>td>
    <td><a target="_blank" href="https://www.cnblogs.com/huaxie/p/9707548.html">inita与pagea>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#调用lodopa>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">卸载lodopa>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排列多个块)