FLEX | 易学教程

Html/css 列表项区分列表首尾

阅读更多关于 Html/css 列表项区分列表首尾

列表项，有时需要判断列表首尾，来筛选设置样式如上图，三个项有间隔，怎么保证设置了列表项之间的距离后，整体还水平居中显示呢？ .item:not(:first-child) { 　　margin-left: 20px; } 1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="UTF-8" > 5 < title > Document </ title > 6 < style type ="text/css" > 7 .container { 8 width : 600px ; 9 height : 300px ; 10 background : rgba(4,0,255,0.50) ; 11 } 12 .list-parentOuter { 13 float : left ; 14 margin-left : 50% ; 15 } 16 .list-parentInner { 17 position : relative ; 18 right : 50% ; 19 display : flex ; 20 flex-direction : row ; 21 justify-items : center ; 22 margin-top : 50px ; 23 } 24 .item { 25 height :

前端布局方式汇总及概念浅析

阅读更多关于前端布局方式汇总及概念浅析

一、基础布局方式 0. 普通/文档流布局早期 <table>，后来 <div> ，再后来 html5 语意化标签按照自上而下的方式顺次排布。 1. Float 布局 float: left/right 最初设计目的是用于图文环绕排版、不过目前常用于左右布局。 2. 绝对布局 position: absolute,position: fixed 保持与目标元素（position不为static的最近父元素）的绝对距离，使用场景有顶部固定的广告栏，瀑布流等等。 3. Grid 网格布局: display:grid 较为系统的布局方案，详见：https://www.w3cplus.com/css/learncssgrid.html 4. css3 Flex 弹性盒子布局: display:flex 较为系统的布局方案，详见：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 二、常见的布局概念以及实现方法 0. 静态布局静态布局：网页布局始终按照固定的布局和尺寸来显示，不使用 Flex 之类的弹性盒子方案。实现方法：普通/文档流布局 Float 布局绝对布局对于PC：一般居中布局，所有样式使用绝对宽度/高度(px)，屏幕宽高有调整时，使用滚动条来查阅被遮掩部分；

[javascript] elementui下login登录页界面和js验证逻辑

阅读更多关于 [javascript] elementui下login登录页界面和js验证逻辑

主要是使用了form组件 <html lang= " cn " > <head> <meta charset= " utf-8 " > <meta name= " viewport " content= " width=device-width, initial-scale=1, shrink-to-fit=no " > <meta name= " description " content= "" > <meta name= " author " content= " 陶士涵 " > <title>GO-IMAP网页版邮箱imap工具登录页</title> <link rel= " stylesheet " href= " https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css " > <script src= " https://cdn.jsdelivr.net/npm/vue/dist/vue.js " ></script> <script src= " https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js " ></script> <script src= " https://cdn.jsdelivr.net/npm

dsniff

阅读更多关于 dsniff

dsniff是一家集工具为网络审计和***测试dsniff,filesnarf,mailsnarf,msgsnarf,urlsnarf,webspy被动监测网络的数据(密码、电子邮件、文件等)。arpspoof,dnsspoof,macof方便截取网络流量通常不能***者(e。g,由于第2层交换)。sshmitm和webmitm实现主动的猴子在中间***重定向SSH和HTTPS会话利用弱绑定在特别的PKI。我写这些工具与诚实的意图——审计自己的网络,并证明了大多数网络应用协议不安全感。请不要滥用这种软件实验环境 centos-5.5 使用软件 openssl-0.9.7i.tar.gz libnids-1.18.tar.gz libpcap-0.7.2.tar.gz libnet-1.0.2a.tar.gz db-4.7.25.tar.gz dsniff-2.3.tar.gz 软件安装 yum install -y gcc gcc-c++ flex bison tar zxvf openssl-0.9.7i.tar.gz cd openssl-0.9.7l ./config make make install tar zxvf libpcap-0.7.2.tar.gz cd libpcap-0.7.2 ./configure make make install tar zxvf

time line 的制作

阅读更多关于 time line 的制作

<bar title='专题列表'></bar> <view class='pageContent' style="padding-top:{{statusBarHeight}}px"> <view class="timeline"> <block wx:for="{{subjectList}}" wx:for-item="timeItem" wx:for-index="timeIndex" wx:key="timeIndex"> <view class="timeline-item"> <view class="header"> <view class="subject-node"></view> <view class="subject-time">{{timeIndex}}</view> </view> <view class="content"> <block wx:for="{{timeItem}}" wx:for-item="subItem" wx:for-index="subIndex" wx:key="subIndex"> <view class="subject-img" catchtap="toSubjectDetail" data-id="{{subItem.id}}"> <image mode="widthFix" src="{{subItem

四面腾讯与华为，大厂前端面试真BT！

阅读更多关于四面腾讯与华为，大厂前端面试真BT！

今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个offer。（开心.png），但还是挂了两次，有点遗憾。面试题总结面试完之后，赶紧总结了一波，前端这个岗位，这两家大厂的面试思路和面试问题其实都差不多： 1. JS底层：说一说js的原型与继承。分析一下优秀的前端框架源码，这么写的优缺点在哪。 this指向问题，this的深拷贝如何实现，这个也是高频率被问到的问题。 js事件流是怎么样体现的。柯里化函数。 2. 数据层：写过中间件么？了解koa么？数据安全是怎么处理的。 axios 与 fetch的实现。 3. HTTP相关：跨域问题的产生与解决。 http1.1时如何复用tcp连接。 http2.0新的变化。 http报文的请求分成几个部分？前端与后台交互的时候会产生几次握手，分别做了什么？ 4. 框架：说一说vue的源码的响应式与数据驱动，主要是问原理。 Vue与react的区别在哪，这个也是问底层实现。虚拟dom、diff算法等等，基本没问到过怎么去使用。像组件传值啥的没提过。还有就是路由的管理有没有封装过组件库， dev-server是怎么跑起来的。 5. 服务端与工具主要是Node的问题，有没有拿node做过中间层。 Node的线程处理、事件循环。这个主要就是 webpack 与 babel 的配置

js模拟ElementUI风格,创建table列表的实例方法

阅读更多关于 js模拟ElementUI风格,创建table列表的实例方法

js模拟ElementUI风格,创建table列表的实例方法效果如下: html代码: // 引入css <link rel="stylesheet" href="index3.css"> // 引入js方法 <script src="index3.js"></script> // 创建列表盒子DOM <div id="box"></div> // 实例化方法 <script> let aa = { id: 'box', head: [ { label: '放射源等级', props: 'a', flex: 1 }, { label: '放射源类型', props: 'b', flex: 2 }, { label: '操作', flex: 1, template: [{ label: '查看', type: 'info', clickName: 'handleView' }, { label: '编辑', type: 'edit', clickName: 'handleEdit' }, { label: '删除', type: 'delete', clickName: 'handleDelete' }] } ], data: [ {a: '一级', b: 'abd-1', c: '是多少'}, {a: '二级', b: 'cL-2', c: 'woewie'}, {a: '三级'

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

阅读更多关于 Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

目录前言基础理论（5天）基础理论-Day01 基础理论-Day02 基础理论-Day03 基础理论-Day04 基础理论-Day05 项目实战项目实战-Day01 项目实战-Day02 项目实战-Day03 项目实战-Day04、Day05 前言 10天的实训，收获还是很多的。并且，几乎每节课都有录播+源码+笔记(只有一节课，忘了录屏)。大部分知识，都总结到了博客上。培训用到的东西：VScode软件、视频、PDF笔记、源码。除了视频没有上传，其它的都在博客上了。视频，不方便上传！！！可私聊... 例如：基础理论（5天）基础理论-Day01 Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】 Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】基础理论-Day02 Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】 Vue.js-Day02-PM【组件化开发（全局注册组件

Flutter实现不规则底部导航栏

阅读更多关于 Flutter实现不规则底部导航栏

更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自定义 BottomAppBar 在这里使用 BottomAppBar 来实现 /** * 有状态StatefulWidget * 继承于 StatefulWidget，通过 State 的 build 方法去构建控件 */ class BotomeMenumBarPage extends StatefulWidget { ////通过构造方法传值 BotomeMenumBarPage(); //主要是负责创建state @override BotomeMenumBarPageState createState() => BotomeMenumBarPageState(); } /** * 在 State 中,可以动态改变数据 * 在 setState 之后，改变的数据会触发 Widget 重新构建刷新 */ class BotomeMenumBarPageState extends State<BotomeMenumBarPage> { BotomeMenumBarPageState(); @override void initState() { //

CSS基础面试题，快来查漏补缺

阅读更多关于 CSS基础面试题，快来查漏补缺

本文大部分问题来源： 50道CSS基础面试题（附答案），外加一些面经。我对问题进行了分类整理，并给了自己的回答。大部分知识点都有专题链接（来源于本博客相关文章），用于自己前端CSS部分的查漏补缺。虽作为一个面试资料，但感觉也能帮助前端新手梳理CSS的知识点。开胃餐-两道常见考题盒子模型样式与选择器 CSS3 包含块 BFC 中插小点定位position display与visibility float flexbox overflow 响应式设计 CSS优化应用 ▶开胃餐x2 用纯CSS创建一个三角形的原理是什么？ CSS 边框的基础使用图1为border最普遍的用法，border: solid 10px #ffb6b9;。用多了你会不会就觉得border是由四个矩形边框拼接而成，但其实是错的。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们继续看：图2，我们为边框四个方向设置不同颜色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，并加大边框宽度。图3，我们进一步将元素的宽高设为0。我们发现，此时元素由上下左右4个三角形组成。为了实现一个三角形，那就很简单了，我们只需将其它border边的颜色设置为白色或者透明色即可图4，border-color: transparent

订阅 FLEX