<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[kbone的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/kbone</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; kbone]]></copyright><item><title><![CDATA[Swiper引入,new Swiper 阻止eslint标准]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/108755995</link><guid>https://blog.youkuaiyun.com/kbone/article/details/108755995</guid><author>kbone</author><pubDate>Wed, 23 Sep 2020 16:36:19 +0800</pubDate><description><![CDATA[在引入swiper插件时阻止vue-cli脚手架默认标准.
/* eslint-disable-next-line */
new Swiper ('.swiper-container', {
   loop: true, // 循环模式选项
   autoplay: true,
   // 如果需要分页器
   pagination: {
     el: '.swiper-pagination'
   }
 })

/* eslint-disable-next-line */
如不输入该代码,会导致new]]></description><category></category></item><item><title><![CDATA[H5学习---Javascript---while  for  三目运算符]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824848</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824848</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:53:36 +0800</pubDate><description><![CDATA[1.while循环
while(条件){
//条件成立就会反复执行这里的代码
}
var count = 0;
while(count &lt; 10){
	count++;
	document.write("Hello world");
}

死循环： 没有终止条件的循环即为死循环，在代码中应尽量避免死循环

2.do…while循环
do {
//先执行一遍代码
//while条件成立再继续反复执行
} while (条件)

while和do…while循环的区别
  do...while循环至少会执]]></description><category></category></item><item><title><![CDATA[H5学习---Javascript---显示,隐式转换 if  switch  case]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824821</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824821</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:51:53 +0800</pubDate><description><![CDATA[隐式转换
var a = "2", b = 2;
console.log(a + b  )    // 22
console.log(a == b)     // true
console.log(a * b)      // 4
console.log(a - 0 + b)  // 4
console.log(a / b)      // 1
console.log(a % b)      // 0

数字和字符串相加，数字会隐式转换为字符串来拼接
数字和字符串相减，字符串转成数字，如果转换不成功得到Na]]></description><category></category></item><item><title><![CDATA[H5学习---Javascript---js书写 变量类型 变量命名]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824745</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824745</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:47:27 +0800</pubDate><description><![CDATA[1.Javascript是一门面向对象的，跨平台的脚本语言
2.JS历史
1995 最初由Netscape（网景公司）的Brendan Eich设计    为Netscape Navigator 2.0开发LiveScript 
Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript
因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript
ECMA: European Computer Ma]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---网格布局 视口宽]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824667</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824667</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:45:17 +0800</pubDate><description><![CDATA[flex是一维布局,grid是二维布局，横纵两个方向总是同时存在的
作用在grid容器上
grid-template-columns对网格进行纵划分,单位可以是px,%,自适应auto,fr(网格剩余空间比例单位)
grid-template-rows网格进行横划分
grid-template-rows:repeat(4,1fr);重复形式

grid-template-areas：grid子项只要使用grid-area属性指定其隶属于哪个区
grid-template以上三个的简写形式

grid-col]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---媒体查询 移动端]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824646</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824646</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:43:05 +0800</pubDate><description><![CDATA[介绍响应式网页
媒体查询
@media only screen and (min-width: 601px) and (max-width: 1200px){
	body{
		background: yellow;
	}
}
竖屏
	@media screen and (orientation:portrait){}
横屏
	@media screen and (orientation:landscape){}
断点值：
	iphone5 - 逻辑像素320px
	iphone6/7/8 - 逻辑像素37]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---弹性盒及属性]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824604</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824604</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:42:12 +0800</pubDate><description><![CDATA[给父元素添加
1.display:flex/inline-flex;
	flex将对象作为弹性伸缩盒显示
	inline-flex将对象作为内联块弹性伸缩盒显示

2.flex-direction (主轴排列方向)
	row 默认，横向一行排列
  	row-reverse 反转横向排列
  	column 纵向排列
  	column-reverse 反转纵向排列

3.justify-content(主轴对齐方式)
	flex-start默认，顶端对齐
	flex-end末端对齐
	center居中对齐]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---背景,属性选择器]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824556</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824556</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:39:44 +0800</pubDate><description><![CDATA[渐进增强优雅降级
渐进增强:针对低版本浏览器进行构建页面，保证最基本的功能，
	然后再针对高级浏览器进行效果、交互等改进和追加
	功能达到更好的用户体验
优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

css选择器
一、层级选择器
	E&gt;F 子代选择器(非css3)
	E+F 匹配紧邻元素E的后面的元素F(非css3)
	E~F 选择前面有E元素的每个F元素

二、属性选择器
	1、E[attr]：只使用属性名，但没有确定任何属性值
	2、E[attr="value"]：指定属性名]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---H5语意标签,新增表单元素]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107824004</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107824004</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:37:04 +0800</pubDate><description><![CDATA[语义标签H5
内容类型（ContentType）
HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"。

DOCTYPE声明
不区分大小写

指定字符集编码
meta charset="utf-8" 

可省略标记的元素
不允许写结束表标记的元素：br,col,enbed,hr,img,input,link,meta
可以写省略结束标记的元素：li,dt,dd,p,option,colgruop,thead,tbody,tfoot,tr,td,th
可以省略全部标记的元素：html]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---3D 动画]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107823969</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107823969</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:10:47 +0800</pubDate><description><![CDATA[3D
- perspective元素距离视线的距离(1000-3000px)
	模拟近大远小效果,添加给父元素
- perspective-origin观察子元素的视角(默认值为中心点)
- transform-style:preserve-3d;子元素保留3d转换位置
- backface-visibility: hidden;子元素背面不可见,添加给子元素
- 位移
	transform: translateZ(300px);沿着z轴移动
	transform: translate3d(100px,20]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---渐变过渡,2D转换]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107823904</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107823904</guid><author>kbone</author><pubDate>Wed, 05 Aug 2020 20:09:55 +0800</pubDate><description><![CDATA[渐变
- 线性渐变
	background:linear-gradient(方向,颜色1,颜色2,...)
		方向：
			to top由下到上
			30deg
- 径向渐变
	background: radial-gradient(pink,purple);
- 重复线性渐变
	background: repeating-linear-gradient(red 10%,pink 20%);
- 重复径向渐变
	background: repeating-radial-gradient(red 10%,]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---css优化，浏览器兼容，表单表格]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606390</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606390</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:39:52 +0800</pubDate><description><![CDATA[css优化
css方面
	1.提取公共的css样式作为一个单独的css文件引入
页面头部
	1.描述
		&lt;meta name="Description" content="天天低价手机"/&gt;
	2.关键字
		&lt;meta name="Keywords" content="低价,促销,折扣,正品"/&gt;
图片优化(alt属性，title属性)
超链接优化
	建议纯文本
CSS Reset / css重置
css命名优化
合理的代码结构

图片整合
- CSS Sprites/雪碧图/精]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---定位，BFC]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606360</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606360</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:38:41 +0800</pubDate><description><![CDATA[***定位position
- 分类
	1.相对定位position:relative;
		参考物：元素本身(自己的初始位置)
		是否脱离文档流：不脱离
		偏移位置：
			top
			bottom
			left
			right
	2.绝对定位position:absolute;
		参考物：外层具有position属性的元素,一层一层向上去查找,如果都没找到最终参考浏览器空白文档区域做定位
		是否脱离文档流：脱离
		偏移位置：
			top
			bottom
			left
			rig]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---透明度，锚点，清楚浮动，伪类选择器]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606282</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606282</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:37:05 +0800</pubDate><description><![CDATA[iframe标签
- 当前页面中嵌入另一个页面
- &lt;iframe src=""&gt;&lt;/iframe&gt;

元素隐藏办法
display:none;
	- 让元素隐藏，元素空间不再占据
visibility:hidden;
	- 元素可见性：隐藏。元素空间还在

锚点
- 当前页面跳转到某一个位置阅读
- 用法：
	用户点击&lt;a href="#idname"&gt;第一章&lt;/a&gt;
	跳转到的位置&lt;div id="idname"&gt;&lt;/div&gt;
- ]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---overflow，display，框模型]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606226</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606226</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:34:10 +0800</pubDate><description><![CDATA[溢出属性
overflow:
	visible溢出可见(默认)
	hidden溢出隐藏
	scroll溢出滚动条查看
	auto溢出自动处理
	inherit继承
- 父元素使用overflow:hidden;解决高度塌陷问题原因是：
	父元素触发了BFC(块级格式化上下文),浮动子元素高度参与计算
	
white-space:nowrap;文本不换行

text-overflow:ellipsis;文本显示省略号

***单行文本显示...效果
	div{
		width:100px;
		white-s]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---属性，浮动]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606191</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606191</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:32:53 +0800</pubDate><description><![CDATA[属性
1.字体大小font-size
2.字体颜色color
3.字体font-family
4.字体加粗font-weight:bold;
5.行高line-height
6.基线对齐vertical-align:baseline;
7.文本和图片的水平居中text-align:center;
8.添加下划线text-decoration:underline;
9.字体font的简写属性font:12px/1.5em "微软雅黑";
10.去掉列表标识符
	ul,ol,li{
		list-style:n]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---选择器，文本列表边框属性，背景，精灵图]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606095</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606095</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:30:20 +0800</pubDate><description><![CDATA[选择器
- 元素选择器
	把页面中的某一类标签改变相同的样式
- 类选择器
	- 命名规则：见名知意,包含字母数字_-,小写字母开头
	- 一个元素可以有多个类名,一个类名可以被多个元素所使用
		&lt;div class="box wrap content"&gt;&lt;/div&gt;
- id选择器
	- 每个版块最外层的大容器
	- id具有唯一性
		&lt;div id="box"&gt;&lt;/div&gt;
- 群组选择器
	- 共用相同的代码
		#box,.wrap,.list{}]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---css引入，选择器，css属性]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107606044</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107606044</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:27:43 +0800</pubDate><description><![CDATA[了解：另一种外部样式表的引入方法
在head中添加
	&lt;style type="text/css"&gt;
		@import url("css/style.css");
	&lt;/style&gt;
- 两种引入外部样式表link和import之间的区别
	差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
	差别2：加载顺序的差别：当一个页面被加载的时候,link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---form表单]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107605969</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107605969</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:25:14 +0800</pubDate><description><![CDATA[form表单
&lt;form action="" method="" name=""&gt;&lt;/form&gt;
- form的属性
	action提交的地址
	method提交的方式：
		get默认，明文提交
		post密文提交，相对安全
	name起个名字
- 文本框
	&lt;input type="text" name="username" value="请输入昵称"/&gt;
	type="text"文本框
	name起个名字
	value控件上的文本
- 密码框
	&lt;input]]></description><category></category></item><item><title><![CDATA[H5学习---html，css---标签]]></title><link>https://blog.youkuaiyun.com/kbone/article/details/107605792</link><guid>https://blog.youkuaiyun.com/kbone/article/details/107605792</guid><author>kbone</author><pubDate>Mon, 27 Jul 2020 10:18:52 +0800</pubDate><description><![CDATA[站点的作用
用来归纳一个网站上所有的网页、素材以及他们之间的联系
规划网站的所有内容和代码整合资源

创建站点的步骤
菜单栏中文件 -- 新建 -- web项目 -- 项目的命名(包含小写英文字母、数字、_,字母开头，不能有空格和特殊字符) -- 选择非C盘 -- 确定

站点中包含
css文件夹，用来放置css文件
img文件夹，用来放置图片
js文件夹，用来放置js文件
index.html，一般是网站的首页

web标准组成
结构html,xhtml
表现css
行为javascript(js)

组]]></description><category></category></item></channel></rss>