电话
13363039260
采用div+css建设的网站如何用ul li 来设计表格
2021-04-11 22:06 admin
采用div+css建设的网站如何用ul li 来设计表格呢？以下是我们煜阳网络设计师采用ul li制作的页面，代码全部手工新写的dic+css页面，尤其是图片左上角的监控数据表格的部分不是用table写的，而是采用最新的层和样式来做出的非常漂亮的表格的，您一定想不到的吧。这里我们把我们网站设计师千辛万苦写出来的代码给大家展示一下。
采用div+css建设的网站页面div 部分
<div class="ml">
<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;}
Tag： 如何 建设 网站 设计
猜你喜欢
联络方式：
13363039260
微信二维码 