一个简单的手机的登录界面,用flex布局,无数据处理后台。效果图: 这个例子用flex,弹性布局。素材有以下一些图片: 根据效果图,规划为flex的列布局,划分比例大概如下图: 操作步骤: 1 做个DIV容器盒子main,它就是主要的盒子。 2 再放各个盒子,一共五个,五个盒子挤在了一起,因为他们没 ...
分类:
其他好文 时间:
2020-04-19 20:55:35
阅读次数:
75
前言 先简单介绍一下「文经课表」:基于微信小程序MINA框架的WXML、WXSS、JS为代码语言进行开发,视图层采用Flex弹性布局,逻辑层采用模块化模式开发。发布一周累计用户人数1000+,烟台大学文经学院、烟台大学文经学院学生会等官方微信公众号主动关联小程序,更多介绍:https://lab.s ...
分类:
其他好文 时间:
2020-04-18 11:49:24
阅读次数:
84
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 icon 图标组件是一个很常用的基础元件, MinUI 中 icon 组件的效果图如下 ...
分类:
微信 时间:
2020-04-18 10:13:05
阅读次数:
107
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、小程序组件化框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中价格 price 组件是一个很常用的基础元件, MinUI 中 price 组件的效果图如下: ...
分类:
微信 时间:
2020-04-18 09:45:54
阅读次数:
87
代码结构: <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://timgsa.baidu.com/timg?i ...
分类:
其他好文 时间:
2020-04-15 13:51:19
阅读次数:
213
为什么写这个呢?因为在开发管理系统的过程中,会不可避免的对一些css属性进行调整,其次虽然在大学中学过这些东西,但是主业为java后端,这些我当时是的确是聊聊而过了 一、flex布局介绍,代码如下 { display: flex; justify-content: space-between; al ...
分类:
Web程序 时间:
2020-04-15 00:46:31
阅读次数:
71
Flex布局 //Flex 是 Flex Box 的缩写,意为“灵活的盒子”或“弹性的盒子”,所以flex布局一般称为弹性布局。 flex容器:所有含有 display:flex | inline-flex; 的容器都是flex容器。 flex项目:flex容器的所有子元素都是flex项目。(不包括 ...
分类:
其他好文 时间:
2020-04-14 23:06:02
阅读次数:
129
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #test{ background-color:#C2EDFF; display:f ...
分类:
其他好文 时间:
2020-04-13 19:30:53
阅读次数:
75
菜鸟教程地址:https://www.runoob.com/w3cnote/flex-grammar.html flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction属性决 ...
分类:
其他好文 时间:
2020-04-13 16:43:59
阅读次数:
59
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的 ...
分类:
Web程序 时间:
2020-04-13 15:26:03
阅读次数:
83