Web前端
关注
分享
扫一扫
7Maggie_C
这个作者很懒，什么都没留下…
展开
-
Web前端－HTML/CSS－响应式页面的设计
所谓响应式页面，即集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。只需在<head>标签下添加如下代码：<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0...原创 2018-03-16 22:41:50 · 1209 阅读 · 1 评论 -
webstorm使用stylus语法换行无法自动缩进的解决办法
如图所示，取消勾选即可换行自动缩进，不用再一个个打空格了！转载 2018-04-06 09:13:44 · 2081 阅读 · 2 评论 -
解决webpack本地开发环境无法用IP访问
问题描述:只能用http://localhost:8080/访问项目,不能用http://本机IP:8080访问解决方案:webpack dev配置文件中加上 host:’0.0.0.0’转载 2018-04-06 09:15:46 · 2711 阅读 · 0 评论 -
Mac 查看localhost 对应的ip
Mac 查看localhost 对应的ip使用命令：[plain] view plain copynslookup localhost 结果：[plain] view plain copynslookup localhost Server: 10.20.0.97 Address: 10.20.0.97#53 Non-authoritative answer: N...转载 2018-04-06 09:16:52 · 5154 阅读 · 1 评论 -
CSS模块化开发
CSS 模块化一、文件结构常见文件结构一个项目的CSS最基本结构通常是下面这样的：- base.css- common.css- pages.css复杂一点的项目可能是这样分：- base.css- header.css- footer.css- sidebar.css- forms.css- icons.css- buttons.css- dropd...转载 2018-09-27 19:20:52 · 350 阅读 · 0 评论 -
前端工程化
喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。你好，切图仔。不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下...转载 2018-09-27 19:43:24 · 209 阅读 · 0 评论 -
利用webpack实现js/css模块化开发
什么是模块化开发？对前端工程化的参考资料：https://github.com/fouber/blo...前端的工程化构建开发不仅仅停留在‘压缩’、‘校验’、‘合并’，模块化构建可以使项目的扩展性、代码的复用性和可维护性大大提高。在解决基本的开发效率和运行效率之后，前端团队要思考维护效率。模块化是当前前端最流行的开发手段。模块化是一种处理复杂系统分解为更好的管理模块的方式。它可以通过不同的...转载 2018-09-27 19:45:41 · 1140 阅读 · 0 评论 -
Webpack入门教程
https://www.runoob.com/w3cnote/webpack-tutorial.html转载 2018-09-27 20:23:24 · 383 阅读 · 0 评论 -
WebStorm无法显示文件夹目录
第一种：第二种：（配置文件：idea里的modules.xml损坏）1.删除webStorm的配置文件夹idea2.重新打开该项目转载 2018-04-04 21:09:42 · 3711 阅读 · 0 评论 -
vue-router 2.0 常用基础知识点之router-link
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。1，$route.params类型: Object一个 key/value 对象，包含了 动态片...转载 2018-04-04 21:08:10 · 451 阅读 · 0 评论 -
CSS｜backdrop-filter 和filter 写出高斯模糊效果 以及两者区别
backdrop-filter：blur(10px);只支持ios端；只作用于当前元素；适用场景：为背景添加模糊效果；如果目标元素内包裹着其他内容 则应用filter属性；（不支持安卓，效果不明显） filter：blur(10px); 兼容性比较好，不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素没有效果适用场景：（效果其实还是通过作用于具体的img...转载 2018-04-10 12:49:16 · 5250 阅读 · 0 评论 -
HTML／CSS 如何修改submit的宽与高
今天在做一个网站项目时需要修改<input type="submit" >的宽高，发现如果直接这样添加的话<input type="submit" style="height: 50px;width: 100px"> submit的宽高并不会发生变化。后查询得知，在Mac上面，准确来说在所有的苹果设备上面，如果直接设置height:35px;width:20px的话，sub...原创 2018-03-18 21:40:37 · 13930 阅读 · 1 评论 -
HTML/CSS/JavaScript fullPage.js的使用
关于fullPage.js：fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等兼容性jQuery 兼容兼容 jQuery 1.7+。浏览器兼容IE8+ ✔...转载 2018-03-19 08:01:41 · 471 阅读 · 0 评论 -
Vue.js事件修饰符解释
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。·.stop.prevent.capture.self<div id="app2"><!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><转载 2018-03-20 18:38:02 · 640 阅读 · 0 评论 -
Vue.js之v-text／v-html／v-bind
一 ： 指令的概念：指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能二 ： 指令的语法：v-指令名 = “表达式判断或者是业务模型中属性名或者事件名”三 ： 具体指令1. v-text作用 ： 操作元素中的纯文本快捷方式 ： {{}}栗子1简写形式：将v-text=""换成{{}}<div id="app"> {{ message }}</...转载 2018-03-20 18:53:31 · 1381 阅读 · 0 评论 -
CSS／Sticky footers
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书。问题在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。...转载 2018-04-07 15:27:18 · 178 阅读 · 0 评论 -
两种最常用的Sticky footer布局方式
Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。图示说明当内容较少时，正常的文档流效果如下图在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，...转载 2018-04-07 15:53:38 · 345 阅读 · 0 评论 -
vue 出现Elements in iteration expect to have 'v-bind:key' directives问题
解决方法有两种1. v-for 后添加 :key='item'<li v-for="i in list" :key="i">2. 在build处关闭eslint检测...(config.dev.useEslint ? [createLintingRule()] : []),原创 2018-04-07 16:57:51 · 4400 阅读 · 10 评论 -
vue2.0之transition
vue2.0的transition渐入渐出功能在1.0的基础上做了较大变动，功能也更强大。1.0的写法是&.fade-transition?12345678.detail transition all 0.5s &.fade-transition opacity 1 background rgba(7,17,27,0.8) &.fade-enter,&am...原创 2018-04-10 07:56:20 · 370 阅读 · 0 评论 -
CSS BFC（块格式化上下文）原理详解
三种定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML ...原创 2019-04-02 15:19:15 · 323 阅读 · 0 评论