导航

专业做网站建设公司、网页设计制作、百度优化推广、网站维护托管等网站相关业务,欢迎咨询。

域名空间 | 服务领域  网站建设1500元全包。做完验收修改到满意为止可淘宝付款有保证!
当前位置: 邯郸网站建设 > 网页设计制作百科 > 常见问题

采用div+css建设的网站如何用ul li 来设计表格


来源:邯郸煜阳网络公司  时间:2021-04-11 22:06    
采用div+css建设的网站如何用ul li 来设计表格呢?以下是我们煜阳网络设计师采用ul li制作的页面,代码全部手工新写的dic+css页面,尤其是图片左上角的监控数据表格的部分不是用table写的,而是采用最新的层和样式来做出的非常漂亮的表格的,您一定想不到的吧。这里我们把我们网站设计师千辛万苦写出来的代码给大家展示一下。





 
采用div+css建设的网站页面div 部分 

<div class="ml">
  <div class="title"><p>园区实时监控数据</p></div>
 
    <div class="msj">
<div class="shujutitle">
  <ul>
<li style="width:4%;"></li>
<li>大棚</li>
<li>温度</li>
<li>湿度</li>
<li>二氧化碳</li>
<li>水压</li>
<li>风速</li>
<li>雨雪</li>
<li>监控</li>
<li>播放</li>
  </ul>
  </div>
<div class="shuju">
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
<ul>
<li style="width:4%;">1</li>
<li>1号大棚</li>
<li>29.5</li>
<li>82.3</li>
<li>43.3</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>1号大棚</li>
<li><img src="images/p.png"></li>
</ul>
</div>
</div>
 
 
 
  </div>
  
  
------------------------------------------

采用div+css建设的网站 css部分

.ml {background:#191921;display:block;    float: left;    padding: 20px;margin: 0;width: 93%;border-radius: 5px;}
.msj .shujutitle {
float:left;
width:100%;
color:#FFFFFF;
box-shadow: 0px 0px 3px 3px #0f0e0e;
background:#30323f;
}
.msj .shujutitle ul {width:100%; 
margin: 0;
    padding: 0;
clear: both;
list-style: none;
/*IE6*/
_float: left;
_clear: none;
 
}
.msj .shujutitle ul li {
float:left;width:10.36%;
font-size:12px;
list-style:none;
    background: #30323f;
    height: 40px;
    color: #898a8f;
line-height: 40px;
    border-right: 1px solid #000000;
    text-align: center;
display: inline-table;
word-break: keep-all;
/*不换行 */
white-space: nowrap; /*不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;
 
}
.msj .shuju {
float:left;
width:100%;
color:#FFFFFF;
box-shadow: 0px 0px 3px 3px #0f0e0e;
}
.msj .shuju ul {width:100%;    margin: 0;     padding: 0;    float: left;clear: both;
list-style: none;
/*IE6*/
_float: left;
_clear: none; cursor:pointer;}
.msj .shuju ul li {
float:left;width:10.36%;
font-size:12px;
list-style:none;
/*border-bottom: 1px solid #2b2e35;*/
    border-right: 1px solid #2b2e35;
height:40px;
line-height: 40px;
text-align:center;
    display: inline-table;
word-break: keep-all;
/*不换行 */
white-space: nowrap; /*不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;
}
.msj .shuju ul li img {width:50%;vertical-align: middle;margin-top: 7px;}
.l1 {
background:#1d2027;
}
.a1 {color:#ffffff;}
.a2 {color:#299e1a;}
.a3 {color:#166c45;}
.a4 {color:#0da28f;}
.a5 {color:#177cca;}
 
.f20 {font-size: 20px;}
.v { vertical-align: middle;}