爱编程的小疯子-CSDN博客

原创 javascript之运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。浮点数的精度问题浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004console.log(0.07 * 100); // 结果不是 7，而是：7.000000000000001所以：不要直接判断两个浮点数是否相等 !表达式和返回值表达式：是由数字、运算符、变量等以...

2021-11-23 21:33:05 793

原创数据类型转换

什么是数据类型转换使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。我们通常会实现3种方式的转换：转换为字符串类型转换为数字型转换为布尔型转换为字符串toString() 和 String() 使用方式不一样。三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。转换为数字型（重...

2021-11-23 01:21:12 167

原创获取变量数据类型

获取检测变量的数据类型typeof 可用来获取检测变量的数据类型var num = 18;console.log(typeof num) // 结果 number不同类型的返回值字面量字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。数字字面量：8, 9, 10 字符串字面量：'黑马程序员', "大前端" 布尔字面量：true，false...

2021-11-23 00:31:15 325

原创 javascript之数据类型

变量的数据类型变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。var age = 10; // 这是一个数字型var areYouOk = '是的'; // 这是一个字符串在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。 .

2021-11-23 00:05:41 572

原创 JavaScript之变量

什么是变量白话：变量就是一个装东西的盒子。通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。变量概述 1.2 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。变量的使用变量在使用时分为两步： 1. 声明变量 2. 赋值 1. 声明变量声明变量 var age; // 声明一个名称为age 的变量var 是一个 JS关键字，用来声.

2021-11-22 05:05:47 446 1

原创初识javascript

js是一门脚本语言（1）不需要编译，运行过程由js引擎逐行来进行解释并执行（2）nodejs做服务端浏览器执行JS浏览器分成两部分 1.渲染引擎用来解析HTML和CSS，俗称内核 2.JS引擎 JS解释器，用来读取网页中的JS代码，对其处理后运行，比如chrome浏览器的V8 浏览器通过内置JS执行JS代码，逐行解释每一句源码，然后计算机去执行。JS组成（1）ECMAScript（2）DOM(Document Object Mod..

2021-11-22 03:55:27 148

原创 vw和vh布局

vw/vh是什么？vw/vh 是一个相对单位（类似 em 和 rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度例如：当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和.

2021-11-20 21:15:37 2881

原创响应式布局开发

一、响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适合不同设备的目的。设备划分小区间超小屏幕（手机） < 768 像素小屏设备（平板） >= 768px ~ < 992px 半屏幕（屏幕显示器） >= 992px ~ < 1200px 宽屏设置（大桌面显示器） >= 1200 像素 1.2 响应式布局组件响应式需要一个父级作为布局容器，来配合子级元素来

2021-11-14 22:05:28 1015

原创移动端常见布局

移动端技术选型1.单独制作移动端页面（主流）流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局混合布局2.响应式页面兼容移动端（其次）媒体查询 bootstrap流式布局（百分比布局）流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动Web开发使用的比较常见的布局方式max-width(max-height)最大宽度min-widt

2021-11-09 23:10:28 3596 1

原创移动端开发选择

移动端主流方案（1）单独制作移动端页面【主流】京东多快好省，购物上京东！淘宝淘宝网触屏版苏宁苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快 ……（2）响应式页面兼容移动端【其次】https://www.samsungeshop.com.cn/ ……单独移动端页面（主流）通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。4.3 响应式兼容PC移动端（其次）通过判断浏览器窗口宽度来改...

2021-11-08 22:01:34 164

原创移动端开发之二倍图

物理像素&物理像素比物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。出厂就设置好了。(分辨率) 我们开发时候的1px不一定就等于1个物理像素 PC端页面，1个px等于1个物理像素，但是移动端就不尽相同 1个px的能显示的像素个数，称为物理像素比或屏幕像素比物理像素比 = 物理像素（分辨率） / 独立像素（CSS像素）例如：iPhone X 的物理像素比为 3屏幕尺寸独立像素（CSS像素）物理像素（分辨率） ppi/dpi（像素密度） dpr（倍图

2021-11-08 20:10:06 3051

原创移动端开发之视口

视口：浏览器显示页面内容的屏幕区域。视口的分类：布局视口、视觉视口、理想视口。为了解决早期PC端网页在手机上显示的问题，移动端浏览器都默认设置了一个布局视口。 IOS、Android基本都将布局视口分辨率设置为980px，所以PC上的网页大多也能在手机上呈现，但是网页元素看上去会非常小，一般可以通过手动缩放网页。视觉视口字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。理想视口发明者：史蒂夫.

2021-11-08 19:16:37 257

原创移动端布局

1.移动端基础1.1 浏览器现状PC端常见浏览器：五大浏览器等等…移动端常见浏览器：UC浏览器，QQ浏览器，谷歌浏览器…国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android开发的一样。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。1.2 手机屏幕现状移动端设备屏幕尺寸非常多，碎片化严重 Android设备有多种分辨率，还有传说中的2K，4K屏近年来iPhone的碎片化也加剧了，

2021-11-08 17:45:03 80

原创 3D之转换

认识3D转换「3D的特点」近大远小，物体和面遮挡不可见「三维坐标系」 x 轴：水平向右 --注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 --注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值 3D转换1.3D 转换知识要点 3D位移：translate3d(x, y, z) 3D旋转：rotate3d(x, y, z) 透视：perspctive 3...

2021-11-08 16:56:36 484

原创 3D之CSS3动画(animation)

「动画」是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。「动画的使用」先定义动画再调用定义好的动画 /*1.定义动画*/@keyframes动画名称{0%{width:100px;}100%{width:200px}}div{/*调用动画*/animation-name:动画名称;/*持续时间...

2021-11-06 19:26:54 814

原创 2D 转换之transform

「 2D转换之translate移动」 2D转换是改变标签在二维平面上的位置和形状移动：translate 旋转：rotate 缩放：scale translate语法 x就是X轴上水平移动 y就是y轴上水平移动 transform:translate(x,y)transform:translateX(n)transfrom:translateY(n)...

2021-11-04 20:17:44 303

原创 CSS新增属性过渡

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不适用Flash 动画或者JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐地过渡到另外一个状态。可以让我们也没更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。我们现在经常和 :hover 一起搭配使用。「定义」过渡transition是一个复合属性，包括transition-property、transition-dura

2021-10-20 03:38:20 227

原创 CSS精灵技术

CSS精灵技术（也称CSS Sprites、CSS雪碧）。图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。1.CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页

2021-10-20 02:48:59 415

原创 CSS3新增属性

「1. CSS3属性选择器」button{cursor:pointer;}button[disabled]{cursor:default;}input[type=search]{color:skyblue;}span[class^=black]{color:lightgreen;}span[class$=black]{color:lightsalmon;}...

2021-10-20 02:48:25 118

原创「查漏补缺」HTML与CSS进阶

前言本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容，CSS3方面介绍动画及转换。H5新增内容「1. 什么是HTML5」定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。两个概念：是一个新版本的HTML语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML5。「2. HTML

2021-10-17 21:14:07 123

原创 vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin: 0 auto; 让文字居中对齐，是text-align: center; vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」设置或检索对象内容的垂直对其方式。vertical-align:baseline|top|middle|bottom注意：vertical-align 不影响块级元素中的内容对齐，它只针对于「行内元素」或者「行内块元素」，特别是行内块元素，通常用来控制...

2021-10-16 20:32:40 1148

原创 CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式表单轮廓等。防止表单域拖拽 1. 鼠标样式设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述 default 小白默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 <ul><listyle="cursor:default"&...

2021-10-16 19:31:13 112

原创 CSS三角形的做法

div{width:0;height:0;line-height:0；font-size:0;border-top:10pxsolidred;border-right:10pxsolidgreen;border-bottom:10pxsolidblue;border-left:10pxsolid#000;} 我们用css 边框可以模拟三角效果宽度高度为...

2021-10-16 19:04:22 54

原创 CSS元素的显示与隐藏

目的:让一个元素在页面中消失或者显示出来场景:类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 1.display 显示（重点）display设置或检索对象是否显示或如何显示。 display: none隐藏对象特点：隐藏之后，不再保留位置 display: block除了转换为块级元素之外，同时还有显示元素的意思。实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛...

2021-10-16 07:59:06 173

原创 CSS堆叠顺序（z-index）

在使用「定位」布局时，可能会「出现盒子重叠的情况」。加了定位的盒子，默认「后来者居上」，后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以「调整盒子的堆叠顺序」。如下图所示：z-index的特性如下: 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位 z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。 ...

2021-10-14 01:14:53 874

原创 CSS定位

将盒子「定」在某一个「位」置自由的漂浮在其他盒子(包括标准流和浮动)的上面。所以，我们脑海应该有三种布局机制的上下顺序????????标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移在 CSS 中，通过top、bottom、left和right属性定义元素的「边偏移」：（方位名词）边偏移属性示例描述 top t...

2021-10-13 19:11:58 73

原创 CSS属性书写顺序

建议遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white- space

2021-10-07 12:52:43 57

原创 CSS浮动

「1. CSS布局的三种机制」网页布局的核心——就是用CSS来摆放盒子。CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：A. 普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em等 B. 浮动让盒子从普通流中浮起来

2021-10-07 12:37:34 106

原创 CSS盒子模型

css学习三大重点：css 盒子模型、浮动、定位网页布局的本质首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。网页布局的本质：就是利用CSS摆盒子 1. 盒子模型(Box Model) 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里...

2021-10-06 10:02:39 154

原创 CSS三大特性

「1. CSS 层叠性」-概念：所谓层叠性是指多种CSS样式的叠加是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 -原则：-注意：样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠「2. CSS 继承性」 -概念：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性.

2021-09-25 09:13:11 79

原创 CSS背景

「1. 背景颜色」background-color:颜色值;默认的值是transparent透明的「2. 背景图片(image)」语法：background-image:none|url(url);例如:background-image:url(images/1.png);「3. 背景平铺（repeat）」background-repeat:repeat|no-repeat|repeat-x|repeat-y参数作用...

2021-09-23 22:01:24 64

原创 CSS元素显示模式

标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。「1. 块级元素(block-level)」常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。块级元素的特点独占一行高度，宽度，外边距以及内边距都可以控制。宽度默认是容器(父级

2021-09-23 06:08:06 56

原创 CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等「1. 后代选择器」又称为包含选择器用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲爷爷，再写儿子孙子。子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。父级子级{属性:属性值;属性:属性值;}.class h3 {color:red;font-size:

2021-09-21 11:03:57 307

原创 Chrome调试工具

1.打开调试工具打开Chrome浏览器，按下 F12键或者右击页面空白处点击检查2.使用调试工具① ctrl+滚轮可以放大开发者工具大小。②左边是HTML元素结构，右边是CSS样式。③右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色④ctrl+0复原浏览器大小。⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。...

2021-09-21 08:55:23 336

原创引入CSS样式表

「1.行内式(内联样式)」通过标签的style属性来设置元素的样式 style其实就是标签的属性样式属性和值中间是: 多组属性值直接用;隔开只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。缺点:没有实现样式和结构相分离。 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>例如：<div style="color: red; font-size

2021-09-20 16:51:41 259

原创 CSS字体样式

「1. font-size」 font-size属性用于设置字号(字体大小) 谷歌浏览器默认的文字大小为16px 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。 p { font-size:20px; } 单位相对长度单位、绝对长度单位「2. font-family」 font-family属性用于设置哪一种字体。 p { font-family:"微软雅黑.

2021-09-20 16:02:50 150

原创 CSS文本属性

「1. color」color属性用于定义文本的颜色其取值方式有以下3种：实际工作中，用16进制的写法是最多的，且我们更喜欢简写方式比如#f0代表红色。表示表示属性值预定义的颜色值 red，green，blue，pink 十六进制 #FF0000，#FF6600，#29D794 RGB代码 rgb(255,0,0)或rgb(100%,0%,0%) 「2.text-align」text-align属性用于设置文本内容的水平对齐方式，相当.

2021-09-20 15:49:39 166

原创 CSS简介

「1. HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐「2. CSS网页的美容师」让我们的网页更加丰富多彩，布局更加灵活自如。 CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS 「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样

2021-09-20 10:35:44 205

原创 HTML表单标签

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。1.表单控件(表单元素)：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。「1. input 控件」<inputtype="属性值"value="你好"> input 输入的意思 <input />标签为单标签 type属性设置不同的属性值用来指定不同的控件类型 ...

2021-09-20 06:46:14 169

原创 HTML表格标签用法

1.表格的含义：现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。2.表格的基本语法：<table><tr><td>单元格内的文字</td>...</tr>...</table> table用于定义一个表格标签。...

2021-09-19 07:11:13 1034

空空如也

空空如也