网站优化
1、head部分代码规范化head部分代码是搜索引擎爬行网站的入口部分，将网站的代码规范化，建立起网站独一无二的head部分。2、使用div+c 布局网页大多数网页都在用div+c 另外，一些网站会使用外部文件，将c 和js放在外部文件中，页面html中只要放一行代码调用就可以了，3、c...[2019/11/13]
css之纯css实现流程导航效果css之纯css实现流程导航效果
:::tip
使用纯c 线上 流程导航效果。
本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变
:::
## 方法一 利用裁剪 &n...[2019/11/13]
用canvas写一个简易画图工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>...[2019/11/13]
前端之html
目录
什么是前端
前端基础
前端必备知识点
软件开发架构
web服务的本质
请求方式
HTTP协议
是什...[2019/11/13]
推荐一款酷炫闪烁的告警按钮推荐一款酷炫闪烁的告警按钮
效果如下：
代码如下(点击可展开查看源码)：
<!DOCTYPE html>
<html xmlns="http: www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Con...[2019/11/13]
打开文件报“EFailed to load resource: net::ERR_FILE_NOT_FOUND”错误
类似这样：
引入文件的路径错误
原文链接：http: www.cnblogs.com/yixiongqiang/p/11842733.html[2019/11/13]
小程序如何实现rem
最近在学习小程序，要把html的代码转换成小程序界面，其中就遇到了rem的转换问题，但小程序不太兼容rem，不是不能用rem，而是没办法设置根元素的font-size，因为rem是相对于根元素的font-size，而小程序的根元素font-size一直是16px。既然我设置了page{ ...[2019/11/13]
day 42
目录
前端
什么是前端
什么是后端
web服务的本质
请求方式
HTTP协议
1.四大特性
...[2019/11/13]
JavaWeb第一天--HTMLJavaWeb第一天--HTML
HTML
HTML简介
HTML(Hyper TextMarkupLanguage) 超文本标记语言。
超文本： 超越了文本仅仅展示信息的功能范畴，泛指：图片、有样式的文字、超链接。
标记： 标签。
语言： 工具。
HTML是由标签所组成的语言，能展示超文本的效果。
HTML的...[2019/11/13]
CSS浮动
CSS浮动
传统网页布局的三种方式
网页布局的本质——用来CSS来摆放盒子。把盒子摆放在相应的位置
CSS提供了三种传统的布局方式：
普通流（标准流）
所谓的标准流，就是标签按照规定好默认方式排列
块级元素会独占一行，从上向下排列
常用元素：div、hr、p、h1~h6、...[2019/11/13]
CSS基本选择器是什么？基本选择器是如何工作CSS基本选择器是什么？基本选择器是如何工作
基本选择器介绍
基本选择器又分为六种使用方式：如、通用选择器、标签选择器、类选择器、Id选择器、结合元素选择器、多类选择器。
基本选择器使用说明表。
选择器
语法格式
含义
举例
通用选择器
*{属性：值;}
通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * ...[2019/11/13]
解决Vue打包上线之后部分CSS不生效的问题
首先注释掉webpack.prod.conf.js中下面的代码
new OptimizeCSSPlugin({
c Proce orOptions: config.build.productionSourceMap
? { safe: true, map: { inli...[2019/11/13]
案例——文字折叠效果
文字折叠效果
效果展示
实现过程
<div id="char1">
<span cla ="my-span ">H< pan>
<sp...[2019/11/12]
相册小程序相册小程序
小程序由来
当初结婚，为了给媳妇惊喜，借助云开发的推广，自己做了一个结婚用的邀请函小程序，结完婚后，趁着空闲时间，希望把之前使用的邀请函小程序留存下来，所以做了一次整体改版。改版后的小程序我自己定义为相册类小程序，主要放一些自己喜欢的照片。
小程序功能
首页相册
爱的空间相册
陌生人的...[2019/11/12]
css3响应式布局教程—css3响应式
响应式布局
一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。
媒体类型
在何种设备或者软件上将页面打开
123456789
all：所有媒体braille：盲文触觉设备embo ed：盲文打印机print：手持设备projection：打印...[2019/11/12]
js确定取消—js确定取消判断js确定取消—js确定取消判断
国瑞前端： js确定取消，在html界面中，有c 模拟的模态框，这样显示的就会更好看一些，那么javascript有没有自带的弹框呢，当然是有的，接下来我就来给大家介绍一下把：
js确定取消-警告框alert()
起到警告作用
js确定取消-确认框confirm()
...[2019/11/12]
盒子阴影
圆角边框
border-radius属性用于设置元素的外边框圆角
border-radius:length;
radius半径（圆半径）原理：圆与边框的交际形成圆角效果。
圆的做法
首先，做一个正方形的div
其次，让border-radius的值等于div宽度的一般，或者...[2019/11/12]
我的第一篇博客
捏黑~捣鼓了一两天的博客开张啦
大家好，我是学习前端两月半的菜鸟程序员，喜欢看番，打游戏，写代码
哈哈，开个玩笑，有一说一，最开始我准备在学完CSS3和JavaScript时通过腾讯云自建博客网站，可是考虑到难度和使用、维护，最终在多个平台中选择了博客园。（当然，某sdn广告和水分...[2019/11/12]
老板的手机收到一个红包，为什么红包没居中？如何让一个元素水平垂直居中？
本文的最新内容将在GitHub上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。
前言
老板的手机收到一个红包，为什么红包没居中？
如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。
你也许能顺手写出好几种实现方法。但大部分人的写...[2019/11/11]
盒子模型
盒子模型
页面布局的三大核心，盒子模型，浮动和定位
网页布局过程
先准备好相关网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后放到相应位置
往盒子里面装内容
盒子模型的组成
所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是 一个盛...[2019/11/11]
css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理
对包含有子元素的元素进行flex后，会影响原有的布局。
例如设置两个div，第一个div包含一个img（图片），第二个div包含多个p元素（对前面的img的说明）。如下图
1：当对着两个两个div进行flex布局后。虽然两个div会同时处在一行内。但第二个div内部多个p元素...[2019/11/11]
CSS简介
什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS ...[2019/11/11]
给博客加了个音乐播放器
本来用的是网易云的外链，后来发现APlayer就换成这个播放器组件了
在 页脚 HTML 代码 中插入以下代码就行了
1 <link rel="stylesheet" href="https: cdn.jsdelivr.net/npm/aplayer@1.10.1/...[2019/11/11]
html-前端内容初识
HTML解释：
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的规则（W3C），大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户&...[2019/11/11]
对于flex布局的使用心得对于flex布局的使用心得
弹性盒子flex：
对于客户端的布局非常有用，不管是平均分配space-around这个属性还是两端对齐space-betwee在页面布局的时候都会有很好的表现。
对于部分内容区域中，具有很多大致内容相同的几个区块的布局都可以使用到它，将父级设置为display:flex；父级就会变...[2019/11/11]
如何创建 CSS
如何插入样式表？
CSS代码应该写到什么地方呢？
CSS代码分为三种插入方式，接下来笔者给园友们介绍有哪些插入方式：
嵌入式、外链式、行内式。
嵌入式
什么是嵌入式？
嵌入式就是将写好的CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的style标签将CSS代码嵌入到HT...[2019/11/11]
<code> 标签 让一段计算机代码显示在网页中<code> 标签 让一段计算机代码显示在网页中
<code> 标签
解释：要让一段计算机代码显示在网页中，那么这段代码需要用<code> 标签包起来，不然他会被当作网页的代码被 运行。
例如：
<code><img src="" alt=""></code&...[2019/11/11]
<pre> 保留文本格式显示在网页上
<code> 标签
解释：保留输入的格式空格等不变，原样显示在网页上
例如：
<pre>
通知
即日起不再提供公共设施
个店铺需自行准备。
望周知~！！
...[2019/11/11]
<h1>~<h6> 标题标签
<h1>~</h6>标题系列标签
解释：h1到h6 中h1标签最大，h6标签最小，逐一递增。
例如：
<h1>标签</h1>
<h2>标签</h2>
<h3>标签</h3...[2019/11/11]
浏览器私有属性
一.c 中抬头
::-moz代表firefox浏览器私有属性
::-ms代表ie浏览器私有属性
::-webkit代表safari、chrome私有属性
::-o代表opera
二.常见的中私有属性拿chrome浏览器举例
::如果前面为空代码全局,如果前面有某个元素的c 选择器代表...[2019/11/11]
利用onMouseOver和onMouseOut实现图像翻滚利用onMouseOver和onMouseOut实现图像翻滚
代码：
<img src="image 001.jpg" alt="pic" onmouseover="this.src=''image 001.jpg'';" onmouseout="this.src=''image 002.jpg'';"/>
原...[2019/11/8]
webPack 4.0的零基础学习
webPack 也更新到了4.0阶段，今天看了一下官网，总结一下，零基础的学习路径吧。
（1）首先需要下载 webPake和webpack cli
npm install webpack webpack-cli
（2）下载完之后，则是建立新的文件...[2019/11/8]
HTML连载48-清除浮动的其中两种方式 - 心悦君兮君不知-睿
一、清除浮动的方式一
给前面一个父元素设置高度，?注意：企业开发中能不写高度就不写高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
...[2019/11/8]
高德引擎构建及持续集成技术演进之路
01 背景
由于导航应用中的地图渲染、导航等核心功能对性能要求很高，所以高德地图客户端中大量功能采用 C++ 实现。随着业务的飞速发展，仅地图引擎库就有40多个模块，工程配置极其复杂，原有的构建及持续集成技术已无法满足日益增长的需求变化。
除了以百万计的代码行数带来的...[2019/11/7]
关于 JS this
关于 JS this
1. this 与 普通函数
2. this 与 bind、call、apply
3. this 与 箭头函数
4. this 与 return
4.1 返回 引用对象
4.2 返回 function对象
4.3 返回 数字，值对象
4.4 返回 undefi...[2019/11/7]
windows 360浏览器打开网站白屏
1、场景
使用windows的360浏览器打开网页白屏
使用mac 谷歌，360，火狐浏览器打开均正常
2、原因
windows浏览器默认使用的是ie浏览器内核渲染的，js执行时发生错误
3、添加header头选择渲染的浏览器内核：极速
<meta name...[2019/11/7]
1+X证书学习日志 —— css样式表1+X证书学习日志 —— css样式表
## 因为初级的内容较多，所以选了一些有用的 需要记忆的内容写下 方便日后回顾
CSS语法
选择符{属性:属性值;}
##
...[2019/11/7]
1+X学习日志——导航栏demo
初级菜鸟的作品，各位大佬见笑了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"...[2019/11/7]
浮动和渐变色，定位position，元素的层叠顺序
浮动： float 是我们网页布局的一种
浮动 可以有 left 左浮动 right 右浮动 两种
浮动的特点： 脱离正常的文档流，原本的空间不占据，浮动的标签都具有块级标签的一些特点，可以手动设置宽高
如果有相邻的多个浮动...[2019/11/7]
1+X证书学习日志——css 2D&过渡1+X证书学习日志——css 2D&过渡
c 位移常用属性
transform:translate(x,y)；
transform:translateX();
transform:translateY();
旋转属性
...[2019/11/7]
大话Git系列之初识版本控制系统（2）
本次接着上次的来介绍版本控制系统，这个讲到的将是Git与Github，说一下什么是Git，什么是GitHub？他们之间的关系是什么？
1、Git 是代码管理的工具
2、GitHub 是基于Git实现的代码管理的平台。
这样就比较清楚两个不同的作用了，Git更多的是在本地进行代码的存...[2019/11/7]
CSS雪碧图（精灵图）使用
1：CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。
2：雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次数将大大增加。由此出现了雪碧图的概念
3：用处...[2019/11/7]
持续交付体系在高德的实践历程持续交付体系在高德的实践历程
1. 前序
对于工程团队来说，构建一套具有可持续性的、多方面质量保证的交付体系建设，能够为业务价值的快速交付搭建起高速公路，也能为交付过程中的质量起到保驾护航的作用。本文为大家介绍持续交付体系在高德的演进与落地。
2. 持续交付
正如前序中所总结的，我们需要构建一套持续交付体系，从而保...[2019/11/7]
css :not的多个条件的写法详解_CSS教程_CSS
:not 伪类选择器可以筛选不符合表达式的元素
例子
table tbody tr:not(:first-child):not(:last-child) td
{
text-align: right;
}
以上代码可以选择table表格中tbody部...[2019/11/7]
css盒模型。边框和内外边距
c 盒模型： 外边距 边框 内填充 内容
盒模型分为两种： 标准盒模型： 怪异盒模型（IE盒模型）：
边框：border border: 10px solid blue;表示设置10像素蓝色实线条的边框 ...[2019/11/6]
animations与transitionanimations与transition
transition过渡 和animation 动画
要知道 transition过渡和animation动画都是实现元素运动的一种方式。区别在于： transition过渡需要人为触发，例如点击触发或者鼠标悬停触发，而animation是可以不需要人为触发。transitio...[2019/11/6]
负边距与双飞翼布局
负边距与双飞翼布局
负边距
当设置top和left方向的负边距时，元素本身向指定方向移动。当设置bottom和right方向的负边距时，元素本身不移动，处于元素后方的元素向前流动，覆盖其上。
圣杯布局
圣杯布局是一个三栏布局，左右定宽，中间自适应。
HTML布局
<head...[2019/11/6]
如何获取Html的height和width属性（网页宽、高）
1、页面如图所示
2、Html代码
<div style="color:green;" id="html_info"></div>
3、JavaScript代码
1 <script ty...[2019/11/5]
CSS的三大特性
CSS的三大特性
层叠性
相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突样式。层叠性主要解决样式冲突问题
层叠性原则
样式冲突，遵循的原则是就近原则，哪个样式里结构近，就执行那个样式
样式不冲突，不会层叠
继承性
CSS中的继承性：子标签会继承父标签的...[2019/11/5]
echart 人头
<template>
<div :cla ="cla Name">
<div :id="id" cla ="spiritChartBox"></div>
...[2019/11/4]
经验首页