AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！
css悬停效果
*{margin:0;padding:0;font-family:"Poppins",sans-serif;}body{display:flex;justify-content:center;align-items:center;background:rgb（76,79,64）;}.container{position:relative;height:600px;
CSS弹性盒子
弹性盒子定义弹性盒子display:flex;定义块级弹性盒子display:inline-flex;定义行内弹性盒子弹性盒子子元素排列方式flex-direction:row;默认，水平显示flex-direction:row-reverse;水平显示，顺序颠倒flex-direction:column;垂直显示flex-direction:column
简单弹性布局
弹性布局Flexbox弹性布局（flexiblebox）模块目的是提供一个更加有效的方式来布置对齐和分布在容器之间的各项内容，即便它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间的能力。可以更轻松地设计灵活的响应式布局结构，
一个前端报错技术细节
问题：当data为null时，报错data不能为null原因：在网页还没有请求数据，页面v-for就执行了，所以此时的data还没有赋值数组。解决办法：在html中加入v-if=“data”,当data!=null时才渲染页面。<template><viewv-if="data!=null"class=""><uni-list> <uni-list-itemv-
flex布局
最开始接触flex布局，是在几年前小程序刚刚出来的时候，在慕课网上学了个小程序实战课，里面涉及到，所以就学了现在有时间就来再次总结学习一遍~用法一：均分宽度<divid="box1"><divclass="box1_item1">红</div><divclass="box1_item2">绿</div><divclass="box1_item3&q
自定义步骤条 , 纯原生html + css
只需要给所在步骤加current-n类名就行html<divclass="progress-x"><divclass="zb-div"><spanclass="zb-numbernumber1"></span><spanclass="zb-line"></span>&
插件介绍：Swiper轮播插件
引入方式源码cdn引入<linkrel="stylesheet"href="https://unpkg.com/swiper/css/swiper.css"><linkrel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css"><scriptsrc="https://unpkg.com
滴滴前端面试问题没被难倒，自我介绍、面试时被考察、等环节回答却是灾难现场
前言在这近期这段时间内，我面试了两次滴滴(前后两个不同的部门)，也面试了一些小公司，这些面试对我的帮助是很大的，不只是为了一份实习生的工作，一次又一次的面试后我的心态上越发平稳，也发现了自己在学习上的一些缺陷，一直也没对其进行一次系统的总结，这篇文章就用来总结下我的感触
前端学习_web移动布局 _ flex布局
前端学习——web—flex布局flex布局原理flex是flexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。flex布局又叫伸缩布
flex布局练习
<!DOCTYPE html><html><head><meta charset="utf-8"><title>text<itle><style>    .father {        display: flex;    }    .kid1 {        width: 20%;        height: 620px;        background-color
弹性布局
flex布局原理1.flex是flexibleBox的缩写.意为弹性布局,用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局2.当我们为父盒子设为flex布局以后,子元素的float,clear和vertical-align属性将失效  因为flex布局可以让子元素一行内显示,不需要浮动,所以就不
elementUI中在Tabs标签页的标题文字后面添加elementUI自带图标和自定义图标
1.添加自带图标：下箭头  <el-tab-panename="first"><spanslot="label"><spanclass="span-box"><span>最新发布</span><spanclass="el-icon-arrow-down"
Chrome 90的flexbox调试工具
时间过得真快，Chrome的版本已经升级到90了。这次的开发者工具更新中增加了flexbox调试工具，试了一下，挺有意思的。首先在Elemets视图下，如果一个元素的display:flex的话，元素后面会显示一个“flex”的按钮，点一下网页上相应的位置就会出现一个虚线框表示出这个flexbox的位
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状：移动端常见浏览器：UC浏览器，QQ浏览器，Opera浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器及杂牌浏览器。移动端常见的浏览器都是基于webkit内核开发的，国内机操作系统也是基于Android开发的，因此在移动开发中只兼容主流浏览器，即处理webkit
flex布局
一、Flex布局是什么？Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。.box{display:inline-flex;}Webkit内核的浏览器，必须加上-webkit
面试题-CSS
文章目录1、说一下css盒模型2、画一条0.5px的线3、link标签和import标签的区别4、transition和animation的区别5、Flex布局6、BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）7、垂直居中的方法8、关于JS动画和css3动画的差异性9、说一下块元素和行元