代码缩进调整
This commit is contained in:
结发受长生
@@ -2,10 +2,10 @@
|
||||
title: CSS中的字体
|
||||
date: 2018-4-7 10:55:37
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
在CSS当中 , 我们通常使用`@font-face`来定义字体
|
||||
@@ -13,11 +13,11 @@ categories:
|
||||
比如
|
||||
```css
|
||||
@font-face {
|
||||
font-family : YH;
|
||||
src : local("microsoft yahei");
|
||||
font-family : YH;
|
||||
src : local("microsoft yahei");
|
||||
}
|
||||
.font {
|
||||
font-family:YH;
|
||||
font-family:YH;
|
||||
}
|
||||
```
|
||||
这样我们就可以在需要使用这个字体的地方直接使用这个别名
|
||||
@@ -28,9 +28,9 @@ categories:
|
||||
然而在Mac系统当中没有微软雅黑字体 , 我们希望在Mac系统上使用苹方字体 , windows系统上使用微软雅黑字体
|
||||
```css
|
||||
@font-face {
|
||||
font-family : BASE;
|
||||
src: local("PingFang SC"),
|
||||
local("Microsoft Yahei");
|
||||
font-family : BASE;
|
||||
src: local("PingFang SC"),
|
||||
local("Microsoft Yahei");
|
||||
}
|
||||
```
|
||||
这样字体的应用就更加简便了
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
title: CSS布局(1)
|
||||
date: 2018-5-14 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
#### 常用的居中方法
|
||||
1. **水平居中**
|
||||
```xml
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
```
|
||||
对于子元素的不同情况 , 需要进行不同的处理
|
||||
@@ -25,8 +25,8 @@ categories:
|
||||
> 使用flex布局 , 对父元素设置
|
||||
```css
|
||||
.parent {
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -38,16 +38,16 @@ categories:
|
||||
例如
|
||||
```html
|
||||
<div class="parent">
|
||||
<p>123456</p>
|
||||
<p>123456</p>
|
||||
<p>123456</p>
|
||||
<p>123456</p>
|
||||
<p>123456</p>
|
||||
<p>123456</p>
|
||||
</div>
|
||||
<style>
|
||||
.parent {
|
||||
height:200px;
|
||||
width:300px;
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
height:200px;
|
||||
width:300px;
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -56,8 +56,8 @@ categories:
|
||||
> 使用flex布局 , 父元素
|
||||
```css
|
||||
.parent {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
```
|
||||
---
|
||||
@@ -66,27 +66,27 @@ categories:
|
||||
第一种布局方式DOM结构
|
||||
```html
|
||||
<div class="layout">
|
||||
<div class="header">头部</div>
|
||||
<div class="content">内容</div>
|
||||
<div class="footer">尾部</div>
|
||||
<div class="header">头部</div>
|
||||
<div class="content">内容</div>
|
||||
<div class="footer">尾部</div>
|
||||
</div>
|
||||
```
|
||||
第二种布局方式DOM结构
|
||||
```html
|
||||
<div class="header">
|
||||
<div class="layout">头部</div>
|
||||
<div class="layout">头部</div>
|
||||
</div>
|
||||
<div class="layout content">内容</div>
|
||||
<div class="footer">
|
||||
<div class="layout">尾部</div>
|
||||
<div class="layout">尾部</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
样式
|
||||
```css
|
||||
.layout {
|
||||
max-width:960px;
|
||||
margin:0 auto;
|
||||
max-width:960px;
|
||||
margin:0 auto;
|
||||
}
|
||||
```
|
||||
---
|
||||
@@ -98,29 +98,29 @@ categories:
|
||||
DOM结构
|
||||
```xml
|
||||
<div class="content">
|
||||
<div class="sub">侧边栏1</div>
|
||||
<div class="extra">侧边栏2</div>
|
||||
<div class="main">内容区域</div>
|
||||
<div class="sub">侧边栏1</div>
|
||||
<div class="extra">侧边栏2</div>
|
||||
<div class="main">内容区域</div>
|
||||
</div>
|
||||
```
|
||||
CSS样式
|
||||
```css
|
||||
.sub,.extra,.main {
|
||||
height : 300px;
|
||||
height : 300px;
|
||||
}
|
||||
.sub {
|
||||
width : 100px;
|
||||
float : left;
|
||||
background-color: pink;
|
||||
width : 100px;
|
||||
float : left;
|
||||
background-color: pink;
|
||||
}
|
||||
.extra {
|
||||
width : 200px;
|
||||
float : right;
|
||||
background-color: green;
|
||||
width : 200px;
|
||||
float : right;
|
||||
background-color: green;
|
||||
}
|
||||
.main {
|
||||
margin:0 200px 0 100px;
|
||||
background-color: blue;
|
||||
margin:0 200px 0 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
```
|
||||
实际效果如下
|
||||
@@ -134,25 +134,25 @@ CSS样式
|
||||
3. 内容区域设置左外边距和右外边距
|
||||
```css
|
||||
.sub,.extra,.main {
|
||||
height : 300px;
|
||||
height : 300px;
|
||||
}
|
||||
.sub,.extra {
|
||||
position: absolute;
|
||||
top : 0;
|
||||
width : 200px;
|
||||
position: absolute;
|
||||
top : 0;
|
||||
width : 200px;
|
||||
}
|
||||
.sub {
|
||||
left : 0;
|
||||
background-color: pink;
|
||||
left : 0;
|
||||
background-color: pink;
|
||||
}
|
||||
.extra {
|
||||
right : 0;
|
||||
background-color: green;
|
||||
right : 0;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin:0 200px;
|
||||
backgroun-color: blue;
|
||||
margin:0 200px;
|
||||
backgroun-color: blue;
|
||||
}
|
||||
```
|
||||
> 如果中间栏有最小宽度限制 , 或者其中包含有宽度的元素 , 那么当窗口宽度压缩到一定程度 , 中间栏与侧栏将会发生重叠
|
||||
@@ -162,9 +162,9 @@ CSS样式
|
||||
DOM结构
|
||||
```xml
|
||||
<div id="content">
|
||||
<div class="main">内容区域</div>
|
||||
<div class="sub">侧边栏1</div>
|
||||
<div class="extra">侧边栏2</div>
|
||||
<div class="main">内容区域</div>
|
||||
<div class="sub">侧边栏1</div>
|
||||
<div class="extra">侧边栏2</div>
|
||||
</div>
|
||||
```
|
||||
布局步骤:
|
||||
@@ -178,29 +178,29 @@ DOM结构
|
||||
CSS样式
|
||||
```css
|
||||
.sub , .extra, .main {
|
||||
float :left;
|
||||
height : 300px;
|
||||
float :left;
|
||||
height : 300px;
|
||||
}
|
||||
.main {
|
||||
width : 100%;
|
||||
background-color: red;
|
||||
width : 100%;
|
||||
background-color: red;
|
||||
}
|
||||
.sub {
|
||||
width : 100px;
|
||||
margin-left: -100%;
|
||||
position: relative;
|
||||
left : -100px;
|
||||
background-color: pink;
|
||||
width : 100px;
|
||||
margin-left: -100%;
|
||||
position: relative;
|
||||
left : -100px;
|
||||
background-color: pink;
|
||||
}
|
||||
.extra {
|
||||
width : 200px;
|
||||
margin-left: -200px;
|
||||
position: relative;
|
||||
right: -200px;
|
||||
background-color: blue;
|
||||
width : 200px;
|
||||
margin-left: -200px;
|
||||
position: relative;
|
||||
right: -200px;
|
||||
background-color: blue;
|
||||
}
|
||||
#content {
|
||||
padding : 0 200px 0 100px;
|
||||
padding : 0 200px 0 100px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -212,7 +212,7 @@ CSS样式
|
||||
DOM结构
|
||||
```xml
|
||||
<div class="main-wrap" >
|
||||
<div class="main">内容区域</div>
|
||||
<div class="main">内容区域</div>
|
||||
</div>
|
||||
<div class="sub">侧边栏1</div>
|
||||
<div class="extra">侧边栏2</div>
|
||||
@@ -226,25 +226,25 @@ DOM结构
|
||||
CSS样式
|
||||
```css
|
||||
.main-wrap, .sub, .extra {
|
||||
float : left;
|
||||
height:300px;
|
||||
float : left;
|
||||
height:300px;
|
||||
}
|
||||
.main-wrap {
|
||||
width : 100%;
|
||||
width : 100%;
|
||||
}
|
||||
.sub {
|
||||
width : 100px;
|
||||
margin-left: -100%;
|
||||
background-color: red;
|
||||
width : 100px;
|
||||
margin-left: -100%;
|
||||
background-color: red;
|
||||
}
|
||||
.extra {
|
||||
width : 200px;
|
||||
margin-left: -200px;
|
||||
background-color: green;
|
||||
width : 200px;
|
||||
margin-left: -200px;
|
||||
background-color: green;
|
||||
}
|
||||
.main {
|
||||
margin:0 200px 0 100px;
|
||||
background-color: pink;
|
||||
height:300px;
|
||||
margin:0 200px 0 100px;
|
||||
background-color: pink;
|
||||
height:300px;
|
||||
}
|
||||
```
|
||||
@@ -2,10 +2,10 @@
|
||||
title: CSS布局(2)-Flex
|
||||
date: 2018-5-15 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
Flex是`Flexible Box`的缩写，意为`弹性布局`，用来为盒状模型提供最大的灵活性。
|
||||
@@ -16,11 +16,11 @@ Flex布局将成为未来布局的首选方案
|
||||
```css
|
||||
/*对于块元素*/
|
||||
.box {
|
||||
display : flex;
|
||||
display : flex;
|
||||
}
|
||||
/*对于行内元素*/
|
||||
.inline-box {
|
||||
display : inline-flex;
|
||||
display : inline-flex;
|
||||
}
|
||||
```
|
||||
为了兼容性的需要 , 通常可以加上`display:-webkit-flex;`
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
title: CSS布局(3)-Flex实践
|
||||
date: 2018-5-16 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
|
||||
@@ -43,16 +43,16 @@ DOM结构
|
||||
css样式
|
||||
```css
|
||||
.layout {
|
||||
height : 200px;
|
||||
display: flex;
|
||||
height : 200px;
|
||||
display: flex;
|
||||
}
|
||||
.layout > .layout_aside {
|
||||
background-color: pink;
|
||||
width : 100px;
|
||||
background-color: pink;
|
||||
width : 100px;
|
||||
}
|
||||
.layout > .layout_main {
|
||||
background-color: #ccc;
|
||||
flex-grow: 1;
|
||||
background-color: #ccc;
|
||||
flex-grow: 1;
|
||||
}
|
||||
```
|
||||
无论结构是什么样子 , 只要让main区域自动放大 , 侧边栏的宽度固定即可
|
||||
@@ -64,11 +64,11 @@ css样式
|
||||
DOM结构
|
||||
```xml
|
||||
<div id="main">
|
||||
<div class="top">我是顶部条</div>
|
||||
<div class="down">
|
||||
<div class="left">我是侧边栏</div>
|
||||
<div class="content">我是主面板</div>
|
||||
</div>
|
||||
<div class="top">我是顶部条</div>
|
||||
<div class="down">
|
||||
<div class="left">我是侧边栏</div>
|
||||
<div class="content">我是主面板</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
main是最外层的flex容器 , 其中包含top和down两个项目
|
||||
@@ -77,28 +77,28 @@ down本身也是一个flex容器 , 其中包含left和content两个项目
|
||||
CSS样式
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding : 0;
|
||||
margin: 0;
|
||||
padding : 0;
|
||||
}
|
||||
#main {
|
||||
height : 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height : 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#main > .top{
|
||||
height : 50px;
|
||||
background-color: blue;
|
||||
height : 50px;
|
||||
background-color: blue;
|
||||
}
|
||||
#main > .down {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#main > .down > .left{
|
||||
width : 200px;
|
||||
background-color: yellow;
|
||||
width : 200px;
|
||||
background-color: yellow;
|
||||
}
|
||||
#main > .down > .content {
|
||||
flex-grow: 1;
|
||||
background-color: pink;
|
||||
flex-grow: 1;
|
||||
background-color: pink;
|
||||
}
|
||||
```
|
||||
@@ -2,10 +2,10 @@
|
||||
title: CSS布局(4)-grid
|
||||
date: 2018-5-17 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
Grid布局是网站设计的基础
|
||||
@@ -25,25 +25,25 @@ Grid是二维布局系统 , 通常用于整个页面的规划
|
||||
DOM结构
|
||||
```xml
|
||||
<div class="wrapper">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
</div>
|
||||
```
|
||||
CSS
|
||||
```css
|
||||
.wrapper {
|
||||
display : grid;
|
||||
display : grid;
|
||||
}
|
||||
/* 这里为了清晰看到效果,给子元素添加了一些样式,不过与grid无关 */
|
||||
.wrapper div {
|
||||
background: pink;
|
||||
margin:2px;
|
||||
text-align:center;
|
||||
padding:3px 0;
|
||||
background: pink;
|
||||
margin:2px;
|
||||
text-align:center;
|
||||
padding:3px 0;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -54,9 +54,9 @@ CSS
|
||||
分别对应`grid-template-columns`和`grid-template-rows`属性
|
||||
```css
|
||||
.wrapper {
|
||||
display : grid;
|
||||
grid-template-rows: 60px 40px;
|
||||
grid-template-columns: 120px 60px 80px;
|
||||
display : grid;
|
||||
grid-template-rows: 60px 40px;
|
||||
grid-template-columns: 120px 60px 80px;
|
||||
}
|
||||
```
|
||||
**grid-template-columns** 属性的值当中有几个数值 , 就代表有几列 , 每个数值对应每一列的宽度
|
||||
@@ -83,18 +83,18 @@ CSS
|
||||
|
||||
```xml
|
||||
<div class="wrapper">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
</div>
|
||||
```
|
||||
现在我们要让item1横跨3列 , 也就是从第一条纵向网格线 , 到第四条纵向网格线
|
||||
那么需要对其定义css属性如下
|
||||
```css
|
||||
.wrapper > .item1 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -108,7 +108,7 @@ grid本身虽是二维布局 , 但是内部的元素却是以一维方式去定
|
||||
我们还可以用更简洁的写法
|
||||
```css
|
||||
.wrapper > .item1 {
|
||||
grid-column: 1 / 4;
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -117,21 +117,21 @@ grid本身虽是二维布局 , 但是内部的元素却是以一维方式去定
|
||||
我们就可以实现出更加复杂的布局了
|
||||
```css
|
||||
.wrapper {
|
||||
display : grid;
|
||||
grid-template-rows: 60px 40px 60px;
|
||||
grid-template-columns: 120px 60px 80px;
|
||||
display : grid;
|
||||
grid-template-rows: 60px 40px 60px;
|
||||
grid-template-columns: 120px 60px 80px;
|
||||
}
|
||||
.wrapper > .item1 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.wrapper > .item3 {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 4;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 4;
|
||||
}
|
||||
.wrapper > .item4 {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
```
|
||||
实际效果如下
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
title: HTML5的缓存策略
|
||||
date: 2018-4-10 13:01:24
|
||||
tags:
|
||||
- HTML5
|
||||
- HTML5
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
HTML5当中新增了两种浏览器端的缓存方式
|
||||
@@ -40,9 +40,9 @@ localStorage.removeItem("name");
|
||||
|
||||
```javascript
|
||||
for(let index=0 ; index<localStorage.length ; index++) {
|
||||
let key = localStorage.key(index);
|
||||
let value = localStorage.getItem(key);
|
||||
console.log(key + " = " + value);
|
||||
let key = localStorage.key(index);
|
||||
let value = localStorage.getItem(key);
|
||||
console.log(key + " = " + value);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -53,7 +53,7 @@ for(let index=0 ; index<localStorage.length ; index++) {
|
||||
|
||||
```javascript
|
||||
window.addEventListener("storage",function(e){
|
||||
console.log(e);
|
||||
console.log(e);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
title: Hexo搭建个人博客
|
||||
date: 2018-5-9 09:43:01
|
||||
tags:
|
||||
- Hexo
|
||||
- Hexo
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
> Hexo 是一个快速、简洁且高效的博客框架，需要nodejs环境运行
|
||||
@@ -95,11 +95,11 @@ hexo new post 测试文章
|
||||
title: 测试文章
|
||||
date: 2018-5-9 09:43:01
|
||||
tags:
|
||||
- 标签1
|
||||
- 标签2
|
||||
- 标签1
|
||||
- 标签2
|
||||
categories:
|
||||
- 分类1
|
||||
- 子分类
|
||||
- 分类1
|
||||
- 子分类
|
||||
---
|
||||
```
|
||||
hexo不支持多个同级分类 , 分类当中若有多项会被处理成子分类
|
||||
|
||||
+128
-128
@@ -2,9 +2,9 @@
|
||||
title: Hexo站点实现站内搜索
|
||||
date: 2018-5-9 14:44:53
|
||||
tags:
|
||||
- Hexo
|
||||
- Hexo
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
在hexo博客中 , 可以添加站内文章搜索的支持
|
||||
@@ -25,24 +25,24 @@ search:
|
||||
大致是如下结构
|
||||
```xml
|
||||
<search>
|
||||
<entry>
|
||||
<title>CSS布局(4)-grid</title>
|
||||
<link href="/文章URL地址/"/>
|
||||
<url>/文章URL地址/</url>
|
||||
<content type="html">
|
||||
<![CDATA[
|
||||
<p>这里是文章内容</p>
|
||||
]]>
|
||||
</content>
|
||||
<categories>
|
||||
<category>分类1</category>
|
||||
</categories>
|
||||
<tags>
|
||||
<tag>标签1</tag>
|
||||
<tag>标签2</tag>
|
||||
</tags>
|
||||
</entry>
|
||||
...
|
||||
<entry>
|
||||
<title>CSS布局(4)-grid</title>
|
||||
<link href="/文章URL地址/"/>
|
||||
<url>/文章URL地址/</url>
|
||||
<content type="html">
|
||||
<![CDATA[
|
||||
<p>这里是文章内容</p>
|
||||
]]>
|
||||
</content>
|
||||
<categories>
|
||||
<category>分类1</category>
|
||||
</categories>
|
||||
<tags>
|
||||
<tag>标签1</tag>
|
||||
<tag>标签2</tag>
|
||||
</tags>
|
||||
</entry>
|
||||
...
|
||||
</search>
|
||||
```
|
||||
其中的一个entry是一篇文章的信息
|
||||
@@ -55,101 +55,101 @@ search:
|
||||
var articleDatas = null;
|
||||
var resultDiv = null;
|
||||
new Vue({
|
||||
el: "#search-box",
|
||||
data: {
|
||||
queryText: null, //搜索的关键字文本
|
||||
searchResult: [] //搜索结果
|
||||
},
|
||||
mounted: function() {
|
||||
axios({ //调用ajax获取文章索引信息
|
||||
url: "/search.xml"
|
||||
}).then(function(response){
|
||||
var xmlDoms = null
|
||||
if(window.DOMParser) {
|
||||
var parser = new DOMParser()
|
||||
xmlDoms = parser.parseFromString(response.data, "application/xml")
|
||||
} else { // IE浏览器
|
||||
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDoc.async = false;
|
||||
xmlDoms = xmlDoc.loadXML(response.data);
|
||||
}
|
||||
//找出所有文章的标题 正文 URL
|
||||
articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
|
||||
return {
|
||||
title: item.getElementsByTagName("title")[0].innerHTML,
|
||||
content: item.getElementsByTagName("content")[0].innerHTML,
|
||||
url: item.getElementsByTagName("url")[0].innerHTML,
|
||||
}
|
||||
})
|
||||
resultDiv = document.getElementById("search-result-box")
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
queryText: function(newVal, oldVal) {
|
||||
this.searchResult.length = 0;
|
||||
// 控制搜索结果框的显示与隐藏
|
||||
if(newVal && newVal.trim() && articleDatas) {
|
||||
resultDiv.style.display = "block"
|
||||
} else {
|
||||
resultDiv.style.display = "none"
|
||||
return
|
||||
}
|
||||
//多关键字分别匹配
|
||||
var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
|
||||
var _this = this;
|
||||
articleDatas.forEach(function(article){
|
||||
var isMatch = true;
|
||||
var title = article.title.trim().toLowerCase();
|
||||
var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
|
||||
var index_title = -1;
|
||||
var index_content = -1;
|
||||
var first_occur = -1; //关键字在正文当中第一次出现的位置
|
||||
if(title && content) {
|
||||
keywords.forEach(function(keyword, i) {
|
||||
index_title = title.indexOf(keyword);
|
||||
index_content = content.indexOf(keyword);
|
||||
if( index_title < 0 && index_content < 0 ){
|
||||
isMatch = false;
|
||||
} else {
|
||||
if (index_content < 0) {
|
||||
index_content = 0;
|
||||
}
|
||||
if (i == 0) {
|
||||
first_occur = index_content;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isMatch) {
|
||||
var resultItem = {};
|
||||
resultItem.url = article.url;
|
||||
resultItem.title = article.title;
|
||||
if (first_occur >= 0) {
|
||||
// 截取关键字前后的一段文字
|
||||
var start = first_occur - 6;
|
||||
var end = first_occur + 15;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if(start == 0){
|
||||
end = 10;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
var matchContent = content.substring(start, end);
|
||||
// 高亮关键字
|
||||
keywords.forEach(function(keyword){
|
||||
var keywordReg = new RegExp(keyword, "gi");
|
||||
matchContent = matchContent.replace(keywordReg, "<strong class=\"search-keyword\">"+keyword+"</strong>");
|
||||
})
|
||||
resultItem.matchContent = matchContent
|
||||
}
|
||||
_this.searchResult.push(resultItem)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
el: "#search-box",
|
||||
data: {
|
||||
queryText: null, //搜索的关键字文本
|
||||
searchResult: [] //搜索结果
|
||||
},
|
||||
mounted: function() {
|
||||
axios({ //调用ajax获取文章索引信息
|
||||
url: "/search.xml"
|
||||
}).then(function(response){
|
||||
var xmlDoms = null
|
||||
if(window.DOMParser) {
|
||||
var parser = new DOMParser()
|
||||
xmlDoms = parser.parseFromString(response.data, "application/xml")
|
||||
} else { // IE浏览器
|
||||
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDoc.async = false;
|
||||
xmlDoms = xmlDoc.loadXML(response.data);
|
||||
}
|
||||
//找出所有文章的标题 正文 URL
|
||||
articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
|
||||
return {
|
||||
title: item.getElementsByTagName("title")[0].innerHTML,
|
||||
content: item.getElementsByTagName("content")[0].innerHTML,
|
||||
url: item.getElementsByTagName("url")[0].innerHTML,
|
||||
}
|
||||
})
|
||||
resultDiv = document.getElementById("search-result-box")
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
queryText: function(newVal, oldVal) {
|
||||
this.searchResult.length = 0;
|
||||
// 控制搜索结果框的显示与隐藏
|
||||
if(newVal && newVal.trim() && articleDatas) {
|
||||
resultDiv.style.display = "block"
|
||||
} else {
|
||||
resultDiv.style.display = "none"
|
||||
return
|
||||
}
|
||||
//多关键字分别匹配
|
||||
var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
|
||||
var _this = this;
|
||||
articleDatas.forEach(function(article){
|
||||
var isMatch = true;
|
||||
var title = article.title.trim().toLowerCase();
|
||||
var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
|
||||
var index_title = -1;
|
||||
var index_content = -1;
|
||||
var first_occur = -1; //关键字在正文当中第一次出现的位置
|
||||
if(title && content) {
|
||||
keywords.forEach(function(keyword, i) {
|
||||
index_title = title.indexOf(keyword);
|
||||
index_content = content.indexOf(keyword);
|
||||
if( index_title < 0 && index_content < 0 ){
|
||||
isMatch = false;
|
||||
} else {
|
||||
if (index_content < 0) {
|
||||
index_content = 0;
|
||||
}
|
||||
if (i == 0) {
|
||||
first_occur = index_content;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isMatch) {
|
||||
var resultItem = {};
|
||||
resultItem.url = article.url;
|
||||
resultItem.title = article.title;
|
||||
if (first_occur >= 0) {
|
||||
// 截取关键字前后的一段文字
|
||||
var start = first_occur - 6;
|
||||
var end = first_occur + 15;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if(start == 0){
|
||||
end = 10;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
var matchContent = content.substring(start, end);
|
||||
// 高亮关键字
|
||||
keywords.forEach(function(keyword){
|
||||
var keywordReg = new RegExp(keyword, "gi");
|
||||
matchContent = matchContent.replace(keywordReg, "<strong class=\"search-keyword\">"+keyword+"</strong>");
|
||||
})
|
||||
resultItem.matchContent = matchContent
|
||||
}
|
||||
_this.searchResult.push(resultItem)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
```
|
||||
@@ -157,19 +157,19 @@ new Vue({
|
||||
然后在页面的适当位置中编写搜索input与搜索结果框的html
|
||||
```html
|
||||
<div id="search-box">
|
||||
<div class="icon"><span class="icon-search"></span></div>
|
||||
<div class="input-box"><input type="text" id="search-input" v-model="queryText" placeholder="站内搜索"/></div>
|
||||
<!-- 搜索结果区 -->
|
||||
<div id="search-result-box" >
|
||||
<ul class="search-result-list" v-if="searchResult.length">
|
||||
<li v-for="(article,index) in searchResult" :key="index">
|
||||
<a :href='article.url' class='search-result-title' target='_blank'>{{article.title}}</a>
|
||||
<p class="search-result" v-html="article.matchContent"></p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 无匹配时显示 -->
|
||||
<p class="search-result" v-else>没有搜索到任何结果</p>
|
||||
</div>
|
||||
<div class="icon"><span class="icon-search"></span></div>
|
||||
<div class="input-box"><input type="text" id="search-input" v-model="queryText" placeholder="站内搜索"/></div>
|
||||
<!-- 搜索结果区 -->
|
||||
<div id="search-result-box" >
|
||||
<ul class="search-result-list" v-if="searchResult.length">
|
||||
<li v-for="(article,index) in searchResult" :key="index">
|
||||
<a :href='article.url' class='search-result-title' target='_blank'>{{article.title}}</a>
|
||||
<p class="search-result" v-html="article.matchContent"></p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 无匹配时显示 -->
|
||||
<p class="search-result" v-else>没有搜索到任何结果</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
之后编写相应的样式就可以了
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
title: SASS-初见
|
||||
date: 2018-5-11 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- sass
|
||||
- 前端
|
||||
- sass
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@ body {
|
||||
}
|
||||
```
|
||||
最终编译出来的css都是
|
||||
```
|
||||
```css
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
color: #333;
|
||||
@@ -88,29 +88,29 @@ $ npm install node-sass sass-loader --save-dev
|
||||
var webpack = require("webpack");
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
module.exports = {
|
||||
entry: {
|
||||
entry : './src/entry.js'
|
||||
},
|
||||
output: {
|
||||
path: __dirname+"/dist",
|
||||
filename: 'js/[name].bundle.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loaders: ["style-loader","css-loader"]},
|
||||
{ test: /\.scss$/, loaders : ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})}
|
||||
]
|
||||
},
|
||||
plugins : [
|
||||
//压缩打包之后的js
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
//写入的文件
|
||||
new ExtractTextPlugin("css/[name][contenthash].css")
|
||||
]
|
||||
entry: {
|
||||
entry : './src/entry.js'
|
||||
},
|
||||
output: {
|
||||
path: __dirname+"/dist",
|
||||
filename: 'js/[name].bundle.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loaders: ["style-loader","css-loader"]},
|
||||
{ test: /\.scss$/, loaders : ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})}
|
||||
]
|
||||
},
|
||||
plugins : [
|
||||
//压缩打包之后的js
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
//写入的文件
|
||||
new ExtractTextPlugin("css/[name][contenthash].css")
|
||||
]
|
||||
};
|
||||
```
|
||||
> 上面为sass-loader加的参数`outputStyle`作用与ruby当中的--style相同
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
title: SASS-语法(1)
|
||||
date: 2018-5-12 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- sass
|
||||
- 前端
|
||||
- sass
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
### 变量
|
||||
@@ -19,17 +19,17 @@ $变量名 : 变量值;
|
||||
例如
|
||||
```scss
|
||||
.box {
|
||||
$color:red;
|
||||
a{
|
||||
color:$color;
|
||||
}
|
||||
$color:red;
|
||||
a{
|
||||
color:$color;
|
||||
}
|
||||
}
|
||||
```
|
||||
如果该变量的值需要嵌入到字符串当中 , 需要加`#{ }`
|
||||
```scss
|
||||
$side : left;
|
||||
.box {
|
||||
border-#{$side}-radius:5px;
|
||||
border-#{$side}-radius:5px;
|
||||
}
|
||||
```
|
||||
#### 默认变量
|
||||
@@ -56,15 +56,15 @@ $a_padding : 6px;
|
||||
#### 选择器嵌套
|
||||
```scss
|
||||
div {
|
||||
h1 {
|
||||
color :red;
|
||||
}
|
||||
h1 {
|
||||
color :red;
|
||||
}
|
||||
}
|
||||
```
|
||||
编译后的结果为
|
||||
```
|
||||
div h1 {
|
||||
color : red;
|
||||
color : red;
|
||||
}
|
||||
```
|
||||
前面如果加上 `>`可以作为父子选择器
|
||||
@@ -73,8 +73,8 @@ div h1 {
|
||||
比如
|
||||
```scss
|
||||
a {
|
||||
&:hover{color:red;}
|
||||
&:visited{color:gray;}
|
||||
&:hover{color:red;}
|
||||
&:visited{color:gray;}
|
||||
}
|
||||
```
|
||||
#### 属性嵌套
|
||||
@@ -82,10 +82,10 @@ a {
|
||||
比如border
|
||||
```scss
|
||||
p {
|
||||
border : {
|
||||
color:red;
|
||||
width:2px;
|
||||
}
|
||||
border : {
|
||||
color:red;
|
||||
width:2px;
|
||||
}
|
||||
}
|
||||
```
|
||||
**注意** : border的后面必须要加上冒号
|
||||
@@ -102,22 +102,22 @@ Mixin有点像C语言的宏定义 , 是可以重用的代码块
|
||||
```scss
|
||||
//使用@mixin命令,定义一个代码块
|
||||
@mixin left {
|
||||
float : left;
|
||||
margin-left : 10px;
|
||||
float : left;
|
||||
margin-left : 10px;
|
||||
}
|
||||
//使用@include调用这个mixin
|
||||
.box {
|
||||
@include left;
|
||||
@include left;
|
||||
}
|
||||
```
|
||||
mixin的强大之处 , 在于可以去指定参数和缺省值
|
||||
```scss
|
||||
@mixin left($value:10px) {
|
||||
float : left;
|
||||
margin-left : $value;
|
||||
float : left;
|
||||
margin-left : $value;
|
||||
}
|
||||
.box {
|
||||
@include left(20px);
|
||||
@include left(20px);
|
||||
}
|
||||
```
|
||||
如果引入的时候不传参数 , 则使用缺省值
|
||||
@@ -130,10 +130,10 @@ mixin的强大之处 , 在于可以去指定参数和缺省值
|
||||
}
|
||||
|
||||
#navbar li {
|
||||
@include rounded(top,left);
|
||||
@include rounded(top,left);
|
||||
}
|
||||
#footer {
|
||||
@include rounded(top,left,5px);
|
||||
@include rounded(top,left,5px);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -189,20 +189,20 @@ $base_color : chocolate;
|
||||
SASS允许一个选择器 , 继承另一个选择器
|
||||
```scss
|
||||
.class1 {
|
||||
border : 1px solid #ddd;
|
||||
border : 1px solid #ddd;
|
||||
}
|
||||
.class2 {
|
||||
@extend .class1;
|
||||
font-size : 120%;
|
||||
@extend .class1;
|
||||
font-size : 120%;
|
||||
}
|
||||
```
|
||||
在编译过后 , 会生成
|
||||
```css
|
||||
.class1, .class2 {
|
||||
border : 1px solid #ddd;
|
||||
border : 1px solid #ddd;
|
||||
}
|
||||
.class2 {
|
||||
font-size:120%;
|
||||
font-size:120%;
|
||||
}
|
||||
```
|
||||
相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率
|
||||
@@ -249,10 +249,10 @@ each循环 , 类似于迭代器
|
||||
使用`@function`可以自定义一个函数
|
||||
```scss
|
||||
@function double($n) {
|
||||
@return $n * 2;
|
||||
@return $n * 2;
|
||||
}
|
||||
#sidebar {
|
||||
width : double(5px);
|
||||
width : double(5px);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
title: SASS-语法(2)
|
||||
date: 2018-5-13 22:38:32
|
||||
tags:
|
||||
- 前端
|
||||
- sass
|
||||
- 前端
|
||||
- sass
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
### 占位符 %
|
||||
@@ -13,17 +13,17 @@ categories:
|
||||
|
||||
```scss
|
||||
%base {
|
||||
margin : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
.btn {
|
||||
@extend %base;
|
||||
@extend %base;
|
||||
}
|
||||
```
|
||||
<!-- more -->
|
||||
编译后会得到
|
||||
```css
|
||||
.btn {
|
||||
margin : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -65,8 +65,8 @@ $direction : (left, right);
|
||||
编译后的结果为
|
||||
```css
|
||||
.panel {
|
||||
margin-right: 10px;
|
||||
padding-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
```
|
||||
#### `join(值列表1, 值列表2)`
|
||||
@@ -92,8 +92,8 @@ $num1 : (10px, 30px);
|
||||
```
|
||||
```css
|
||||
.box {
|
||||
margin : 10px 30px 15px;
|
||||
padding : 10px 30px;
|
||||
margin : 10px 30px 15px;
|
||||
padding : 10px 30px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
title: viewport
|
||||
date: 2018-4-9 11:01:56
|
||||
tags:
|
||||
- 前端
|
||||
- 前端
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
在移动设备上的页面开发 , 首先需要搞清楚的就是`viewport` , 这是适配和响应各种不同分辨率的移动设备的前提条件
|
||||
@@ -97,16 +97,16 @@ div的width为2vw , 那么这个div的实际显示宽度就是20px
|
||||
这时候我们就可以用calc函数配合vw来解决这个问题
|
||||
```css
|
||||
.left,.right {
|
||||
height : 600px;
|
||||
border : 3px solid black;
|
||||
height : 600px;
|
||||
border : 3px solid black;
|
||||
}
|
||||
.left {
|
||||
background : blue;
|
||||
width : calc(25vw - 6px);
|
||||
background : blue;
|
||||
width : calc(25vw - 6px);
|
||||
}
|
||||
.right {
|
||||
background : pink;
|
||||
width : calc(75vw - 6px);
|
||||
background : pink;
|
||||
width : calc(75vw - 6px);
|
||||
}
|
||||
```
|
||||
> 出于兼容性的考虑 , 最好给calc加上`-webkit-`和`-moz-`的前缀
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
title: 响应式布局
|
||||
date: 2018-4-6 10:55:37
|
||||
tags:
|
||||
- 前端
|
||||
- css
|
||||
- 前端
|
||||
- css
|
||||
categories:
|
||||
- 前端杂烩
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
#### 媒体查询
|
||||
媒体查询可以使用`@media`在css样式当中进行断点 , 让指定的css样式按照要求进行生效
|
||||
```css
|
||||
@media (max-width:768px) {
|
||||
.box {
|
||||
color : red;
|
||||
}
|
||||
.box {
|
||||
color : red;
|
||||
}
|
||||
}
|
||||
```
|
||||
上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效
|
||||
|
||||
Reference in New Issue
Block a user