html-mui-页面布局表格左右

已于 2022-12-12 09:35:21 修改
阅读量921 收藏
点赞数
分类专栏： mui 文章标签： html5
于 2021-09-01 22:29:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieweiwujie/article/details/120050255
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>页面布局</title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <style>
            .ul div{list-style: none;color: #FFFFFF; text-align: center;background-color: #97C8FF;box-sizing: border-box;padding:2px 30px;border-radius: 18px;}
        .ul{display: flex;box-sizing: border-box;justify-content: space-around;margin-top: 5px;}
        .leftDiv{border: 1px solid red;}
        .rightDiv{border: 1px solid red;}
        .contentDiv{display: flex;box-sizing: border-box;margin-top: 10px;}
        .segmentedControls div{font-size: 12px;text-align: center;padding: 5px;border-bottom: 1px solid #929292;height: 36px;line-height: 26px;}
        .rightDivTitle{display: flex;box-sizing: border-box;padding: 2px 1px;}
        .rightDivTitle div{height: 30px;width: 80%;}
        .rightDivTitle button{height: 26px;padding: 0px;margin: 0px;width: 20%;}
        button{font-size: 12px;color: #FFF4F5;background-color: #2E91FF;}
        .mui-search .mui-placeholder {font-size: 13px;line-height: 26px;}
        input[type="search"] {height: 26px;line-height: 26px;padding: 0px 12px;margin: 0px;}
        table th{font-size: 13px;font-weight: 600;}
        table td{font-size: 13px;text-align: center;}
        table tr{border-bottom: 1px solid red;padding: 0px 0px;height: 37px;}
        .colorBlue{color: #007aff;}
        .mui-scroll-wrapper{height: 400px;position: relative !important;}
     </style>
    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">页面布局</h1>
        </header>
        <div class="mui-content">
            <div class="ul">
                <div>item1</div>
                <div>item2</div>
                <div>item3</div>
                <div>item4</div>
            </div>
            <div class="contentDiv">
                <div class="mui-col-xs-3 leftDiv">
                    <div id="segmentedControls" class="segmentedControls">
                        <div class="mui-control-item colorBlue">保障及时率</div>
                        <div class="mui-control-item">保障及时率</div>
                        <div class="mui-control-item">保障及时率</div>
                        <div class="mui-control-item">保障及时率</div>
                        <div class="mui-control-item">保障及时率</div>
                    </div>
                </div>
                <div class="mui-col-xs-9 rightDiv mui-scroll-wrapper" id="muiscrollwrapper">
                    <div>
                        <div class="rightDivTitle">
                            <div class="mui-input-row mui-search">
                                <input type="search" class="mui-input-clear" placeholder="请输入内容可见">
                            </div>
                            <button>搜索</button>
                        </div>
                        <div>
                            <table width="100%" class="table">
                                <tr>
                                    <th>人员姓名</th>
                                    <th>保障及时率</th>
                                    <th>市级排名</th>
                                    <th>区县排名</th>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>89%</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="./js/mui.min.js"></script>
    <script src="./js/jquery-1.11.1.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        $('.segmentedControls div').click(function() {
            $(this).addClass("colorBlue").siblings().removeClass("colorBlue");
            console.log(12);
        })

        mui('#muiscrollwrapper').scroll({
            indicators: true //是否显示滚动条
        });
        mui("muiscrollwrapper").pullRefresh({
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh1
            },
        })

        function pullupRefresh1() {
            console.log("上拉加载1");
        }
    </script>
</html>

前端小云儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
mui-drip-table-demo:简单表
04-29
滴灌表演示 ・ mui-drip-table的示范画面（v0.2.3〜1.0.0） 演示页面 ・
mui实现表格
热门推荐
u013720726的博客
09-04 2万+
mui的css文档中没有向bootstrap中类似的写好的样式供调用，但是用table显示表格本身就不难看，再写一些CSS类完全可以放到网页中，下面提供代码：<head> <style> .table { border: 1px solid #cad9ea; color: #666; }
推荐开源项目：mui-virtualized-table —— 高效数据表的不二选择
最新发布
gitblog_00080的博客
06-18 352
推荐开源项目：mui-virtualized-table —— 高效数据表的不二选择 项目地址:https://gitcode.com/techniq/mui-virtualized-table 在大数据时代，表格的高效展示成为了一个重要的话题。当你的应用需要处理大量行和列的数据时，如何既保持界面流畅又不失美观？mui-virtualized-table 正是为此而生，它巧妙地结合了Materia...
mui 左右可滑动的表格
baidu_24743861的博客
10-24 1173
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" id="title"></h1&...
mui简单的表单案例
weixin_45787600的博客
03-17 1605
效果图： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>mui表单</ti.
MUI 动态的加载表格数据
思考的蜗牛
05-18 1万+
首先是我访问了后台获取到了json格式的数据集合lsthtml代码如下：&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content=&q
mui-website:MUI组件库主页（使用文档）
03-06
在MUI组件库中，常见的组件包括按钮、卡片、对话框、抽屉、网格、图标、输入字段、布局、菜单、滑块、开关、表格、工具提示和snackbar等。每个组件都有其特定的类名和配置选项，开发者可以通过修改这些参数来满足...
MUI框架开发HTML5
01-03
MUI框架结合了HTML5和JavaScript技术，提供了丰富的UI组件，涵盖了从页面布局到交互效果的各个层面，使得开发者能够快速构建出具有原生应用体验的Web应用。 **1. MUI框架的特点** - **组件化设计**：MUI提供了包括...
H5和html、mui等前端百度ORC识别身份证、驾驶证接口的api实现方法
03-23
4. **展示识别结果**：将识别到的信息显示在H5页面上，可以是直接文本展示，也可以是格式化的布局，如表格或卡片形式。 在`baiduocr.html`文件中，你应该能看到一个简单的示例代码，它可能包含了HTML结构、...
muidemo整理测试
02-16
MUI框架提供了一整套的UI组件，包括导航栏、侧滑菜单、按钮、表格、轮播图、弹出框等，涵盖了移动应用常见的交互元素。此外，MUI还支持手势识别、下拉刷新、上拉加载等功能，使得开发者能够快速构建出具有良好用户...
muiapp开发实战03 操作表的使用
m1m2m3mmm的博客
12-15 1177
操作表的使用及隐藏方法
bootstrapTable和mui中表格的使用
胡泽宽-廊坊师范学院信息技术提高班-十三期
09-17 6502
先看一看bootstrapTable的表格显示效果。                            来看一下代码！    oTableInit.Initname = function () { var gradeid = document.getElementById("TypeName").value; var txtname
HTML应用开发基础篇 - MUI 框架（三）MUI 布局
徐小mu的博客
04-04 4247
目录 1、MUI 栅格系统 2、MUI 标题栏 3、MUI 选项卡 4、卡片视图 5、轮播组件 6、列表 1、MUI 栅格系统 2、MUI 标题栏 3、MUI 选项卡 4、卡片视图 5、轮播组件 6、列表 ...
mui mui-table-view mui-table-view-cell 随笔
戮筱沫博客
08-05 6701
mui-table-view mui-table-view-cell  设置选中状态： var items = document.getElementById("items"); mui(".mui-table-view").on('tap', '.mui-table-view-cell', function(e) { var lastActiveItem = items.querySele...
HBuilder MUI 中添加固定列固定表头的表格,单元格根据宽度自适应
你好邱林和的专栏
01-30 1万+
HBuilder MUI 中想要实现:添加固定列固定表头的表格,单元格根据宽度自适应,参考如下链接:https://www.douban.com/note/286673563/,还有他的github封装好的android的工程文件,链接如下:移动端固定列js工具,只要把这些文件放在html中,就可以实现固定前几列,然后水平和竖向滚动:       1.导入js和css文件:    2.接着
mui 选项卡tab页实现区域滚动，Ajax函数渲染数据（选项卡+scroll滚动+折叠面板）
shanxiu_的博客
03-03 1058
效果图预览 一、HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>news</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
MUI框架开发APP详解，一篇就够了
大河之犬的博客
03-27 1万+
最接近原生APP体验的高性能前端框架追求性能体验，是开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件MUI官方文档。
Dcloud mui 获取table tr的td值
qingsepanni的专栏
12-23 811
mui 获取table tr的td值                                              商品编码                 商品名称                                       1234567890 大白菜 1234567890 大白菜
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值