前端 | 领风沐雨

表格标签css固定列的方案

html中表格标签css固定列方案，table固定最后一列，table固定第一列 CSS样式： <style> table { table-layout: auto !important; word-break: keep-all !important; } td,th{ padding: 0 5px; } table tr:nth-child(even){ background:white; } table tr th:nth-last-child(2), table tr td:nth-last-child(2){ padding-right: 170px; } table th:last-child, table tr td:last-child { background: inherit; border-left:1px solid #ddd; width:150px ; text-align: center; position: fixed; right: 0; z-index: 2; } table tr th:nth-child(2), table tr td:nth-child(2){ padding-left: 170px; } table th:first-child,table tr td:first-child{ background: red; border-left:1px solid #ddd; width:150px ; text-align: center; position: fixed; left: 0; z-index: 2; } </style> 所有HTML代码： ` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="/admin/css/common.css"> <link rel="stylesheet" href="/admin//css/news/news.css"> <link rel="stylesheet" href="/admin//css/font-awesome.min.css"> <script src="/admin//js/jquery.min.js"></script> <script src="/admin//js/news.js"></script> </head> <style> table { table-layout: auto !important; word-break: keep-all !important; } td,th{ padding: 0 5px; } table tr:nth-child(even){ background:white; } table tr th:nth-last-child(2), table tr td:nth-last-child(2){ padding-right: 170px; } table th:last-child, table tr td:last-child { background: inherit; border-left:1px solid #ddd; width:150px ; text-align: center; position: fixed; right: 0; z-index: 2; } table tr th:nth-child(2), table tr td:nth-child(2){ padding-left: 170px; } table th:first-child,table tr td:first-child{ background: red; border-left:1px solid #ddd; width:150px ; text-align: center; position: fixed; left: 0; z-index: 2; } </style> <body> <div class="list-content" style="overflow:auto;"> <table> <tr> <th width="50px">序号</th> <th>应用名</th> <th>app_id</th> <th>secret_key</th> <th>绑定学校</th> <th>教务系统</th> <th>联系人</th> <th>联系电话</th> <th>状态</th> <th>创建日期</th> <th>更新日期</th> <th width="200">操作</th> </tr> <tr> <td align="center">1</td> <td>请打的</td> <td>1542081125346835</td> <td>29f7a4edd04af7f558870636b6689781</td> <td>青岛大学</td> <td>URP综合教务</td> <td>水电费</td> <td></td> <td>1</td> <td>2018-11-13 11:52:05</td> <td>2018-11-13 11:52:05</td> <td> <span class="edit-btn" οnclick="parent.showUrlDialog('edit/id/8')"><li class="fa fa-edit"></li> 编辑</span> <span class="delete-btn" οnclick="delAppClient('8')"><li class="fa fa-ban"></li> 删除</span> </td> </tr> <tr> <td align="center">2</td> <td>看手机</td> <td>1542036973909802</td> <td>7ce5dc0272e2482acf8c37ef9f0d1582</td> <td>青岛大学</td> <td>URP综合教务</td> <td>万洲</td> <td></td> <td>0</td> <td>2018-11-12 23:36:13</td> <td>2018-11-13 00:14:13</td> <td> <span class="edit-btn" οnclick="parent.showUrlDialog('app_client/edit/id/7')"><li class="fa fa-edit"></li> 编辑</span> <span class="delete-btn" οnclick="delAppClient('7')"><li class="fa fa-ban"></li> 删除</span> </td> </tr> </table> </div> <div class="page"> </div> </body> </html>` 参考：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child) 了解更多属性参考：[https://blog.csdn.net/veloi/article/details/84027505](https://blog.csdn.net/veloi/article/details/84027505)

LayUI实战之layui-layer.open使用

LayUI实战之layui.layer.open使用有时候我们有这么一种需求，在开发表单界面的时候，有一行指定用户需求时，需要查询用户，由于用户是独立的表和模块，数据量大的时候，我们不能一次查找所有数据，放到Select中供用户进行选择，这时候基本上都会需要弹出一个界面，让用户进行查询及选择，选择之后，把选择的数据在传递到上一个打开的界面； … 没错就是通过layui.layer.open进行实现 _layer_是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。接下来一步一步进行操作第一步创建工程根据自己的爱好，选择顺手的开发工具，进行创建web项目。这里我创建一个空项目第二步添加Layui js和css 通过官网进行下载 https://www.layui.com/ 下载之后进行解压把layui文件夹添加到项目中（参考下图）第三步添加2个html文件 index.html `<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>LayUI测试</title> <link href=“layui/css/layui.css”/> <script src=“layui/layui.all.js”></script> </head> <body> <div class=“layui-form-item " > <label class=“layui-form-label”>选择</label> <div class=“layui-input-block” > <button style=“width: 15%” class=“layui-btn layui-btn-radius layui-btn-warm” type=“button” id=“sel_good” lay-filter=“sel_good”>点击选择</button> </div> </div> <div class=“layui-form-item selectGood” > <label class=“layui-form-label”>所选</label> <div class=“layui-input-block” id=“good” > <input type=“text” id=“goodName” autocomplete=“off” class=“layui-input”> <input type=“hidden” id=“goodId” name=“goodId” autocomplete=“off” class=“layui-input”> </div> </div> <script src=“https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $("#sel_good”).on(“click”, function () { var e = layui.layer.open({ title: “选择”, type: 2, move: false, anim: 1, skin: “larry-green”, offset: '10px', area: [10240.9 + “px”, 8000.9 + “px”], content: “one.html”,//后台请求地址 success: function (layero, index) { console.log(layero, index); console.log("==============================================”); var body = layui.layer.getChildFrame('body', index); console.log(body); }, btn: ['按钮一', '按钮二', '按钮三'],//默认按钮一执行的yes btn2 是按钮2 btn3是按钮三 yes: function(index, layero){ console.log(layero, index); //do something layer.close(index); //如果设定了yes回调，需进行手工关闭 } }); }); //https://www.layui.com/doc/modules/layer.html#btn </script> </body> </html> ` ...

webpack 简单使用

webpack 简单使用 webpack是目前前端开发最流行的打包工具之一，今天就一步一步构建初始化npm工程 npm init 创建npm 工程根据自己的需求进行配置项目添加webpack 依赖 npm i webpack –save-dev 安装webpack 安装成功之后，在package.json中在 devDependencies中有 webpack 使用webpack打包 js 创建js文件创建module.js 创建app.js module.js 文件内容 export const log = function(){ // document.write(‘module.js loaded’); console.log(‘module.js loaded’); } app.js import moduleLog from ‘./module.js’; import ‘./style.css’; moduleLog(); document.write(‘app.js loaded’); 创建index.html <!DOCTYPE html> <script src="dist/bundle.js"></script> 创建完成之后，我们开始webpack打包 app.js ./node_modules/.bin/webpack app.js -o dist/bundle.js 执行完成直接运行index.html 查看运行结果 app.js loadedmodule.js loaded 配置webpack.config.js 通常我们使用webpack命令行进行打包的时候，简单的话，还没有关系，要是想实现更多的功能的时候，我们不能一直添加很长很长的命令行吧，每次打包，你记得住吗？为此我们需要创建 webpack.config.js ...

Element-UI 入门使用

Element-UI 入门使用 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 [Element UI官网][1] 如何在Html文件中使用ElementUI 在网页中引入element ui css和js ，由于Element是具有Vue的，所以需引入Vue的js > > - > > > <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> > > >  > > 在Script中创建Vue对象管理界面元素 > ``` <script> new Vue({ el: '#app', data: function () { return { visible: false } }, }); </script> 3. 接下来就可以使用Element中的元素了 > ``` `<div id="app"> <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="Hello World"> <p>Try Element</p> </el-dialog> </div> ` 完整示例 > ``` `<!DOCTYPE html> <html lang=“en”> ...

后管模版整理

# Bootstrap **Adminlte** 项目：https://github.com/almasaeed2… 演示：https://adminlte.io/themes/Ad… **SB Admin** 项目：https://github.com/BlackrockD… 演示：https://blackrockdigital.gith… **Gentelella Admin** 项目：https://github.com/puikinsh/g… 演示：https://colorlib.com/polygon/… **Vali Admin** 项目：https://github.com/pratikbors… 演示：http://pratikborsadiya.in/val… **ModularAdmin** 项目：https://github.com/modularcod… 演示：https://gurayyarar.github.io/… **Metis** 项目：https://github.com/puikinsh/B… 演示：https://colorlib.com/polygon/… **Ace** 项目：https://github.com/bopoda/ace 演示：http://ace.jeka.by/ **Light Bootstrap Dashboard** 项目：https://github.com/creativeti… 演示：http://demos.creative-tim.com… **Material Dashboard** 项目：https://github.com/creativeti… 演示：http://demos.creative-tim.com… **Clearmin** 项目：https://github.com/paomedia/c… 演示：http://cm.paomedia.com/ Vue **Element Admin** 项目：https://github.com/PanJiaChen… 演示：https://panjiachen.github.io/… **Vue-Bulma** 项目：https://github.com/vue-bulma/… 演示：https://admin.vuebulma.com/ **Iview-Admin** 项目：https://github.com/iview/ivie… 演示：https://admin.iviewui.com **Vuestic-Admin** 项目：https://github.com/epicmaxco/… 演示：https://vuestic.epicmax.co/ ...

React Native入门学习

学习网站 http://wiki.jikexueyuan.com/project/react-native/ http://wiki.jikexueyuan.com/project/react-native-lesson/ 环境搭建安装HomeBrew（brew -v查看brew）安装NodeJS （brew install NVM,nvm install node && nvm alias default node）安装 watchman 和 flow(这两个包分别是监控文件变化和类型检查的)brew install watchman brew install flow 通过 npm安装react-native( npm install -g react-native-cli) init卡解决方案注意：App开发环境的设置 iOS XCode 6.3 及其以上即可。 Android 这个比较麻烦。设置环境变量：ANDROID_HOME export ANDROID_HOME=/usr/local/opt/android-sdk SDK Manager 安装以下包： Android SDK Build-tools version 23.0.1 Android 6.0 (API 23) Android Support Repository 使用步骤 react-native init 项目名称—-创建项目进入项目根目录，项目目录（如下）： react-native run-android 运行android项目/run-ios 运行IOS项目项目中index.android.js和index.ios.js是我们的界面，以后的开发中都是对这些文件编写。例如：product.android.js/product.ios.js 由于android和ios的控件不同，需要根据不同情况添加控件。 ...

10大H5前端框架

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士，这几年我还是阅过很多同门从知名到很知名的各种前端框架，本来想拿15-20个框架来分享一下，但在跟几个前辈讨教写文章的技巧时果断被无情的打击了，所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍，凑够字数也就全剧终了。原本写这篇文章想围绕着 CSS 框架来的，但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架，并且自己靠着一点 JS 功底，就想专门针对 CSS，所以最后来个大锅乱炖都大致聊聊。下面的框架也没有什么先后顺序之分，我想到啥就写啥啦( 作为前端，我一向都这么的任性 ^_^ )。 Bootstrap 首先说 Bootstrap，估计你也猜到会先说或者一定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心，来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美，所以这也是我最初选择 Bootstrap 的原因之一，它让我做出来的东西好歹能在妹子面前装个逼，不过时间长了难免觉得 Bootstrap 美的让人烦躁，但好在它的每个版本都会有很大的改变，不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数，了解他们痛的结果 )，以至于是个小前端都可以快速上手，几乎没什么学习成本。官网：http://getbootstrap.com/ Github：https://github.com/twbs/bootstrap/ 作者：Mark Otto 和Jacob Thornton Star：93,112 总结：Bootstrap 最大的优势就是它非常流行，流行就代表你有问题就有很多人帮你解决问题，就代表装逼它就是利器，还有就是界面比较和谐，容易上手，关注它的童鞋应该发现最新 V4 版也开始支持 FlexBox 布局，这是非常好的升级体验。劣势是 class 命名不够语义化，并且各种缩写，以至于我离了文档就是个菜，最近开始整混合 APP，选框架的时候首选就是它，但之前搞 PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap 好小，小到我只好选择别的框架。 AUI 第三个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主要面向混合开发的 CSS 框架。看起来作者比较猖狂，各种高级 CSS3 遍地使用，这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。 Github：https://github.com/liulangnan/aui 官网：http://www.auicss.com/ 作者：流浪男 Star：92 总结：这个框架对我来说有个优点就是纯 CSS 框架，自己以前也就用过 Pure，自己有点 JS 能力，如果不是复杂的效果，找个纯 CSS 框架自己随便改改就可以，而现在 CSS3 也已经能够做到动画，效率、质量、高效全兼顾，所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么，说好的高大上呢。 ...

WebSocket心跳实现

//间隔发送心跳包数据给服务器，服务器在一定时间内发回心跳包响应，对比超时限定，如果超过设定的超时时间，则认为当前与服务器的websocket连接已经断开，关闭当前web socket连接，善后处理，例如重新连接，或者弹出提示…… function keepalive(ws) { var time = new Date(); //连接断开，可设置重连或者关闭连接 (“#keeplive_box”).html(“服务器没有响应.”).css({ “color” : “red” }); //ws.close(); } else {(“#keeplive_box”).html(“连接正常”).css({ “color” : “green” }); if (ws.bufferedAmount == 0) { ws.send(‘H#C’); } } } var ws = new WebSocket(to_url); ws.onopen = function () { (“#statustxt”).html(“connected.”);(“#send_btn”).attr(“disabled”, false); heartbeat_timer = setInterval(function () { keepalive(ws) }, 3000); }

移动端前端UI库—Frozen UI、WeUI、SUI Mobile

Frozen UI 自述：简单易用，轻量快捷，为移动端服务的前端框架。主页：http://frozenui.github.io/ 开发团队：QQVIP FD Team Github：https://github.com/frozenui/frozenui Demo：http://frozenui.github.io/frozenui/demo/index.html WeUI 自述：WeUI是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。开发团队：Wechat Official Design Team Github：https://github.com/weui/weui Demo：http://weui.github.io/weui/ SUI Mobile 主页：http://m.sui.taobao.org/ 自述：轻量、小巧、精美的UI库，方便迅速搭建手机H5应用，也非常适合开发跨平台Web App。开发团队：阿里巴巴共享业务事业部UED团队 Github：https://github.com/sdc-alibaba/SUI-Mobile Demo：http://m.sui.taobao.org/demos/ 兼容：兼容到 iOS 6+ 以及 Android 4.0+ 基于 Framework7 进行开发，并参考 Ratchet、Fastclick 开源库 MUI 主页：http://dev.dcloud.net.cn/mui/ 自述：最接近原生APP体验的高性能前端框架 Github：https://github.com/dcloudio/mui/ APICloud 主页：http://www.apicloud.com/ 自述：混合APP开发平台助力创业七十二变 WeUI 主页：https://github.com/weui/weui

UEditor插入的图片自适应编辑框大小点击图片不出现拉伸缩放边框

从ueditor.config.js可以看到这些，但是这些修改了，还是不行。 ,compressSide:1 //等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度 //scaleEnabled //是否可以拉伸长高,默认true(当开启时，自动长高失效) //,scaleEnabled:false UE的js肯定不会修改，所有可以考虑修改样式，由此我们找到如下文件： E:\Camnpr\www\modules\ueditor\themes\iframe.css 从这个文件里，就能看到有这一句：/*可以在这里添加你自己的css*/ 哈哈，接下来，我们写css吧： `01` <td class="content"> `img {` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `02` </td> <td class="content"> ` ``max-width``: ``100%``; ``/*图片自适应宽度*/` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `03` </td> <td class="content"> `}` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `04` </td> <td class="content"> `body {` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `05` </td> <td class="content"> ` ``overflow-y: ``scroll` `!important``;` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `06` </td> <td class="content"> `}` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `07` </td> <td class="content"> `.view {` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `08` </td> <td class="content"> ` ``word-break: break-``all``;` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `09` </td> <td class="content"> `}` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `10` </td> <td class="content"> `.vote_area {` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `11` </td> <td class="content"> ` ``display``: ``block``;` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `12` </td> <td class="content"> `}` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `13` </td> <td class="content"> `.vote_iframe {` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `14` </td> <td class="content"> ` ``background-color``: ``transparent``;` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `15` </td> <td class="content"> ` ``border``: ``` `none``;` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `16` </td> <td class="content"> ` ``height``: ``100%``;` </td> </tr> </table> </div> <div class="line alt1"> <table> <tr> <td class="number"> `17` </td> <td class="content"> `}` </td> </tr> </table> </div> <div class="line alt2"> <table> <tr> <td class="number"> `18` </td> <td class="content"> `#edui``1``_imagescale{``display``:``none` `!important``;} ``/*去除点击图片后出现的拉伸边框*/` </td> </tr> </table> </div> 转载：http://camnpr.com/archives/1229.html ...