CSS3 弹性盒子(Flex Box) 微信小程序图片通栏
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>chkUrl--脚本管理</title>
<link rel="stylesheet" href="/static/WeUI_files/weui.css">
<link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;"> {{/*{{range .}}*/}}
{{/*{{.}}*/}}
{{/*{{.Host}}*/}}
{{/*{{end}}*/}} <div class="weui-cells page__category-content">
<div class="page__hd">
<h1 class="page__title">chkUrl</h1>
<p class="page__desc">检测url状态信息</p>
</div>
<div class="page__bd">
{{/*<div class="weui-cells__title">带说明的列表项</div>*/}}
<div class="weui-cells">
{{/*<div class="weui-cell">*/}}
{{/*<div class="weui-cell__bd">*/}}
{{/*<p>标题文字</p>*/}}
{{/*</div>*/}}
{{/*<div class="weui-cell__ft">说明文字</div>*/}}
{{/*</div>*/}} {{range .}}
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd" style="transform: translateX(-68px)">
<div class="weui-cell" style="padding-left: 68px">
<p> {{.Host}}</p>
<p> {{.Port}}</p>
<div class="weui-cell__ft"> {{.Path}}</div>
<div class="weui-cell__ft"> {{.ScriptName}}</div> <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;">
</div> </div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">运行</a>
</div>
</div>
</div> {{end}} </div>
</div> {{range .}}
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{.Host}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Port}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Path}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.ScriptName}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*" value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;"></div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">运行</a>
</div>
</div>
</div>
{{end}}
{{/*<div class="page flex js_show">*/}}
{{/*<div class="page__hd">*/}}
{{/*<h1 class="page__title">Flex</h1>*/}}
{{/*<p class="page__desc">Flex布局</p>*/}}
{{/*</div>*/}}
{{/*<div class="page__bd page__bd_spacing">*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*</div>*/}}
{{/*<div class="page__ft j_bottom">*/}}
{{/*<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>*/}}
{{/*</div>*/}}
{{/*</div>*/}} </body>
</html>
{{end}}
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>chkUrl--脚本管理</title>
<link rel="stylesheet" href="/static/WeUI_files/weui.css">
<link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
{{/*{{range .}}*/}}
{{/*{{.}}*/}}
{{/*{{.Host}}*/}}
{{/*{{end}}*/}}
<div class="weui-cells page__category-content">
<div class="page__hd">
<h1 class="page__title">chkUrl</h1>
<p class="page__desc">检测url状态信息</p>
</div>
<div class="page__bd">
{{/*<div class="weui-cells__title">带说明的列表项</div>*/}}
<div class="weui-cells">
{{/*<div class="weui-cell">*/}}
{{/*<div class="weui-cell__bd">*/}}
{{/*<p>标题文字</p>*/}}
{{/*</div>*/}}
{{/*<div class="weui-cell__ft">说明文字</div>*/}}
{{/*</div>*/}}
{{range .}}
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd" style="transform: translateX(-68px)">
<div class="weui-cell" style="padding-left: 68px">
<p> {{.Host}}</p>
<p> {{.Port}}</p>
<div class="weui-cell__ft"> {{.Path}}</div>
<div class="weui-cell__ft"> {{.ScriptName}}</div>
<input class="weui-input" type="number" pattern="[0-9]*" value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;">
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">运行</a>
</div>
</div>
</div>
{{end}}
</div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
<div class="weui-cell weui-cell_swiped">
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{.Host}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Port}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.Path}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{.ScriptName}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
value="weui input error"
placeholder="请输入uid（0-9）" style="margin-left: 2em;"></div>
</div>
<div class="weui-flex__item">
<div class="placeholder">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
style="color: #FFF;text-align: center;">运行</a>
</div>
</div>
</div>
</div>
{{end}}
</div>
{{/*<div class="page flex js_show">*/}}
{{/*<div class="page__hd">*/}}
{{/*<h1 class="page__title">Flex</h1>*/}}
{{/*<p class="page__desc">Flex布局</p>*/}}
{{/*</div>*/}}
{{/*<div class="page__bd page__bd_spacing">*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*<div class="weui-flex">*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*<div class="weui-flex__item"><div class="placeholder">weui</div></div>*/}}
{{/*<div><div class="placeholder">weui</div></div>*/}}
{{/*</div>*/}}
{{/*</div>*/}}
{{/*<div class="page__ft j_bottom">*/}}
{{/*<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>*/}}
{{/*</div>*/}}
{{/*</div>*/}}
</body>
</html>
{{end}}
img{
flex: 1 100%;
}
CSS3 弹性盒子(Flex Box) 微信小程序图片通栏的更多相关文章
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序图片放大预览
需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...
- 微信小程序 图片裁剪
微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...
- 微信小程序图片保存到本地
微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...
- 微信小程序图片上传和裁剪
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...
- 关于微信小程序图片失真的解决方案
今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域:如下 但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一 ...
- 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...
- 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...
随机推荐
- 【bzoj3123】[Sdoi2013]森林 倍增LCA+主席树+启发式合并
题目描述 输入 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负 ...
- BZOJ 4823 [Cqoi2017]老C的方块 ——网络流
lrd的题解:http://www.cnblogs.com/liu-runda/p/6695139.html 我还是太菜了.以后遇到这种题目应该分析分析性质的. 网络流复杂度真是$O(玄学)$ #in ...
- 北京集训TEST13——PA（Goodness）
题目: Description 桌面上放有 n 张卡牌.对于每张卡牌,一面是绿色的,另一面是红色的.卡牌的每一面都标有一个整数.对于卡牌a和卡牌b,卡牌a对卡牌b的好感度为卡牌a绿色面的数与卡牌b红色 ...
- robotframework安装和配置【转IBM：https://www.ibm.com/developerworks/cn/opensource/os-cn-robot-framework/index.html】
内容 概览 Robot Framework 介绍 Robot Framework 的安装和配置 RIDE 编辑器介绍 创建测试项目 简单的测试用例的编写 总结 相关主题 评论 Robot Fr ...
- [配置Cordova环境] [Alfred使用手册]
Mac神器 Alfred使用手册http://www.tuicool.com/articles/YJJv2i 配置Cordova环境 1.到nodejs官网下载最新版本,安装pkg文件 2.终端运行 ...
- 洛谷 [P1995] 程序自动分析
并查集+ 离散化 首先本题的数据范围很大,需要离散化, STL离散化代码: //dat是原数据,id是编号,sub是数据的副本 sort(sub + 1, sub + tot + 1); size = ...
- wamp Apache和mysql服务无法启动的终极解决方法！！！！！！
用了几年的wampserver 突然宣告无法启动,Apache和mysql都崩溃了,在计算机的服务选项里面也是无法启动的,系统报了一个未知错误,重装了N个版本的PHP集成开发环境,都宣告失败! 我想应 ...
- 集合-Vector
Vector中的操作是线程安全的. public Vector(int initialCapacity, int capacityIncrement) { super(); if (initialCa ...
- [Poi2010]Bridges 最大流+二分答案 判定混合图欧拉回路
https://darkbzoj.cf/problem/2095 bzoj 相同的题挂了,这个oj可以写. 题目就是要我们找一条欧拉回路(每个桥经过一次就好,不管方向),使得这条回路上权值最大的尽量小 ...
- BZOJ——1607: [Usaco2008 Dec]Patting Heads 轻拍牛头
http://www.lydsy.com/JudgeOnline/problem.php?id=1607 Time Limit: 3 Sec Memory Limit: 64 MBSubmit: 2 ...