jQuery实现动态展示会议室的占用情况

最新推荐文章于 2024-11-13 15:56:45 发布

一朵叶子

最新推荐文章于 2024-11-13 15:56:45 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/yjy528/article/details/88537236

会议室占用情况效果图

会议室占用情况展示，效果图如上

代码如下：

<!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</title>

</head>

<style>

.table_box{ width:800px; height:500px; border:1px solid black; border-left:none; border-bottom:none; }

.table_header{ display:flex; justify-content: center; }

.week{ flex:1; text-align: center; line-height: 70px; border-bottom:1px solid #000; border-left:1px solid black; }

.table_tr{ display: flex; }

.meet{ border-left:1px solid black; border-bottom:1px solid black; width:99px; }

.meetstate{ flex:1;}

.state{ border-left:1px solid black; float:left; border