流楚丶格念的博客_JavaScript,Java,C/C++,PHP,Mysql,Html/CSS,微信开发,HTML5,Kubernetes,精选,推荐(8)

JavaScript——JavaScript数据类型转换

文章目录数据类型转换转换成字符串类型转换成数值类型转换成布尔类型代码示例数据类型转换如何使用谷歌浏览器，快速的查看数据类型？字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的转换成字符串类型toString()var num = 5;console.log(num.toString());

JavaScript

JavaScript技巧

JavaScript教程

原创 2020-07-19 09:57:09 419 阅读

JavaScript数据类型与注释

文章目录数据类型简单数据类型Number类型String类型Boolean类型Undefined和Null复杂数据类型获取变量的类型字面量注释单行注释多行注释数据类型简单数据类型Number、String、Boolean、Undefined、NullNumber类型数值字面量：数值的固定值的表示法110 1024 60.5进制十进制 var num = 9; 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。十六进制 var num = 0xA;

JavaScript

原创 2020-07-19 09:42:01 120 阅读

JavaScript变量

文章目录js写代码时候注意事项变量什么是变量如何使用变量变量在内存中的存储变量的命名规则和规范代码示例js写代码时候注意事项1.在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行2.如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行3.script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以但是,目前在我们的html页面中,type和langua

JavaScript

原创 2020-07-19 09:35:25 153 阅读

JavaScript基础知识

你这一辈子有没有为别人拼过命浏览器说明网页、网站和应用程序JavaScript介绍JavaScript是什么JavaScript最初的目的JavaScript现在的意义(应用场景)JavaScript和HTML、CSS的区别JavaScript的组成ECMAScript - JavaScript的核心BOM - 浏览器对象模型DOM - 文档对象模型

JavaScript

JavaScript技巧

JavaScript基础

原创 2020-07-15 20:07:42 354 阅读

CSS3——伸缩布局，文字阴影，背景渐变缩放多背景，优雅降级和渐进增强

想对你说的话伸缩布局(CSS3)文字阴影(CSS3)背景渐变背景缩放(CSS3)多背景(CSS3)优雅降级和渐进增强（取决于客户需求）伸缩布局(CSS3)CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

CSS3

html

css

原创 2020-07-15 16:40:49 530 阅读

CSS3——CSS3动画(animation)及应用

改革春风吹满地动画(CSS3) animation案例1：太阳系的运作案例2：图片播放标题动画(CSS3) animation动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称花费时间运动曲线何时开始播放次数是否反方向;关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

CSS3

html

css

原创 2020-07-15 14:47:15 887 阅读 1评论

CSS3——3D变形 transform

3D变形(CSS3) transform2d x y3d x y z左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图简单记住他们的坐标：

CSS3

CSS

html

原创 2020-07-15 11:24:51 426 阅读

CSS3——2D变形(CSS3) transform

让青春吹动了你的长发2D变形(CSS3) transform移动 translate(x, y)缩放 scale(x, y)旋转 rotate(deg)transform-origin可以调整元素转换变形的原点倾斜 skew(deg, deg)案例总预览放大缩放旋转旋转的楚乔特效2D变形(CSS3) transformtransform是CSS3中具有颠覆性的特征之一，

CSS

CSS3

html

原创 2020-07-15 10:53:22 500 阅读

CSS3——过渡(CSS3)

不得不爱过渡(CSS3)案例过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

CSS3

CSS

html

原创 2020-07-15 10:21:01 2202 阅读

CSS3——CSS3盒模型

像手腕上散发的香水味CSS3盒模型案例CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，

CSS3

CSS

html

原创 2020-07-15 09:25:54 791 阅读

CSS3——CSS3 新增选择器

天空之外结构(位置)伪类选择器（CSS3)案例属性选择器案例伪元素选择器（CSS3): 伪类与 :: 伪元素注意案例结构(位置)伪类选择器（CSS3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) ：匹配属于其父元素的第 N 个子元素，

CSS3

CSS

html

原创 2020-07-15 09:14:14 815 阅读

HTML5——HTML5新标签与特性

起风了兼容性问题文档类型设定字符设定常用新标签新增的input type属性值：常用新属性综合案例兼容性问题文档类型设定documentHTML: sublime 输入 html:4sXHTML: sublime 输入 html:xtHTML5 sublime 输入 html:5 ！字符设定：HTML与XHTML中建议这样去写：HTML5的标签中建议这样去写常用新标签w3c 手册中文官网

HTML5

原创 2020-07-15 08:30:19 2045 阅读

HTML5——HTML5多媒体标签

多媒体标签embed：标签定义嵌入的内容audio：播放音频video：播放视频多媒体 embed（会使用）embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解 audio 和video 视频多媒体。<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIw

HTML5

原创 2020-07-15 08:22:10 2188 阅读

几行代码解决京东购物界面

文章目录完整项目界面展示GIF界面代码index.htmlindex.css（中间主要部分）base.css（头部，尾部）normal.css图片资源完整项目https://download.csdn.net/download/weixin_45525272/12596801界面展示GIF界面代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

代码

购物界面

原创 2020-07-10 10:24:03 940 阅读

CSS W3C 统一验证工具

CSS W3C 统一验证工具CssStats是一个在线的 CSS 代码分析工具网址是：http://www.cssstats.com/W3C 统一验证工具：更全面的，神奇的验证 http://validator.w3.org/unicorn/ ☆☆☆☆☆因为它可以检测本地文件哦！！

CSS3

CSS

html

原创 2020-07-10 10:17:09 442 阅读

CSS——CSS网站优化三大标签(title，description，keyword)

SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。简单的说就是，把产品做好，搜索引擎就会介绍客户来。我们现在阶段主要进行站内优化。网页title 标题title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。建议：首页标题：网站名（产品名）- 网站的介

CSS

CSS技巧

CSS教程

原创 2020-07-10 10:09:53 470 阅读

CSS——引入ico图标

引入ico图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 注意：它不是iconfont字体哦也不是图片。位置是放到 head 标签中间。后面的type=“image/x-icon” 属性可以省略。（我相信你也愿意省略。）为了兼容性，请将favicon.ico 这个图标放到根目录下。下载及转换ico图标网站（方便）我们可以自己做的图片，转换为 ico图标，

CSS

CSS技巧

CSS教程

原创 2020-07-09 14:41:22 2085 阅读

CSS——web字体与CSS字体图标

文章目录web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML第一步：在样式里面声明字体：告诉别人我们自己定义的字体第二步：给盒子使用字

css

html

svg

ico

字体图标

原创 2020-07-09 14:34:24 10000+阅读

CSS——CSS滑动门及其应用（制作微信导航栏） ※

滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门：滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度,

CSS

CSS技巧

CSS教程

原创 2020-07-03 21:57:58 517 阅读

CSS——CSS精灵技术（sprite）※

文章目录CSS精灵技术（sprite）小妖精雪碧精灵技术产生的背景精灵技术本质精灵技术的使用制作精灵图注意事项结束语：精灵图案例CSS精灵技术（sprite）小妖精雪碧精灵技术产生的背景图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的

CSS

原创 2020-07-03 21:18:42 548 阅读

CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题

CSS高级技巧CSS用户界面样式所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

CSS

原创 2020-07-03 20:50:44 173 阅读

CSS——CSS元素的显示与隐藏

文章目录元素的显示与隐藏display 显示visibility 可见性overflow 溢出溢出案例案例：播放图标的显示元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！display 显示display 设置或检索对象是否及如何显示。disp

CSS

原创 2020-07-03 12:50:20 2673 阅读

CSS——浮动布局改错题

文章目录题目错误代码解析正确代码题目错误代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" cont

CSS

原创 2020-07-03 08:43:37 284 阅读

CSS——CSS定位※ ( position )

文章目录定位(position)为什么要用定位？元素的定位属性静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)1.父级没有定位2.父级有定位3.子绝父相 ※※绝对定位的盒子水平/垂直居中代码示例固定定位fixed(认死理型)叠放次序（z-index）四种定位总结定位模式转换顺丰案例定位(position)background-position 背景定位如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。PS: 定

CSS

原创 2020-07-03 08:04:03 768 阅读

PS基本操作介绍与下载

文章目录学习视频教程破解版PS下载以及视频教程相关素材链接Photoshop基本使用PS界面组成：图层操作(重点)图层编组图层上下位置移动Photoshop 切图切片工具辅助线和切片使用及清除切图插件学习视频教程http://2565.replace.favo.tyouai.com/破解版PS下载以及视频教程相关素材链接链接：https://pan.baidu.com/s/1qCE2jGR1Oh85VYan0XZqlg提取码：5oe8Photoshop基本使用PS界面组成：ctrl

PS基本操作

PS设计

原创 2020-07-02 22:26:23 1118 阅读

CSS——CSS浮动与清除浮动

文章目录浮动普通流(normal flow)浮动(float)什么是浮动？浮动详细内幕特性float 浮漏特现在就可以用float实现一些基本页面布局了链接清除浮动为什么要清除浮动清除浮动本质※ 清除浮动的方法1.额外标签法2.父级添加overflow属性方法3.使用after伪元素清除浮动4.使用before和after双伪元素清除浮动浮动普通流(normal flow)这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来摆放盒子

CSS

原创 2020-07-02 17:17:15 1058 阅读

CSS——网页版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：1、确定页面的版心（可视区）。2、分析页面中的行模块，以及每个行模块中的列模块。3、制作HTML结构。4、CSS初

CSS

CSS技巧

CSS教程

原创 2020-07-02 16:12:51 2933 阅读 1收藏

盒子综合案例——德云社十八愁与宠物知识栏

文章目录1.德云新闻案例效果图源代码（图片我放在最下哈）2.宠物知识栏案例源代码3.图片资源1.德云新闻案例效果图源代码（图片我放在最下哈）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>十八愁绕口令</title> <style type="text/css"> *{margin: 0;padding: 0;}

盒子综合案例

前端开发

原创 2020-06-30 10:54:10 312 阅读

Sublime Text3去掉css输入分号后的自动提示

如果一不行就用第二种方法一打开Sublime默认设置文件：‘Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut’找到：“codeintel_enabled_languages”: 这一项，把里面的 “HTML” 删掉就可以了。OK，重启就可以了，完美解决，如果年后编写其他的，去掉对应的语言就好了。方法二（我找到了没有代码里面，然后用的方法一）打开Preferences -> Package

CSS

CSS技巧

CSS教程

原创 2020-06-30 09:41:37 260 阅读

CSS——CSS权重计算测试题

1<title>第1题</title> <style type="text/css"> #father #son{ color:blue; } #father p.c2{ color:black; } div.c1 p.c2{ color:red; } #father{ color:green !important; /* 继承的权重为0 */ } </styl

CSS

原创 2020-06-29 22:32:31 478 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx60c1e0978aecb的博客

JavaScript——JavaScript数据类型转换

JavaScript数据类型与注释

JavaScript变量

JavaScript基础知识

CSS3——伸缩布局，文字阴影，背景渐变缩放多背景，优雅降级和渐进增强

CSS3——CSS3动画(animation)及应用

CSS3——3D变形 transform

CSS3——2D变形(CSS3) transform

CSS3——过渡(CSS3)

CSS3——CSS3盒模型

CSS3——CSS3 新增选择器

HTML5——HTML5新标签与特性

HTML5——HTML5多媒体标签

几行代码解决京东购物界面

CSS W3C 统一验证工具

CSS——CSS网站优化三大标签(title，description，keyword)

CSS——引入ico图标

CSS——web字体与CSS字体图标

CSS——CSS滑动门及其应用（制作微信导航栏） ※

CSS——CSS精灵技术（sprite）※

CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题

CSS——CSS元素的显示与隐藏

CSS——浮动布局改错题

CSS——CSS定位※ ( position )

PS基本操作介绍与下载

CSS——CSS浮动与清除浮动

CSS——网页版心和布局流程

盒子综合案例——德云社十八愁与宠物知识栏

Sublime Text3去掉css输入分号后的自动提示

CSS——CSS权重计算测试题

欢迎