自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(45)
  • 收藏
  • 关注

原创 WEB APIs day6

console.log(/^哈+$/.test('二哈很傻')) // false。console.log(/^哈+$/.test('哈很傻')) // false。console.log(/^哈+$/.test('哈很哈')) // false。console.log(/^哈*$/.test('哈很傻')) // false。console.log(/^哈*$/.test('哈很哈')) // false。$/.test('哈很哈')) // false。

2023-09-03 23:29:38 196

原创 WEB APIs day5

BOM属于window对象bom里面包含着dom,只不过bom我们平时用得比较少,我们经常使用的是dom操作,因为我们页面中的这些标签都是在dom中取的,所以我们操作dom多一点。window对象里面dom是核心(document object model),当然window对象里面除了dom对象之外还有很多其它很多对象(如navigator(显示你用的什么浏览器的),location(location有很多的方法,比如说我们的可以通过js的形式跳转页面,下载xx的时候不用写个a,写一个普通盒子就行

2023-08-21 20:08:51 273

原创 WEB APIs day4 (2)

四、JS插件在M端做轮播图非常麻烦,为了节省事件,我们一般都是用的JS插件去完成然后直接在demos 里面打开序号30 的就可以了样式复制完就复制结构,然后再复制js游乐园案例第一步引入,一定要将min.js,min.css放在游乐园(FC)的目录下,不能乱放。复制过来的css代码就不放index.css里面了,直接放在这里,如果要放也是放在less里面,index.css是通过less来写的。把结构复制粘贴到banner盒子里面去。js一定要放在引用的swiper下面,因为这样才能实

2023-07-28 22:58:19 345 1

原创 WEB APIs day4 (1)

2.日期对象方法3.时间戳二、节点操作以前通过querySelector来获取节点,不仅要获取父节点,还要获取子节点;现在是通过关系来查找节点。可以让querySelector更少。接下来要讲的节点默认是元素节点,因为其它节点不常用。学成在线案例渲染以前我们是通过循环写小li的方式实现的多个小li4. 删除节点

2023-07-18 15:21:51 463

原创 WEB APIs day3 (2)

元素滚动事件页面尺寸事件4.元素尺寸与位置这样就能得到距离左侧,顶部的距离了。(靠自己算算不准,所以采用js更加靠谱)学了offset之后,页面滚动大于300px再显示就不科学了,我们要让它在出现那个盒子顶部之后就开始显示导航栏 这样一来这个盒子上面的盒子再加或者再减都没有影响了不用console.log直接在控制台检测效果也行电梯导航改动的相关代码因为-80~0有过渡效果,所以是滑下来的知道需求之后,我们来写js,手动的把.header的top改成-8

2023-07-13 11:58:45 124

原创 WEB APIs day3 (1)

css伪类选择器checked二、DOM事件进阶第三个参数我们通常是省略的,很少去使用,我们了解一下就行了。默认是false,false就是冒泡。有些浏览器,如ie浏览器,是不支持捕获的,所以就没有。(3)事件冒泡回调函数的第一个参数就是事件对象解绑事件分两种我们都知道函数是一个对象,给它赋值一个空对象,就把原先的给覆盖掉了2. 事件委托阻止默认行为发生

2023-07-13 11:56:59 121

原创 WEB APIs day2

一旦绑定后,这个函数不会立即执行的,事件什么时候触发什么时候执行(2)随机点名案例(3)随机点名案例解惑1.2 扩展阅读-事件监听版本2. 事件类型(1)鼠标事件函数可以复用,我们可以把相同的代码抽取出来做成一个函数,左右两侧按钮下面渲染的过程一模一样,没必要写两遍(2)焦点事件(3)键盘事件,文本事件(4)综合案例想要的效果:一输入,下面就会显示字数,而且随着输入字数的大小而改变综合案例3.事件对象只有事件第一个参数才会作为事件对象,这个例子它很特殊,它

2023-04-23 13:19:43 129

原创 WEB APIs day1

变量值是基本数据类型的如果变化就不可以用const,变量值是复杂数据类型(数组,对象)的如果变化就可以用const声明变量。比如说数组,栈里面存的是地址,堆里面存的是变量值,当变量值变的时候,地址和这个数组整体没变,只是数组里面的元素变化了。对象发生变化的时候就会报错,因为它的地址发生了变化,而且重新开辟了一个新的数组。只要地址不变就不会报错,数组如此对象也同理。虽然在html里面是标签,但是通过js拿过来,在DOM树里面都是都是对象四、操作元素属性(2)操作元素样式属性行

2023-04-13 20:04:02 94 4

原创 js基础day5

删了解一下即可,因为最新的语法严格格式里面,删是不允许这么直接去删的3.遍历对象4.内置对象笔记里面的综合案例扩展-术语解释简单数据类型里面存的是值,复杂数据类型里面存的是地址,复杂数据类型的结果存在堆里面(js里面其实没有堆和栈,我们只是借助来理解)

2023-04-05 13:42:53 206

原创 js基础day4

3.函数传参4.函数返回值5.作用域结果:123结果: 4 ‘22’6.匿名函数2.匿名函数之立即执行函数二、综合案例三、逻辑中断pc端移动端四、转换为布尔型字符串只有空字符串为假,其余为真;数字只有0为假,其余为真

2023-03-29 23:06:59 139

原创 js基础day3

3.显示转换鼠标放到变量名上面vscode会自动提示是什么类型,可以不用typeof去测二、实战案例三、常见错误1.2.一元运算符3.比较运算符一般情况下,我们小数参与运算,先把小数转换成整数进行运算,因为小数会有精度问题4.逻辑运算符5.运算符优先级if双分支语句if多分支语句三元运算符表达式与语句最大的区别在于表达式可以取值switch语句七、循环语句在js中语句分为顺序语句、分支语句、循环语句(2)while循环ctrl+a

2023-03-18 17:16:21 85

原创 js基础day2

js变量,常量,数据类型

2023-03-09 16:05:50 102

原创 js基础day1

javascript简介和体验

2023-03-07 09:51:37 78

原创 vw和vh

下载像素大厨这是750的设计稿,但是我们在做vw,vh的时候是按视口来做的(viewport)二倍图。

2023-03-04 23:30:21 134

原创 阿里百秀首页案例

阿里百秀首页案例

2023-03-03 20:07:59 1396

原创 移动WEB开发之响应式布局

bootstrap

2023-02-28 17:58:17 444

原创 PS安装慕客协作平台插件

PS安装慕客协作平台插件

2023-02-25 16:29:52 353 2

原创 day18(续)PC端品优购项目

原型图logo seo优化css1.index.csscommon.css3.base.css九、品优购列表页制作css1.list.css2.common.css3.base.css十、品优购注册页制作

2023-02-25 15:58:31 158

原创 移动端布局项目-黑马面面项目

swiper根据需求定制第一个silde。swiper根据需求定制左右箭头。swiper的基本使用。设置基准值为37.5。下载swiper插件。

2023-02-24 15:19:27 744

原创 利用git提交文件到码云

首先创建仓库[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMVgqfnF-1677114034921)(C:\Users\girlAdmin\AppData\Roaming\Typora\typora-user-images\image-20230222202112874.png)]

2023-02-23 09:50:16 140

原创 HTML5+CSS3基础+移动端(day23)

3. 媒体查询语法简介4. 媒体查询案例背景变色5. 媒体查询+rem实现元素动态大小变化6. 媒体查询引入资源7. CSS的弊端8. LESS简介以及使用变量less介绍my.lessnest.lesscount.lessstyle320.cssstyle640.cssrem适配方案技术使用(市场主流)normalize.cssindex.cssjs: flexible.jscommon.lessindex.lessnormalize.css

2023-02-12 22:36:46 89

原创 HTML5+CSS3基础+移动端(day22)

9. 移动端开发选择10. 移动端技术解决方案11. 移动端特殊样式12. 移动端技术选型13. 流式布局14. 京东移动端首页(1)准备工作(2)body设置(3)app布局(4)app内容填充(5)搜索模块布局(6)搜索模块内容制作(7)二倍精灵图的做法(8)焦点图制作(9)品牌日模块制作(10)导航栏nav模块制作(11)新闻快报模块(12)京东移动端首页结束1.css(1)normalize.css(2)index.csshtmlindex.htm

2023-02-08 22:59:12 168

原创 清除浮动的方法

浮动起来的元素会脱离标准流,如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷,就会影响下面盒子的正常显示。border;margin;/* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子 */.damaowidth;height;;float;height;;float;;

2023-02-07 23:39:01 49

原创 HTML5+CSS3基础+移动端(day21)

搭建HTML结构6. 综合案例-旋转木马案例7. 浏览器私有前缀以及总结二、移动端开发1. 移动WEB开发流式布局导读2. 移动端基础3. 视口4. meta视口标签

2023-02-05 23:27:39 75

原创 HTML5+CSS3基础(day20)

(1)图片放大案例(2)分页按钮案例4. 2D转换综合写法以及顺序问题5. 2D转换小结二、CSS3动画1.CSS3动画基本使用2.动画序列3.CSS3动画常见属性4.CSS3动画简写5.大数据热点图案例6.速度曲线之steps步长7.奔跑的熊大案例三、CSS3 3D转换1.认识3D转换2. 3D转换translate3d3.透视perspective4.translateZ5. 3D旋转rotate(2)3D旋转rotateY(3)3D旋转ro

2023-02-05 00:23:25 87

原创 HTML5+CSS3基础(day19)

//* 移动盒子的位置:定位 盒子的外边距 2d转换移动 */divwidth;height;;/* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔 */*/*//* 1.只移动x坐标 */*/*//* 2.只移动y坐标 */*/*/transformtranslate;;

2023-02-02 22:31:06 62

原创 HTML5+CSS3基础(day18)

font-style;;width;height;border;div::after/* 定位 */position;top;right;'icomoon';*//* 加\转义字符转义一下 */content。

2023-01-31 22:35:28 57

原创 HTML5+CSS3基础(day17)

二、HTML5和CSS3提高1.HTML5和CSS3提高导读2.HTML5(1)HTML5提高-新增语义化标签示例(2)HTML5新增视频标签示例(3)HTML5新增音频标签示例(4)HTML5新增input表单示例(5)HTML5新增表单属性示例3.CSS3(1)CSS3新增属性选择器示例(2)CSS3新增结构伪类选择器-选择第n个元素示例(3)CSS3新增nth-child选择器(4)CSS3新增nth-of-type选择器示例(5)nth-c

2023-01-23 00:01:12 91

原创 HTML5+CSS3基础(day16)

height;;;;.box2width;height;border;;margin;width;height;;right;top;width;height;/* 为了照顾兼容性 */;font-size;border;;

2023-01-19 23:39:23 67

原创 HTML5+CSS3基础(day15)

title > 显示隐藏元素之display < style > .peppa {} < body > < div class = " peppa " > 佩奇 < div class = " george " > 乔治 显示隐藏元素之display < style > .peppa {

2023-01-18 23:00:11 246

原创 HTML5+CSS3基础(day14)

title > 定位的堆叠顺序 < style > .box {top : 0;left : 0;top : 50px;

2023-01-17 23:52:07 49

原创 HTML5+CSS3基础(day13)

14.清除浮动总结

2023-01-17 00:26:17 134

原创 HTML5+CSS3基础(day12)

title > 什么是浮动 < style > .left,.right {} .right {} < body > < div class = " left " > 左青龙 < div class = " right " > 右白虎 什么是浮动 < style > .left,.right {

2023-01-08 23:41:05 67

原创 HTML5+CSS3基础(day11)

* 这个盒子有高度 如果再指定一个padding-top会撑大盒子 所以我们考虑用margin就不用去减去盒子的高度 *//* 如果给一个盒子不制定宽度,则默认跟他父亲的宽度一样,这里h的父亲是body body是浏览器的宽度 *//* p没有指定宽度,默认和父亲一样宽 有了padding p标签还是300*60像素 *//* 有一个父盒子有一个子盒子,父元素子元素都有上外边距,父元素就会塌陷 *//* 只要设定了宽度,不管多少,都会因为padding改变 */

2023-01-07 23:30:25 84

原创 HTML+CSS基础(day10)

* 盒子的宽度因为padding撑开了30px,所以我们把宽度减去30px *//* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1,1 *//* 我们需要一个200*200的盒子,但是这个盒子有10像素的红色边框 *//* 请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色 *//* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 *//* 如果有10个标签选择器,那么它的权重是0,0,0,10 *//* border-color 边框的颜色 */

2023-01-06 23:25:05 80

原创 HTML5+CSS3基础(day9)

title > 综合案例-五彩导航 < style > .nav a {*/ /* 行高改成48 因为小尖角占了一定高度,使文字看起来靠下 */ line-height : 48px;-- a{五彩导航}*5 -->

2023-01-05 22:59:13 73

原创 HTML5+CSS3基础(day8)

title > 元素显示模式的转换 < style > a {/* 把行内元素a 转换为块级元素 */ display : block;} div {/* 把div 块级元素 转换为 行内元素 */ display : inline;} span {

2023-01-04 23:45:18 65

原创 HTML5+CSS3基础(day7)

title > 显示模式之行内元素 < span > < style > span {/* 行内元素宽、高直接设置是无效的 */ width : 100px;-- 默认宽度是它本身内容的宽度 --> < span > 爱情就像水痘 < strong > 你该早点经历 < span > 因为晚几年的话 < strong > 它真有可能会要了你的命

2023-01-03 23:39:39 81

原创 HTML5+CSS3基础(day6)

< title > 新闻页面 < style > body {} h1 {/* 文字不加粗 */ font-weight : 400;/* 让h1里面的文字水平居中对齐 */ text-align : center;} .gray {} a {} .btn {} p {/* 首行缩进2个字的距离 */ text-indent : 2em;} .pic {

2023-01-02 19:44:42 171

原创 HTML5基础(day5)

title > css文本外观属性之颜色 < style > div {} < body > < div > 我们在春风秋雨里无话不说,却在春去秋来里失去了联络 css文本外观属性之颜色 < style > div {

2023-01-01 23:32:36 73

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除