Solid | 易学教程

input 和ul li 组成模糊匹配

阅读更多关于 input 和ul li 组成模糊匹配

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style> ul{ padding: 0; margin-top: 2px; } ul>li{ list-style: none; } .search-select{ width: 210px; text-align: center; } .search-select .search-select-list{ width: 200px; max-height: 200px; overflow-y: scroll; box-shadow: 0 3px 6px rgba(221,221,221,1.0); border-radius: 0.2rem; margin: 0 auto; display: none; padding-top: 0;

前端笔记（关于css盒模型知识整理）

阅读更多关于前端笔记（关于css盒模型知识整理）

我以前整理的文章可能也不是特别深入。所以现在开始尝试即使多花点时间收集整理，也不只发浅层知识，这样对技术的深入理解是很有帮助的。废话不多说，我们现在开始。说到css 盒模型，这是大多面试基础中会经常面到的。首先我们要知道，什么是盒模型？盒模型分为两种： w3c盒模型和 IE盒模型。现在大多数浏览器默认情况下的盒模型就是w3c盒模型，由margin、border、padding、content、元素的width==content的width。也就是说w3c盒模型一般情况下会比设置的宽度要大，而IE盒模型则更为标准，元素的width==margin+border+padding+content。因此在w3c盒模型中加入了一个新的样式 box-sizing 。这个样式可以切换w3c盒模型和IE盒模型。我们来做个例子：我们想设置一个如此的样式，一个div内有5个div，横向排列。div宽度可变，平分的。 < div class ="box" > < div > 1 </ div > < div > 2 </ div > < div > 3 </ div > < div > 4 </ div > < div > 5 </ div > </ div > 因此，大多数情况下，可以使用%。内部的div可以使用float:left实现横排。 .box { background

使用原生js实现选项卡功能实例教程

阅读更多关于使用原生js实现选项卡功能实例教程

选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，通过选择标签快速切换内容。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。先来完成html部分。首先，需要一个元素把整个选项卡包含在内。新建一个div元素，它的id命名为tabBox，如下所示： < div id ="tabBox" ></ div > 在tabBox元素里面，再把选项卡分为标签和内容两个部分，分别命名class为label_box和content_box，如下所示： < div id ="tabBox" class ="tab_box" > < ul class ="label_box" ></ ul >  < div class ="content_box" ></ div >  </ div > 一般情况下，标签元素和内容元素的数量要保持一致，在本实例中把标签和内容都设为三个。分别在label_box和content_box元素中添加标签和内容，如下所示： < div id ="tabBox" class ="tab_box" > < ul class ="label_box" >  < li > 选项一 </ li > < li > 选项二 </ li > < li >

vue引入echarts图表

阅读更多关于 vue引入echarts图表

一、安装echarts依赖。　　npm install echarts -s 二、在入口文件main.js文件里引入echarts。　　import echarts from "echarts" 　　vue.prototype.$echarts = echarts 三、在所需页面按需引入图标表　　<template> 　　　　<div id="mycharts" :style="{width:100%,height:100%}"></div> </template> 　　<script>　　　　　　　export default { 　　　　　　name: "hello", 　　　　　　data() { 　　　　　　　　return { 　　　　　　　　　　}; 　　　　　　　　}, 　　　　　　mounted() { 　　　　　　　　this.drawLine(); 　　　　　　　　　　}, 　　　　　　　　methods: { 　　　　　　　　drawLine() { 　　　　　　　　　　let myChart = this.$echarts.init(document.getElementById("myChart")); // 初始化echarts实例　　　　　　　　　　myChart.setOption({ // 绘制图表　　　　　　　　　　title: {

阅读更多关于博客园创建目录（多级目录）实现

最近看很多用MarkDown编写文章的小伙伴，都在侧边栏生成了一个目录，于是百度搜了搜，也打算加个目录。但是百度搜到的结果千篇一律，基本上都是"孤傲苍狼"这位大佬出品，然后就试着加在了自己博客上，然而效果并不是自己想要的，因为他只实现了两级目录，而我想实现多级。于是就开启了代码改造之旅，经过周折最终终于实现了多级目录（h1~h6标签都会显示）。客官：小儿，上代码~ 好嘞，来喽。 CSS部分（添加到"设置"下面的"页面定制 CSS 代码"下面） /* 生成博客目录的CSS */ #uprightsideBar { font-size : 12px ; font-family : Arial, Helvetica, sans-serif ; text-align : left ; position : fixed ; /* 将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px */ top : 50px ; right : 0px ; width : auto ; height : auto ; } #sideBarTab { float : left ; width : 30px ; border : 1px solid #e5e5e5 ; border-right : none ; text-align :

在Sass中，我们可以使用“@for”来实现循环操作

阅读更多关于在Sass中，我们可以使用“@for”来实现循环操作

CSS、Sass、Scss，以及sass和scss的区别 CSS 指层叠样式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，其后缀是.sass。 SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。 sass和scss的关系

与Bootstrap 3垂直对齐

阅读更多关于与Bootstrap 3垂直对齐

问题： I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div , for example — JSFiddle link : 我正在使用Twitter Bootstrap 3，并且在要垂直对齐两个 div 时遇到问题，例如 -JSFiddle链接：  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"><

前端笔记之Vue（二）组件&案例&props&计算属性

阅读更多关于前端笔记之Vue（二）组件&案例&props&计算属性

一、 Vue 组件（ .vue 文件）组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 ( 除了一些根级特有的选项 ) 并提供相同的生命周期钩子。说白了，就是 HTML 、 CSS 、 JS 行为的一个封装。 Vue 中组件的实例化是对程序员不透明的，组件必须在 components 中进行“注册”才能使用。 Vue 中用 K:V 对的形式定义类，让你自由的注册名字， Vue 官方推荐使用含有短横的名字来表示自定义组件。翻译 .vue 文件需要安装 vue-loader 依赖： https://vue-loader.vuejs.org/zh-cn/ https://vue-loader-v14.vuejs.org/zh-cn/configurations/pre-processors.html 安装其他 4 个开发依赖： npm install --save-dev css- loader npm install --save-dev vue- loader npm install -

小白学 Python 数据分析（18）：Matplotlib（三）常用图表（上）

阅读更多关于小白学 Python 数据分析（18）：Matplotlib（三）常用图表（上）

人生苦短，我用 Python 前文传送门：小白学 Python 数据分析（1）：数据分析基础小白学 Python 数据分析（2）：Pandas （一）概述小白学 Python 数据分析（3）：Pandas （二）数据结构 Series 小白学 Python 数据分析（4）：Pandas （三）数据结构 DataFrame 小白学 Python 数据分析（5）：Pandas （四）基础操作（1）查看数据小白学 Python 数据分析（6）：Pandas （五）基础操作（2）数据选择小白学 Python 数据分析（7）：Pandas （六）数据导入小白学 Python 数据分析（8）：Pandas （七）数据预处理小白学 Python 数据分析（9）：Pandas （八）数据预处理（2）小白学 Python 数据分析（10）：Pandas （九）数据运算小白学 Python 数据分析（11）：Pandas （十）数据分组小白学 Python 数据分析（12）：Pandas （十一）数据透视表（pivot_table）小白学 Python 数据分析（13）：Pandas （十二）数据表拼接小白学 Python 数据分析（14）：Pandas （十三）数据导出小白学 Python 数据分析（15）：数据可视化概述小白学 Python 数据分析（16）

使用element的upload组件实现一个完整的文件上传功能（上）

阅读更多关于使用element的upload组件实现一个完整的文件上传功能（上）

　　　　　　作者：小土豆biubiubiu 博客园： www.cnblogs.com/HouJiao/ 掘金： https://juejin.im/user/58c61b4361ff4b005d9e894d 简书： https://www.jianshu.com/u/cb1c3884e6d5 微信公众号：土豆妈的碎碎念（扫码关注，一起吸猫，一起听故事，一起学习前端技术）码字不易，点赞鼓励哟~ 　　　　说到标题就有点心塞了，前段时间项目上需要实现一个文件上传的功能，然后就咔咔的去用了element的upload组件，不用不知道一用吓一跳哇。在使用的过程中遇到了很多让意想不到的问题，后来也因为时间问题，没有去仔细研究问题出现的根本原因，只是想办法解决了问题。这些天有点空闲时间，脱离项目单独实现了一个完整的文件上传的功能（这个实践过程中遇到的问题也比较多，文末会总结）一.功能简介　　大致的功能描述：在一个表格中，有一列操作为附件管理功能。附件管理功能可以上传附件、删除附件。　　最终需要的效果如下：　　　　现在我们就开始完成这个功能吧二.开发环境说明　　项目开发环境是用vue-cli初始化的一个新项目（之前的文章《使用vue-cli搭建项目开发环境》有详细介绍搭建过程）　　项目根目录名称为：element-upload-demo 　　　

订阅 Solid