SHoadgnaw-CSDN博客

原创前端学习记录27-JavaScript-(作用域、预解析、自定义对象)

前端学习记录27-JavaScript-作用域、预解析、自定义对象作用域全局作用域局部作用域(函数作用域)变量作用域全局变量局部变量作用域链预解析变量预解析函数预解析预解析经典面试题对象创建自定义对象的三种方式字面量创建对象利用 new Object 创建对象利用构造函数创建对象new关键字遍历对象变量、属性、函数、方法的区别变量和属性函数和方法作用域(变量)通常来说，一段代码所用到的名字并不是总有效可用限定这个名字的可用性代码范围就是这个名字的作用域提高了程序逻辑的局限性，增强程序可靠性，减少名

2021-04-13 20:18:23 171

原创前端学习记录26-JavaScript-函数

前端学习记录26-JavaScript-函数函数函数使用函数的两种声明方式函数封装函数的返回值break,continue,return 的区别参数形参和实参不匹配问题arguments使用使用函数翻转数组判断一个数是否为素数函数js中可能会定义非常多相同或相似的代码，重复使用虽然for循环可实现简单的重复操作，但是有局限性，此时需要函数函数就是封装了一段可被重复执行调用的代码块函数使用分为两步声明函数和调用函数1.声明函数 function 函数名(){ 函数体 }函数名

2021-04-13 18:31:09 352

原创前端学习记录25-JavaScript-数组

前端学习记录25-JavaScript-数组数组创建数组利用new创建数组利用数组字面量创建数组数组排序数组Array 数组可以把一组相关的数据一起存放，并提供方便的访问方式数组就是一组数据的集合每个数据叫要素在数组中可存放任意类型元素可以存储在单个变量下多个元素的方式创建数组利用new创建数组 var 数组名= new Array(); var arr = new Array();利用数组字面量创建数组 var 变量名=[];数组中的数据需要,分隔数组排序冒泡排序外层循

2021-04-13 18:15:51 171

原创前端学习记录24-JavaScript-循环结构

前端学习记录23-JavaScript-循环结构循环结构for循环双重for循环while循环do...while循环continue和break打印9X9乘法表打印正三角形打印n行n列星星简易ATM机循环结构for循环for循环重复执行某些代码跟计数有关系语法结构 for(初始化变量;条件表达式;操作表达式){ 循环体 }初始化变量就是用var声明的一个普通变量通常用于作为计数器使用条件表达式终止条件操作表达式每次循环最后执行的代码用于计数器变量更新(递增或递减)

2021-04-13 18:04:36 316

原创前端学习记录23-JavaScript-(运算符、分支结构)

前端学习记录23-JavaScript-运算符、分支结构运算符(操作符)算数运算符递增递减运算符比较运算符(关系运算符)逻辑运算符(布尔运算符)短路运算(逻辑中断)赋值运算符三元表达式运算符优先级流程控制分支结构if分支结构switch分支结构switch和if的区别判断闰年运算符(操作符)算数运算符+ - * / %浮点数计算会有精度问题console.log(0.1 + 0.2); //0.30000000000000004console.log(0.07 * 100); //7.00000

2021-04-13 16:18:11 147

原创前端学习记录22-JavaScript-(变量、数据类型)

前端学习记录22-JavaScript-变量变量的使用变量语法规范标识符关键字保留字变量存放数据的容器通过变量名获取数据本质:程序在内存中申请一块存放数据的空间 var username = '海浪'; var address = 'wave'; var age = 21; var email = 'wave@163.co var money = '20k'; console.log(username); console.log(address

2021-04-13 15:04:09 112

原创使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面

使用Bootstrap框架-实现响应式页面开源案例-阿里百秀tips在不同设备中显示的样式页面布局思路htmlcsstips这个页面里的图片忒难看，实际可以换一换在不同设备中显示的样式页面布局思路响应式页面开发方案bootstrap框架设计图采用1280px设计尺寸屏幕划分分析因为中屏和大屏布局一致所以列定义为col-md-就可以了小屏幕布局发生变化所以小屏幕需要根据需求改变布局超小屏布局也发生变化所以超小屏也要根据需求改变布局先布局md以上的pc端布局在根据需求修改小

2021-04-12 22:46:03 941

原创前端学习记录21-移动端布局-(响应式布局、Bootstrap框架)

前端学习记录21-移动端布局-响应式布局、Bootstrap框架响应式布局原理bootstrap开发框架(说实话也不叫框架)bootstrap使用方法bootstrap布局容器bootstrap响应式工具bootstrap栅格系统bootstrap栅格系统列偏移bootstrap栅格系统列排序bootstrap栅格系统列嵌套响应式布局响应式开发是使用媒体查询针对不同的宽度设备内进行布局和样式的设置，从而适配不同的设备在bootstrap中的设备划分超小屏幕 <768px小平设备 >=

2021-04-12 22:35:09 641 5

原创使用两种rem布局方案-实现静态苏宁易购移动端首页

使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js方案1:rem+less+媒体查询跟其他页面不同的文件，需要新建common.less文件用媒体查询设置不同的html字体大小因为除了首页其他页面也要尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px

2021-03-29 03:11:15 2634 3

原创前端学习记录20-移动端布局-(rem布局、媒体查询、less使用、颜色渐变实现)

前端学习记录20-移动端布局-rem布局、媒体查询、less使用、颜色渐变实现rem布局rem适配方案rem实际开发适配方案媒体查询媒体查询(引入资源)媒体查询+rem实现元素动态变化lessless嵌套问题less运算问题颜色渐变线性渐变rem布局root em 是一个相对单位，类似于em，em相对是父元素的字体大小rem的基准是相对于html元素的字体大小比如，根元素(html)设置font-size:12px;非根元素设置width:2rem;则转成px表示就是24px;优点:可以通过修改h

2021-03-29 02:56:11 383

原创使用Flex布局-实现静态携程网移动端首页

使用Flex布局-实现静态携程网移动端首页Flex布局思路htmlcssFlex布局思路方案：单独制作移动页面方案技术：flex布局、宽度自适应高度固定html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

2021-03-29 02:34:08 601

原创前端学习记录19-移动端布局-Flex布局

前端学习记录18-移动端布局-Flex布局flex布局原理flex布局父级常见属性align-content和align-items 区别flex布局子级常见属性flex布局原理flexible Box 弹性布局用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局当我们为父级盒子设为flex布局后，子元素的float，clear和vertical-align属性将失效采用flex布局的元素，称为flex容器，简称容器。它的所有子元素自动成为容器成员称为flex项目，简称项目

2021-03-28 19:52:08 84

原创使用百分比布局-实现静态京东移动端首页

使用百分比布局-实现静态京东移动端首页百分比布局(流式布局)小tipshtml代码CSS代码百分比布局(流式布局)通过盒子宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素限制，内容向两侧填充为了保护内容不会出现混乱的问题需要设置max-width: 和 min-width最大宽度和最小宽度小tipsDPG图片压缩技术京东自主研发推出DPG图片压缩技术，该技术，可直接节省用户50%的浏览流量提升了用户的网页打开速度，能够兼容jpeg，实现全平台全浏览器支持，压缩后的图片和webp的清晰

2021-03-28 19:13:10 220

原创前端学习记录18-移动端布局-(基础知识、视口、二倍图、背景缩放、精灵图缩放)

前端学习记录18-移动端布局-基础知识、视口、二倍图、背景缩放移动端常见布局问题移动端技术选型单独制作移动端页面响应式页面移动端技术解决方案盒子模型选择和一些常用样式视口标签(name="viewport")布局视口 layout viewport视觉视口 visual viewport理想视口 ideal viewportmeta视口标签二倍图问题解决方案背景图片二倍图解决方案注意精灵图的问题移动端常见布局问题PC端常见浏览器:360、谷歌、火狐、qq、百度、搜狗、ie移动端常见浏览器：uc、qq、

2021-03-28 19:04:35 519

原创前端学习记录17-CSS3动画-(动画定义、调用、动画属性)

前端学习记录17-CSS3动画-动画定义、调用、动画属性animation(动画)动画序列动画属性keyframes使用与steps()指定步长运动曲线keyframesanimation-timming-function:stpes();(指定步长运动)animation(动画)可通过设置多个节点控制一个或一组动画实现复杂动画效果先定义动画再调用动画使用keyframes定义 (类似定义类选择器)@keyframes 动画名{ 0%{ } 100%{ }}

2021-03-15 15:45:42 126

原创前端学习记录16-CSS3 2D效果-(2D移动、2D旋转、2D缩放)

前端学习记录16-CSS3-2D效果、2D移动、2D旋转、2D缩放transform(CSS3 2D转换)translate(移动)用移动来实现水平垂直居中rotate(旋转)transform-origin(中心点)scale(缩放)综合写法transform(CSS3 2D转换)简单来说是变形移动:translate旋转:rotate缩放:scaletranslate(移动)可以改变元素在页面中的位置类似定位语法：transform: translate(x,y) x轴移动位置，y轴

2021-03-15 15:13:07 379

原创前端学习记录15-CSS3选择器-(属性选择器、伪元素选择器、结构伪类选择器)

前端学习记录15-CSS3选择器-属性选择器、伪元素选择器、结构伪类选择器属性选择器伪元素选择器伪元素创建字体图标结构伪类选择器属性选择器属性选择器的权重高于标签选择器类选择器、属性选择器、伪类选择器权重为10有属性选择器后，在相同内容下有不同的情况可以不用起类名然后修改样式disabled=“disabled” 禁用按钮一般情况是手机接收验证码然后按钮就不让按了选择器语法说明

2021-03-15 13:31:52 202

原创前端学习记录14-HTML5新特性-(语义化标签、多媒体标签、新增表单属性)

前端学习记录14-HTML5新特性-语义化标签、多媒体标签、新增表单属性HTML5新增特性标签语义化多媒体标签音频标签视频标签新增表单属性HTML5新增特性标签语义化<header>头部标签</header><nav>导航标签</nav><article>内容标签</article><section>块级标签</section><aside>侧边栏标签</aside>&lt

2021-03-15 12:47:07 132

原创使用html+css实现-静态开源案例-品优购

使用html+css实现-静态开源案例-品优购设计目标css制作图标规范seo优化网页标题 titledescription 网站说明显示在搜索引擎后方的解释Keywords关键词字体图标引入方法注意搭建整个页面时的路径问题html代码首页(index.html)商品列表页(list.html)商品详情页(detail.html)注册页面(register.html)CSS代码通用css(base.css)公用css(common.css)首页css(index.css)商品列表页css(list.css

2021-03-01 21:37:53 7096

原创前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)

前端学习记录13-CSS-滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transition)获得焦点元素(:focus)滑动门技术在某些地方出现了凹凸样式例如鼠标放在元素上元素凹下去了首页显示为凸起状态微信用的就是这个滑动门技术主要是让背景自由拉伸滑动适应元素内文本内容通过li>a>span来实现a设置左侧背景针对背景图的左对齐显示内容并且需要一定的左内边距通过

2021-03-01 21:12:21 452

原创前端学习记录12-CSS-(垂直对齐，去除图片底侧缝隙，溢出文字处理，外边距为负，制作三角形，精灵技术)

前端学习记录12-CSS-垂直对齐，去除图片底侧缝隙，溢出文字处理，外边距为负，制作三角形，精灵技术垂直对齐vertical-align(检索对象垂直对齐方式)微调方式去除图片底侧空白缝隙vertical-align溢出文字处理white-space(设置文本显示方式)text-overflow(文字溢出)正确解决文字溢出的方法外边距设置为负值负边距+定位(水平垂直居中)压住盒子相邻的边框为什么设定后可以实现而不是出现位置不变的情况通过CSS制作三角形CSS精灵技术垂直对齐有宽度的块级元素使用 ma

2021-02-26 19:14:17 370

原创前端学习记录11-CSS-(元素隐藏，鼠标样式，轮廓线，拖拽)

前端学习记录11-CSS-元素隐藏，鼠标样式，轮廓线，拖拽元素隐藏display(设置或检索对象是否以及如何显示)visibility(可见性)overflow(溢出or滚动条)使用隐藏来制作网页鼠标悬停出现播放按钮效果cursor(鼠标样式)outline(轮廓线)resize(拖拽元素)元素隐藏使用场景：1.网站的广告点x之后就没了2.配合定位有一些鼠标在物体上就显示的小窗口 (下拉菜单特效)3.视频网站上播放视频鼠标移动上去显示一个播放按钮有个浅黑色背景覆盖在视频预览图上4.你想咋用就

2020-07-31 18:24:17 621

原创前端零碎记录1-HTML+CSS-(符号表示方法，img标签，导航，布局溢出，多行文本水平居中)

前端零碎记录1- HTML+CSS -（符号表示方法，img标签，导航，布局溢出，多行文本水平居中）符号表示方法img(插入图片标签)导航菜单布局溢出问题多行文本水平居中符号表示方法语句解释 nbsp 空格 br 换行 lt; 表示小于号 < gt 大于号 > amp 和号 & yen 价格或人民币 ¥

2020-07-31 17:35:10 359

原创使用html+css-实现静态开源案例-学成网

使用html+css实现-静态开源案例-学成网基础开发须知开发系列工具开发流程CSS书写顺序布局流程页面制作小tipshtml代码css样式本文代码与原版的psd文件链接：https://pan.baidu.com/s/1HjnoetxZ_F8HBIUdJt-5cg 提取码：y77t基础开发须知开发系列工具PhotoShop CC2019 事先预览效果作为蓝图Sublime3 编辑器写代码开发Chrome 编译器看效果做测试开发流程1.创建存放工程的文件夹2.创建首页inde

2020-07-17 18:51:36 1254

原创前端学习记录10-CSS(浮动，定位)

前端学习记录10-CSS-浮动CSS摆放盒子方式标准模式标准模式缺点float(浮动)如何实现浮动浮动元素关系解释清除浮动清除浮动方法额外标签法(隔墙法)父级添加overflow属性方法父级使用after伪元素清除浮动父级使用双伪元素清除浮动position(定位)CSS摆放盒子方式标准模式块级元素从上而下例如:div hr p h1-h6 ul ol dl form table行内元素从左到右碰到父元素边缘自动换行例如:span a i em标准模式缺点inline-block 可

2020-07-17 18:23:14 679

原创前端学习记录9-CSS-盒子模型(边框，圆角，内外边距，阴影)

前端学习记录9-CSS-盒子模型（边框，圆角，内外边距，阴影）盒子模型（Box Model）border(边框)border-collapse(控制表格相邻边框合并或独立)border-radius(边框半径) - 圆角样式padding(内边距)margin(外边距)外边距塌陷相邻块元素垂直外边距塌陷嵌套块元素垂直外边距塌陷box-shadow(盒子阴影)居中问题块级元素(block)水平居中对齐文字居中()图片使用以及位置问题内外边距需要注意的问题盒子整体大小的计算（不计算外边距值）盒子模型布局稳定性

2020-07-08 23:51:13 600

原创前端学习记录8-CSS(特性,权重问题)

前端学习记录8-CSS- 特性,权重问题CSS三种特性层叠性(选择器相同)继承性优先级权重划分(优先级特性)特别需要注意的问题权重计算方式(权重叠加)特别需要注意的问题CSS三种特性层叠性(选择器相同)多种CSS样式叠加当浏览器解析时发现同一个选择器出现了相同的样式浏览器会本着就近原则来解决冲突谁跟结构近就用谁简单的来说就是谁后写的用谁当没有冲突的样式时不冲突的样式依然会继续执行div{ color: red; font-size: 50px;}div{ color: bl

2020-07-04 22:52:29 300

原创前端学习记录7-CSS(标签显示模式,背景属性样式)

前端学习记录7-CSS-标签显示模式,背景样式标签显示模式(display)block(块级元素)inline(行内元素)inline-block(行内块元素)显示模式转换背景样式(background)background-color(背景颜色)background-image(背景图片)background-repeat(背景平铺)background-position(背景位置)background-attachment(背景附着)background(背景简写)标签显示模式(display)bl

2020-07-04 17:20:30 226

SHoadgnaw的博客