2019年09月_@红@旗下的小兵

原创 css父子级都设置定位如何撑开父级

最近做项目，遇到一个问题，父级设置的相对定位，子级设置绝对定位，如果不给父级设置高度，它的高度为0，如何撑开父级d的高度呢？？？目前我的解决办法是子级也换成绝对定位，完美解决：<style>.wra{ position: relative;}.box{ position: relative; width:100px; height:200...

2019-09-30 16:34:54 4063

原创生成二维数组的一个小应用

最近在写美团demo的时候，发现生成一个二维数组对实现某些需求十分便利！比如美团app首页的图标分类：上边这个分类可以左右滑动，像轮播图一样；一页只能展示8个图标，超出8个展示在下一页；如果让你做，你会怎么做呢？？？切入正题：其实，类似于上边这种需求使用二维数组非常好解决，我们可以把第一页看做是一个数组，数组里边有8个图标；如果图标数量超出8个，多余的放在第二个...

2019-09-28 11:22:01 197

原创 flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认方向是按照主轴排列的。容器的属性：*****************************...

2019-09-27 16:13:57 224

原创 css预处理框架stylus——@keyframes 帧动画和@font-face字体引入

@keyframes 帧动画与普通css一样.box width:100px height:100px background:#f40 animation:run 3s @keyframes run 0% width:100px 33% width:160px ...

2019-09-27 16:09:34 1325 2

原创 css预处理框架stylus——@import 动态导入样式和@media媒体查询

@import以在vue中使用stylus为例，创建一个以 .styl结尾的文件，当你需要用它的时候，要通过以下方式动态导入：<style lang="stylus" scoped>@import '相对路径/fileName.styl'··· ···</style>@import工作原理：遍历目录列队，并检查任意目录中是否有该文件。。。@...

2019-09-27 15:38:57 1315

原创 css预处理框架stylus——变量

在css中使用变量可以说极大提高了css代码的复用性、可维护性、灵活性！！1、变量：官方文档：我们可以把表达式指定为变量，然后在样式中使用（在实际开发中通常会把可复用的样式单独写在一个以点 . styl 的文件中，stylus变量通常前边加上$符，当然变量名是自定义的！）：//指定变量，stylus中注释与js一样使用//$color=blue$font-size=30px....

2019-09-27 14:33:11 1138

原创 css预处理框架stylus——选择器

选择器：与python一样，stylus选择器与元素样式以缩进进行分割 ( 开发中为了阅读方便，建议属性和属性值以冒号分割 ).box color red.box{ color:red;}规则：与css一样 , 定义多个选择器时可以使用逗号隔开,或者换行进行区分:.box,.box_1 color:red...

2019-09-27 12:17:08 425

原创 vue-axios

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中，vue官方文档也推荐使用axios，axios返回的是一个promise对象，所以处理返回结果非常的方便！！！axios的常用方法（以vue为例）：一、安装axiosnpm install axios二、在任意组件中引入axios（一般在主文件中引入axios）import axios fr...

2019-09-27 10:53:13 126

原创 flask—— flask-cors 解决跨域问题

CORS的全称是Cross-Origin Resource Sharing ，有w3c组织制定的，现在这个规范，已经被大多数浏览器支持，处理跨域的需求。CORS需要后端应用进行配置，因此，这是一种后端跨域的配置方式，这种方式很容易理解，一个陌生的请求来访问你的服务器，自然需要进行授权。。。（关于前端在vue中跨域的配置在下一篇文章介绍！）1、安装flask-cors 包pip ins...

2019-09-26 16:26:53 38745 2

原创 vue-状态管理vuex

当你读完这篇文章我想你也能看懂这张图了！这篇文章主要是结合官方文档解读下vuex几个常用的概念：一、安装及配置vuex二、state三、Getter四、Mutation五、Action一、安装及配置vuex首先来安装vuex：npm install vuex --save配置vuex//创建store.jsimport Vue from 'vue...

2019-09-25 12:53:25 442

原创 vue-router——重定向

vue-router的重定向是通过routes配置来完成的：const router = new VueRouter({ routes:[ //方法一 { path:'/', name:'first', redirect:'/news', component...

2019-09-23 11:19:14 4547

原创 vue-router——命名路由

我们可以通过一个名称来标识一个路由，当连接一个路由，或者执行跳转时，是非常方便的：const router = new VueRouter({ routes:[ { path:'/first/userid', name:'first', //定义路由名称 component:First ...

2019-09-23 08:24:07 903

原创 python-web框架Flask-（11）requests

requests模块是用来发送http请求的，返回响应结果，需要安装：创建虚拟环境我用的是pipenv，所以使用pipenv来安装：（1）进入虚拟环境：pipenv shell（2）安装requests：pipenv install requests（3）导入requests模块：import requestsRequests.get( ) 请求import re...

2019-09-22 15:54:56 3159 1

原创 css3—transform

tranform英文意思是：改变，使··· 变形；transform有四个属性分别来看下：1、旋转transform：rotate（xxxdeg）；使元素旋转多少度，正数为顺时针旋转多少度；负数为逆时针旋转多少度。实际案例：鼠标hover，小三角旋转360°<style>.box{ position: relative; width:1...

2019-09-15 19:43:19 625

原创 css3—animation动画和transition详解（最新）

animation和transition两个属性在网页制作时候用到频率非常之高！这篇文章来详细记录下两者的用法：一、animation动画（1）定义：帧动画，所谓的帧动画就是不仅有开始和结束状态，还可以用关键帧来定义中间的状态，能做出非常复杂的动画。。。用@keyframes 来创建animation的关键帧：@keyframes run { from{} 50%{} ...

2019-09-15 18:22:09 912

原创 python-web框架Flask-（十）项目的创建

在flask专题文章第一篇我们就已经详细讲过，关于虚拟环境的安装及安装flask。这边文章我们来重点讲下创建项目之后，前期应注意的地方：（1）进入项目目录，使用powershell运行命令：pipenv shell ，进入该项目的虚拟环境；（2）在项目文件夹中创建 xxx.py文件，从flask包中引入Flask类 from flask import Flask上边引...

2019-09-13 16:51:51 206

原创 python 中format方法详解

1、术语说明：· str.format( ) 方法通过字符串中的花括号 { } 来识别需要替换的字段，从而完成字符串的格式化。省略字段名：（1）注意：花括号的数量可以少于位置参数，反之则不行！！！print("大家好，我叫{}，来自{}".format('^&*%^&*','火星'))# 大家好，我叫^&*%^&*，来自火星2、使用变量...

2019-09-11 13:11:41 514

原创 python-web框架Flask-（九）蓝图

在使用flask进行项目开发时，会把各个功能给拆分，通常视图函数与配置文件是分开的，实例化flask时，会存在一个循环引入的问题（这块儿不多说了百度好多），蓝图就是解决循环引入的一种方案，它的作用：可以代替flask实例app,在视图函数中，就可以直接使用蓝图来注册路由：使用蓝图：（1）安装蓝图插件：pip install flask-blueprint( 在视图函数...

2019-09-10 12:21:24 312

原创 python-web框架Flask-（八）钩子函数

这篇文章我会不定时补充新的内容：flask中常用的钩子函数：（1）before_first_request :第一次请求服务器之前被调用，且只执行一次（2）before_request :请求已经到达flask，但是还没有进入具体的视图函数之前调用。一般在调用视图函数之前，我们可以把一些后边需要用到的数据先处理好，方便视图函数使用。（3）context_processor...

2019-09-09 13:12:23 275

原创 python-web框架Flask-（七）全局对象g

g英文：global专门用来保存用户数据，g对象在一次请求中，当前项目所有文件中都可以使用到；但是第二次请求时，g对象会被重新创建。。。使用g对象需要先引入该模块：from flask import Flask,g,render_template,request用法：g.xxx = xxx # 前边是为key 后边是值来个小demo：需求是，当用户登录时，打印用户账号、...

2019-09-09 12:07:41 1248

原创 python-web框架Flask-（五）jinjia2模板

渲染模板：在flask中渲染模板很简单！！！首先导入render_template模块，然后把html文件放入templates文件夹，在视图函数中，使用render_template( ) 函数来渲染模板即可：from flask import render_template@app.route('/')def fn(): return render_template...

2019-09-03 17:09:38 366

原创 python-web框架Flask-（六）cookie 、session

cookie在网站中，http请求是无状态的。也是就是说第一次和服务器连接后并且登录成功后，第二次请求服务器，服务器依然不能知道当前请求是哪一个用户。cookie的出现就是为了解决这个问题，第一次登录服务器返回一些数据（cookie）给浏览器，然后浏览器保存到本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动携带给服务器，服务器通过浏览器携带的数据就能判断当前用...

2019-09-03 11:58:55 542

原创 python-web框架Flask-（四）response模块

所有返回前台的内容其实都应该是Response的对象或者其子类，我们看到如果返回的是字符串直接可以写成return ‘字符串’的形式，但是其实这个字符串也是经过了Response包装的：return Response('字符串')返回字符串：# 返回一个字符串@app.route('/str')def fn1(): return '返回一个str字符串' #最后...

2019-09-01 08:57:22 2077

记录点滴