mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网。...DOM结构 关于mui页面的dom，你需要知道如下规则： 固定栏靠前 所谓的固定栏，也就是带有.mui-bar（类选择器）属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav...）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content...；扩展阅读： hello mui中的无等待窗体切换是如何实现的 提示HTML5的性能体验系列之一 避免切页白屏 页面关闭：勿重复监听backbutton mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑...只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
box 和周围 box 之间的距离 Padding h1 { background: #eee; padding: 50px; } 注意背景颜色如何扩展以填充此空间。...Border Border 就是围绕内容和填充绘制的线，注意边框如何在填充旁边碰撞，两者之间没有空隙。...您选择其中一个的最常见原因是: 填充具有背景，而边距始终是透明的 填充包含在元素的单击区域中，而边距则不包括在内 边距会发生垂直折叠，而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...但是，它不会影响周围盒子的垂直布局。 垂直边距折叠 盒子模型的另一个怪癖是”垂直边距折叠”。当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。...做法就是在它们之间放置另一个不可见的元素。 一定要记住，填充不会折叠。
requests.get(suggested_activity_url) suggested_activity = json_data.json() #设定两列 c1, c2 = st.columns(2) #第一个是扩展器...#设定第二个扩展器 with c2: with st.expander('JSON data'): st.write(suggested_activity) #设定主面板的标题 st.header...("media", 0, 3, 12, 4), ] # 创建显示各元素的框体 with elements("demo"): # 使用以上指定的布局创建新仪表盘 # # draggableHandle...是一个 CSS 查询选择器，定义了仪表盘中可拖拽的部分 # 以下为将带 'draggable' 类名的元素变为可拖拽对象 # # 更多仪表盘网格相关的可用参数请见： #...也不会立刻接收到，因此不会每次都重新运行 # 因此我们需要另一个非延迟的事件来触发更新 # # 解决方法就是创建一个在点击时回调的按钮
类似身份证），class是可重复的 组合选择器： E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 <!...，匹配所有属于E后代的F元素，E和F之间用空格分隔 E>F 子元素选择器，匹配所有E元素的子元素F E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 伪类选择器： 专用于控制链的显示效果，... a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态 伪类选择器：伪类指的是标签的不同状态： a ==>点过的状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link...Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。...元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。
CSS 选择器 ID 选择器 只能选择一个元素，使用 "#" 引入，引用的是元素的 id 属性值。...元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。...浮动元素之前的元素将不会受到影响。 边框 CSS 边框属性允许指定一个元素边框的样式和颜色。 轮廓属性 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。...轮廓和边框的区别：边框 (border) 可以是围绕元素内容和内边距的一条或多条线；轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。...定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
-- 上右下左顺序 --> } 边框： 元素的边框（border）是元素内容与内边距的一条或多条线 边框与背景： 边框绘制在 元素的背景 之上！...当一个元素包含另一个元素中时，它们的上/下外边距会发生合并： ? ?...，但是可以通过设置行高（框的高度） position属性： position属性：可以选择4种不同类型的定位 static：正常生成框体，块级元素框会是一个矩形框，作为文本流的一部分，行内元素会创建一个或多个行框...浮动定位：float 浮动的框可以向左/向右移动，知道外边接触到另一个框的边框停止 由于浮动框不在文档的普通流中，所以文档的普通流中的块表现的向浮动窗不存在一样。 浮动： ?...如果元素框大小无法接受三个浮动框的大小，就会向下移动…… float属性： float属性实现元素的浮动 行框和清理： 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框 因此，创建浮动框可以使文本围绕图像
选择器用于指定元素的首字母样式，它仅适用于块级元素。...它通常与 float 属性一起使用，因为只有浮动的元素才会有内容围绕它。 可用的值: none: 默认值。不创建任何形状；内容围绕元素的盒子进行排列。...: 使用元素的边距盒、边框盒、填充盒或内容盒作为参考盒。...:where() 伪类函数接受一个选择器列表作为其参数，并将选择所有可以由选择器列表中的任何规则选择的元素。...例如，如果你在“文字打字效果”后面写了另一个词，除非你改变CSS片段中的 steps() 数量，否则动画将无法工作。 也就是说，这种效果并不是特别新颖。
5.3 元素选择器 文档中的元素就是选择器 ? 5.4 属性选择器 ? 5.5 伪类 css伪类用于向某些选择器添加特殊效果。...5.6 层级选择器 id、元素、类、属性选择器的层层结合 ?...定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。...边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素 6.1 边框 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。...6.2 外边距 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
HTML5+扩展了JavaScript 对象plus，使得js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等...Mui:这个是推荐的，比较了jqmobile和mui，显然mui效果样式好点，估计也会有坑，但是支持国产吧。 下面通过一个简单的例子，讲解如何创建开发。...选择模版 这里选择mui项目，会自动引入mui的js和css，如下： 文件结构 默认有以下几个文件夹：css，fonts，js，如下： 简单开发 header 打开index.html后在body内输入...打包 dcloud证书打包 选择发行——App打包——选择android以及dcloud公用证书，如下： 参数配置 可能有时候会提示参数配置错误，这是你需要打开项目下manifest.json文件，并去掉第三方插件...第二种方式类似与open，个人感觉没有什么太大的区别，唯一的区别是open就直接打开了，preload只是加载，你可以之后选择打开的时机。
可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。...#box_relative { position: absolute; left: 30px; top: 20px; } 这样元素就会出现在距离页面的左边框30px上边框20px的地方。...浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 这个就很有意思，其实浮动感觉像是起了另一层的文档流。...我们并不想靠水流自己的力量去影响元素，比如我们并不想让文字围绕着图片，因为我可能想另起一段，在图片的下面，又比如我想要让浮动元素全部贴着边框，而不是一个个排满了才会贴着边框，这个就需要用到clean属性了...还记得我上面讲的那个水流的例子吗。利用clean可以给元素一块“完整的板”，让他遇到浮动元素的时候，不是围绕着它，而是“卡住”。跑到浮动对象的下面去。
，围绕应用研发框架 (ice.js 3) 提供了应用的构建、路由、调试等基础能力以及微前端、一体化等领域能力，同时结合可视化操作、物料复用等方案降低研发门槛。...描述层级关系: 体现元素之间的层级与空间关系。 提供反馈、明确意向: 助力交互体验。...9.MUI MUI是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件，是最接近原生APP体验的高性能前端框架。...可以提供安全、可扩展且具有成本效益的闪电般快速的网站 为用户提供最前沿和最独特的主题。...它具有多个 HTML 元素，并带有 ReactJS、Vue 和 Angular 的动态组件。 项目功能： 1.CSS 组件：Notus React 带有大量完全编码的 CSS 组件。
css选择器 派生选择器： li strong {color:red;} id 选择器： #red {color:red;} class选择器 .center {color:red;} 属性选择器...:top;} top,center,bottom 框模型 margin是外边框 border是边框，是围绕元素内容和内边距的一条或多条线。...padding是内边框 包裹的内容是实际的元素 ? 框模型 外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。但是很多元素都有自己的外边框和内边框。...，border-bottom-color，border-left-color border-color: transparent; 可以用来设置透明边框 外边框margin 围绕在元素边框的空白区域是外边框...通过margin碰撞合并能使网页最上和最下的边框和元素之间的边框保持一致（如果是同一种类型样式的元素）。而不会中间是上下的两倍。
CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷css3...PHP基础：PHP基础语法、使用php处理简单的GET或者POST请求、 AJAX上篇：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax...第五阶段：封装一个属于自己的框架 框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架。 框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。...框架封装高级和补充：jquery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...HTML5+：Html5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷...PHP基础： PHP基础语法、使用PHP处理简单的GET或者POST请求、 AJAX上篇： Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax...第五阶段：封装一个属于自己的框架 框架封装基础： 事件流、冒泡、捕获、事件对象、事件框架、选择框架。 框架封装中级： 运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。...框架封装高级和补充： JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...HTML5+： HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，每个盒子由四个部分（或称区域）组成：内容（Content），内边距（Padding），边框（Border），外边框（Margin）。...盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型（Box Model）： ?...Padding（内边距） - 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。当其取值为百分比时，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。...Border（边框） - 由边框边界限制，扩展自内边距区域，是容纳边框的区域。即围绕在内边距和内容外的边框。 Margin（外边距） - 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。...当其取值为百分比时，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。
--.mui-bar-nav~.mui-content这两个class之间的~什么意思？匹配 .mui-bar-nav 之后所有的 .mui-content（即同级的其他类或元素）。.../home.html", "html/message.html", "html/setting.html"]; mui.plusReady(function() { //获取当前页面所属的..."); //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { //获取目标子页的id var...activeTab = targetTab; }); 二、另一种方式是原生方式，首先新建移动app,选择底部选项卡模板...，会生成原生控件的底部选项卡模板 原生的模板我们经常需要修改成自己需要的 如果改成3个tab切换，修改步骤 1、manifest.json配置文件plus-launchwebview-subNViews
子元素选择器 (>号分割) 这个相比较与后代选择器，区别就是子元素只匹配直接关联的子元素（也就是中间不能有嵌套） div > span { color: red } ... (黄色的内容). e. 普通兄弟 (~号分割) 后续兄弟选择器选取所有指定元素之后的兄弟元素。...Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。...元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。...边框 border 前面介绍了边框的设置，主要还是线条类型，粗细以及颜色，现在则可以扩展，设置圆角、阴影，边框图 border-radius: 2px (四周圆角) 一个值： 四个圆角值相同 两个值:
CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷...第五阶段：封装一个属于自己的框架 框架封装基础： 事件流、冒泡、捕获、事件对象、事件框架、选择框架。 框架封装中级： 运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。...框架封装高级和补充： JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...HTML5+： HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。...希望你也能凭自己的努力，成为下一个优秀的程序员！
，strong、u（下划线）、button CSS3 新特性 选择器 背景和边框 文本效果 2D/3D 转换 动画、过渡 多列布局 用户界面 选择器 :last-child /* 选择元素最后一个孩子...*/ :first-letter /* 选择该元素内容的首字母 */ :first-line /* 选择该元素内容的首行 */ ::selection /* 选择被用户选取的元素部分 */ 背景和边框...transform:matrix(0.866,0.5,-0.5,0.866,0,0); 3D 转换 rotateX()：元素围绕其 X 轴以给定的度数进行旋转。...transform: rotateX(120deg); rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。...: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。WeUI 为微信 Web 服务量身设计的h5框架。...但VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。...MUI与WeUI MUI是一个轻量级的CSS框架，遵循Google的Material Design设计方针。...MUI凭着其极小的体积，帮助网页尽可能快地加载，mui.min.css只有6.6KB (gzipped)，mui.min.js只有5.4KB (gzipped)。...，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
