1. 安装：复制拷贝文件cnpm install postcss-loader autoprefixer --save-dev2. webpack.config.js中使用 rules: [//配置css加载器 {test: /\.css$/,use: cssExtract.extract({fallback: "style-loader",use: ["css-loader", "postcss-loader"]})},//配置sass加载器 {test: /\.scss$/,use: sassExtract.extract({fallback: ‘style-loader‘,use: [‘css-loader‘, "postcss-loader", ‘sass-loader‘...
一、关于SSRF1.1 简介：SSRF(Server-Side Request Forgery)服务端请求伪造，是一种由攻击者构造形成由服务器端发起请求的一个漏洞，一般情况下，SSRF 攻击的目标是从外网无法访问的内部系统。SSRF 形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能且没有对目标地址做过滤与限制。比如从指定URL地址获取网页文本内容，加载指定地址的图片，下载等等。1.2 利用SSRF能实现以下效果:1) 扫描内网（主机信息收集，...
在讲解提取css之前，我们先看下项目的架构如下结构：### 目录结构如下： demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---index | | | |-- views # 存放所有vue页面文件 | | | | |-- index.vue |...
上一篇简单的过了一遍HTML的常用标签，这一篇继续CSS。例1 CSS的标签选择器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="common.css" />--> <style> /*标签选择器，找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器，找到标签id等于i1的标签，应用以下样式*/ #i1{ ...
在做responsive或者手机版页面的时候，经常碰到<Table>在手机和平板中会因为长度问题把页面撑大。最近看到一个比较好，比较方便的方法，而且仅仅用CSS 2就可以实现！实例URL：http://dbushell.com/demos/tables/rt_05-01-12.html已经验证支持webkit引擎及firefox，很可惜IE这个混蛋不能改table标签的display属性。慢点看看有没有什么trick的方法可以做到兼容。主要用到的CSS如下：可以从CSS中看到，作者主要是运用了display: block...
webpack.conf.js 中 resolve.alias 配置resolve: {extensions: [‘.js‘, ‘.vue‘],alias: {‘@‘: path.resolve(__dirname, ‘src‘),‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),} }配置了resolve.alias 后，在js中我们可以这样用// 原本这样写 import hongAlert from ‘./../src/scss/icon.scss‘// 现在可以这样写 import hongAlert from ‘@scss/icon.scss‘在scss中需要这样写，注意是~@// 原本这样写 @import ...
前言动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading学习CSS3中Animation之前先来看一个动画特效（可以自己运行看下实际效果） 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style type="text/css"> 7 .spinner{ 8 width:60px; 9 height: 60px;10 background-color: #67CF22;11 margin: 100p...
webpack4 单独抽离打包 css 的新实现前言之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)实现【注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其妙的 bug】正是基于对以上两种方式缺点的思考，结合我的实际使用过程，我认为以后我们应该完全摒弃掉上述两种方式，这里推荐一种一种新的实现方式：file-loaderfile-loader我先给个 file-...
本文总结了用div css进行网页表单布局的五个小技巧可以帮助你更灵活的控制表单，使页面更加满意。 1、表单文本输入的移动选择： 在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中，一切就会变得简单多了，如：<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFo...
动画在webapp的现状 webapp模式的网站追求的就是一个体验，是HTML5&CSS3浪潮下的产物，抛开体验不说，webapp模式门槛比较高；而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点。但也是一个难点，一个痛点，主要原因是：移动端手机的碎片化严重。设备、型号、版本、分辨率等差异导致移动端需要考虑的主流情况达10多种，而Hybrid带来的webview可以让情况更加糟糕所以说，近两年想在移动端大范围的使用动画，或者使用weba...
2.1 常用的选择器1. 类型选择器 p { color: black; }2. 后代选择器 blockquote p { padding-left: 2em; }3. ID选择器 #intro { font-weight: bold; }4. 类选择器 .date-posted { color: #cccccc; }5. 伪类 a:link { color: blue; }6. 通用选择器 * { padding: 0; }7. 子选择器 #nav>li { padding-left: 20px; }8. 相邻同胞选择器 h1+p{ font-size: 1.4em; }相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素；9....
前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛，一直想学这个，想学那个折腾下来几乎没学到什么东西。工作经验告诉我，要掌握一门技术，就需要在项目中去磨练，所以我就准备开发一个手机端的BBS练练手，技术更新快，也要学的快，跟的上时代，才涨的了工资。 技术的选择jQuery Mobile Phone Gap 等都是比较成熟的框架为什么我不用这些框架呢？ 因为我考虑到底层的技术应用和练习 。我的选择是：Html5+css3+angularjs+j...
css推荐的样式编写顺序：Positioning：定位Box model：盒子模型、大小等Typographic：文字系列、排印等Visual：可视化、背景等Misc：其它混杂模式居中垂直居中，设置line-height 水平方向 text-alignflex 弹性盒子其实就是一个百分比布局，使用这个的时候，子元素的宽高会受限制于弹性盒子复制<!DOCTYPE html><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><style>.flex-container {display: -webkit-flex...
1<!DOCTYPE html> 2<html> 3<head> 4<title>css3盒子模型</title> 5<style> 6 .box3{ 7 width: 300px; 8 height: 100px; 9/*设置css3盒子模型的父类*/10 display: -webkit-box;11 display: -moz-box;12 display: box;1314 background-color: #1d89cf;15}16 .box3>section{17/*设置css3盒子模型的子类，将他们平分*/18 -webkit-box-flex: 1;19 -moz-box-flex: 1;20 box-flex: 1;2122 border: 1px s...
1<head> 2<meta charset="utf-8"> 3<title>css字体和文本</title> 4<style type="text/css"> 5 .one{font-size: 20px;font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";font-style: italic;text-align: center} 6 .two{font-size: 20px;line-height: 40px;color: aqua;letter-spacing: 5px;word-spacing: 20px;text-indent: 10px;text-decoration: line-through7} 8 ....