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 :

2020前端 web 最新面试题 128 题汇总含详细答案

阅读更多关于 2020前端 web 最新面试题 128 题汇总含详细答案

霖呆呆的近期面试128题汇总(含超详细答案) (本文转自群友) 前言你盼世界，我盼望你无 bug 。Hello 大家好！我是霖呆呆！哈哈😄，这是一篇面试总结文章，抱歉， webpack 和 HTTP 系列的先暂缓一下更新哈，Sorry~ 这篇文章是呆呆自己近期的一些面试汇总，算了一下有128道，基本都写了比较完善的答案，就算没有写也有推荐一些好的文章链接，文章篇幅较大，整理总结也花费了很多的时间和心血，题目也是根据公司规模的大小从易到难，算是见证了呆呆面试过程中的不足与成长吧 😅。还希望能帮助到正在一起努力求生存的小伙伴们。另外，看到标题了吗？ "掘金技术征文" ，嘻嘻，要不要考虑帮这么 "用心" 的呆呆拿拿大奖呢？放心放心，要真成了好处少不了你们😋。所有文章内容都已整理至 https://github.com/LinDaiDai/niubility-coding-js 快来给我Star呀😊~ (因为近期面的主要都是一些深圳的中小公司，他们也还在招聘中，所以不便透露公司名称，还请大家理解…) 深圳某做海外加速器公司 4月22日上午 1. DIV+CSS布局的好处代码精简，且结构与样式分离，易于维护代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户的体验对SEO搜索引擎更加友好，且H5又新增了许多语义化标签更是如此允许更多炫酷的页面效果，丰富了页面

BFC、Flex box,一文带你探索CSS布局定位的奥秘

阅读更多关于 BFC、Flex box,一文带你探索CSS布局定位的奥秘

相信所有前端开发者的入门课，都是从div和css开始的，CSS作为基础中的基础，除了让页面因为样式而变得丰富美观外，更是决定了页面元素的排列布局，然而很多时候，当我们对CSS一知半解，我们总会在开发中遇到元素不能按照我们所想的那样呈现出来的问题，所以本文就来系统的讲讲CSS的布局定位。盒模型首先，我们来了解构成页面的元素。在CSS中，我们的每个元素本质上都是一个盒子，盒模型决定了一个元素的大小和他所占大小，盒模型由以下几部分组成： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。那么元素的大小到底取决于什么呢？目前有两种盒模型： W3C盒模型和 IE盒模型，两种盒模型的计算方法不同，在CSS中，我们可以用 box-sizing 指定使用哪种方式计算： content-box（W3C盒模型）：盒子宽高 = 内容宽高（content） border-box（IE盒模型）：盒子宽高 = 内容宽高（content） + 内边距（padding）+ 边框（border）看个例子： // W3C盒模型 <style> .box { width: 200px; height: 200px;

[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

《明日方舟》干员列表实现

阅读更多关于《明日方舟》干员列表实现

各位朋友们！ W 的活动快要结束了，各位抽到了吗？刚刚又来了一次十连，又歪了，感觉跟 W 要无缘了😭。这次分享一个布局小技巧，在网页中实现元素的横向排版。 @ARKNIGHTS 这是《明日方舟》的干员列表页面。仔细观察一下，会发现元素排版从上倒下，如果空间不够，会挤到第二列。而正常的元素排版是从左到右，如果空间不够，会挤到第二行。再来个图演示一下效果。虽然在平时开发中很少会遇到，但是还是有的，比如 bilibili 的菜单。横向排版代码实现 + ARKNIGHTS 提前声明另外本次写 html 用的 pug，不清楚 pug 怎么使用的同学看这里: READ MORE+ 一、实现布局限制父元素高度。 flex 布局。 // html pug - var n = 1; ul while n < = 21 li = n++ 复制代码然后加上一点点样式 // less html , body { width : 100% ; height : 100vh ; background-image : linear-gradient (to top, #accbee 0%, #e7f0fd 100%); overflow : auto; } ul { padding : 0 30px ; height : 100% ; display : flex; flex-wrap

左边导航右边分屏框架实现

阅读更多关于左边导航右边分屏框架实现

左边导航，点击右边跳转对应页面实现: CCC2.html #主框架代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据操作平台</title> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .container { width: 100%; height: 100%; display: flex; } .left { flex: 0 0 200px; padding: 10px; margin: 0; } .left li { cursor: pointer; } .left li:hover { color: blue; } .right { flex: 1; border: 1px solid #000; } </style> </head> <body> <div class="container"> <ul class="left"> <li class="item" frameSrc="{{ url_for('FenLan') }}">B2C落地页_数据操作</li> <li class="item" frameSrc=#>第二个iframe</li> <li class=

CSS两列布局的N种实现

阅读更多关于 CSS两列布局的N种实现

一、什么是两列布局　　两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在CSS面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。二、左侧定宽、右侧自适应如何实现？　　1.双inline-block 　　　　原理：两个元素都设置dislpay:inline-block，为了消除html空格的影响，父元素的font-size需要设置为0，右侧自适应元素的宽度使用calc函数计算。如果两个元素的高度不一样，可以给元素设置vertical-align:top调整。　　　　缺点：由于父元素设置了font-size为0，子元素内文字不会显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; font-size:0; } .left{ display: inline-block; width: 100px; height: 200px; background-color: red; vertical-align: top; } .right{ display:

三年前端寒冬入大厂，收获蚂蚁P6+、字节2-1 offer 面经分享

阅读更多关于三年前端寒冬入大厂，收获蚂蚁P6+、字节2-1 offer 面经分享

最近因为一些原因想要换份工作，通过猎头帮我投递了几家公司，收到了蚂蚁、字节和拼多多的面试邀约，先来说下面试的结果蚂蚁：收到 offer，定级 P6+ 字节：收到 offer，定级 2-1 拼多多：1 面之后未继续流程拼多多先来说说拼多多，本来投的是 C 端，结果鬼使神差简历去到了 A 端（管理后台），一面简单了解之后并不愿意去做 A 端，之后也就没有继续后续的流程了。一面合并两个数组 concat、for 循环、扩展运算法、push.apply 这些方法都可以合并两个对象 Object.assign、扩展运算法、手写深浅拷贝都可以 interface 和 type 的区别常规题，网上资料很多了，还是看官网的说明比较好 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type alias for an object type literal cannot. flex: 0 1 auto 表示什么意思 flex: 0 1 auto 其实就是弹性盒子的默认值，表示 flex

移动端吸顶导航组件的实现

阅读更多关于移动端吸顶导航组件的实现

前言吸顶导航是营销会场类最常用的组件之一，现在的会场页面是越来越长，如果从第一屏手动滑到最后一屏，还是一个挺累的操作，所以吸顶导航还是很有必要存在的，组件很常见，但是开源的不多，而且大多是PC版，几乎都不能满足业务的需求，所以决定自己写一个。先看下组件效果 demo 功能拆解梳理下组件需要实现的功能到达首层吸顶和最后一层取消吸顶当前楼层高亮显示选中导航居中显示默认显示或滑到首层才显示滑动过程中控制隐藏显示展开显示更多功能实现下面我会介绍下其中几个功能的实现方法，全部源码有兴趣的话可以点击这里导航选中居中 1. 如何居中首先我们可以先考虑怎么居左，我们知道每一项距离左边的宽度是 m ，那居左就是 -m ,居中就是再减中线的位置，中线的位置如果是 M ，那就是 M-m 。 2. 处理边界的情况通过 M-m ，我们再来处理到达边界的问题，主要两种情况 1.当M-m>0的时候，则已经到达最左边 2.当M-m >于可滚动的距离（滚动条长度-可视长度），就是到达最右边实现代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /*以下代码为了方便理解，略有删减*/ /* * 导航切换 */ watch(){ translateX

java 读取气象专业格式NetCDF文件

阅读更多关于 java 读取气象专业格式NetCDF文件

一、NetCDF简介 NetCDF全称为network Common Data Format（ “网络通用数据格式”），是一个软件库与机器无关的数据格式，支持创建，访问基于数组的科研数据。分别提供了对Java和C / C++ / Fortran语言。对程序员来说，它和zip、jpeg、bmp文件格式类似，都是一种文件格式的标准。netcdf文件开始的目的是用于存储气象科学中的数据，现在已经成为许多数据采集软件的生成文件的格式。从数学上来说，netcdf存储的数据就是一个多自变量的单值函数。用公式来说就是f(x,y,z,…)=value, 函数的自变量x,y,z等在netcdf中叫做维(dimension)或坐标轴(axix),函数值value在netcdf中叫做变量(Variables)。而自变量和函数值在物理学上的一些性质，比如计量单位(量纲)、物理学名称在netcdf中就叫属性(Attributes)。二、需要用到的netcdf的jar 下载地址： https://www.unidata.ucar.edu/ 本文使用版本：netcdfAll-4.6.14.jar 需要java 的jdk 8以上版本三、读取和打印经纬度变量，了解数据组织结构 public static void main(String[] args) { String filename = "pres

订阅 FLEX