前端
文章平均质量分 86
爱前端的杨同学
你好棒!我也是
展开
-
外边距合并出现bug的两种情况
当上下相邻的两个块级元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则它们之间的垂直间距不是margin-bottom和margin-top之和。对于两个嵌套关系(父子关系)的块级元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。(3)可以为父元素添加 overflow:hidden。尽量只给一个盒子添加margin值。(2)可以为父元素定义上内边距。(1)可以为父元素定义上边框。原创 2022-08-22 21:52:14 · 307 阅读 · 4 评论 -
Web APIs第02天笔记——排他思想、自定义属性操作、节点操作
/ 1. 获取元素的属性值 // (1) element.属性 console . log(div . id);//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console . log(div . getAttribute('id'));自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。............原创 2022-08-14 09:26:23 · 429 阅读 · 2 评论 -
Javascript函数课后练习
/1.写一个函数,用户输入任意两个数字的任意算术运算(简单的计算器小功能),并能弹出运算后的结果。//写一个函数,用户输入一个数判断是否是素数,并返弹出回值(又叫质数,只能被1和自身整数的数)//3.写一个函数,用户输入任意三个不同数字的最大值,并能弹出运算后的结果。//varnum1=prompt('请您输入第一个数')//只能写在外面。//varnum2=prompt('请您输入第二个数')//只能写在外面。'请输入第一个数''请输入第二个数'......原创 2022-07-27 19:08:31 · 326 阅读 · 2 评论 -
小组项目——简易ATM机
输入有误,请重新输入''请输入您要的操作''请您输入存的钱数''请您输入取的钱数''余额不足,请选择''您现在的钱数是'原创 2022-07-24 15:50:05 · 232 阅读 · 1 评论 -
JavaScript基础第04天笔记——数组、函数
虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数。函数内部可以调用另一个函数,在同一作用域代码中,函数名即代表封装的操作,使用函数名加括号即可以将封装的操作执行。把数组中的每个元素从头到尾都访问一次(类似学生的点名),可以通过for循环索引遍历数组中的每一项。数组可以通过索引来访问、设置、修改对应的数组元素,可以通过“数组名[索引]”的形式来获取数组中的元素。函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。......原创 2022-07-24 14:34:31 · 136 阅读 · 0 评论 -
javascript循环课后练习
1.求1-100之间所有数的总和与平均值 2.求1-100之间所有偶数的和 3.求100以内7的倍数的总和 4、使用for循环打印矩形,要求每次只能输出一个☆ 5.使用for循环打印三角形 6.使用for循环打印99乖法表 7.接收用户输入的用户名和密码,若用户名为"admin",密码为"123456",则提示用户登录成功!否则,让用户一真输入。 8.求整数1 ~100的累加值,但要求跳过所有个位为3的数【用continue实现】. ...原创 2022-07-24 13:24:08 · 935 阅读 · 2 评论 -
Javascript流程控制课后练习
1.判断时间阶段。比如用户输入12点 弹出中午好;用户输入18点 弹出傍晚好;用户输入23点 弹出深夜好。2.比较两个数的最大值 (用户依次输入2个值,最后弹出最大的那个值) 3.用户输入一个数,来判断是奇数还是偶数 4.根据用户输入的数值(数字1到数字7),返回星期几 5.接收班长口袋里的钱数?若大于等于2000,请大家吃西餐。若小于2000,大于等于15 6.分数转换给一个分数,判定等级。大于等于90 A,大于等于80小于90 B,大于等于70小于80 C,大于等于60小于70D,小于60E原创 2022-07-24 13:08:23 · 1221 阅读 · 0 评论 -
JavaScript基础第03天笔记——循环
for循环、什么是断点调试、断点调试的流程、双重for循环、 while循环、do-while循环、continue、break、代码规范、标识符命名规范、操作符规范内层循环可以看做外层循环的循环体语句 - 内层循环执行的顺序也要遵循 for 循环的执行顺序 - 外层循环执行一次,内层循环要执行全部次数循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双重for循环。...原创 2022-07-19 17:56:35 · 93 阅读 · 0 评论 -
JavaScript基础第02天笔记——运算符(操作符)、流程控制
概念比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。后面开发中经常用于多个条件的判断。.........原创 2022-07-17 18:57:53 · 96 阅读 · 0 评论 -
JavaScript基础第01天笔记——编程语言、计算机基础、JavaScript注释、JavaScript输入输出语句、变量的概念、变量的使用、数据类型、解释型语言和编译型语言、关键字和保留字
计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。计算机语言的种类非常的多,总的来说可以分成,和三大类。实际上计算机最终所执行的都是,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。简单数据类型、+ 号总结口诀:数值相加 ,字符相连、获取变量数据类型、数据类型转换、标识符 、什么是数据类型转换? `使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。`通俗来说,就是把一种数据类型的变量转换成另原创 2022-06-27 16:52:36 · 184 阅读 · 2 评论 -
移动端WEB开发之响应式布局笔记
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。父容器版心的尺寸划分但是我们也可以根据实际情况自己定义划分Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它原创 2022-06-27 13:53:49 · 125 阅读 · 0 评论 -
移动web开发之rem布局笔记
rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。媒体查询(Media Query)是CSS3新语法。mediatype 查询类型 将不同的终端设备划分成不同的类型,称为媒体类型原创 2022-06-27 13:45:43 · 93 阅读 · 0 评论 -
移动web开发——flex布局
总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的。4.0 flex布局子项常见属性flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序(前后顺序)4.1 flex 属性flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。4.2 align-self控制子项自己在侧轴上的排列方式align-self 属性允许单个项原创 2022-06-27 13:24:57 · 124 阅读 · 0 评论 -
移动web开发流式笔记——浏览器现状、手机屏幕的现状、常见移动端屏幕尺寸、移动端调试方法、视口、二倍图、移动开发选择和技术解决方案、移动端常见布局
PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。视口(viewport)就是浏览器显示页面内容原创 2022-06-27 12:54:47 · 318 阅读 · 0 评论 -
HTML5第三天总结——`3D` 转换、透视 `perspective`、 `translateZ`、`3D` 旋转`rotate`、`3D` 呈现 `transform-style`
1. `3D` 的特点 - 近大远小 - 物体和面遮挡不可见1. `3D` 转换知识要点 - `3D` 位移:`translate3d(x, y, z)` `3D` 旋转:`rotate3d(x, y, z)` 1. `translateZ` 与 `perspecitve` 的区别 - `perspecitve` 给父级进行设置,`translateZ` 给 子元素进行设置不同的大小2. 左手准则 - 左手的拇指指向 y 轴的正方向 - 其余的手指弯曲方 ..原创 2022-06-27 12:40:27 · 690 阅读 · 0 评论 -
行内块(inline-block)并排影响布局
demo效果图当四个div都有内容时,并排显示正常。当第二个、第四个div没有内容时,惊讶的显示为如下效果:问题剖析 display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确的说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性) 但有一点需要注意的是:图片文字等内联元素默认的对齐方式是和父级的baseline进行对齐的。解决方法1、简单粗暴的给所有元素都加上内容原创 2022-06-27 12:06:43 · 318 阅读 · 0 评论 -
HTML5 第二天总结———rotate、设置元素旋转中心点(transform-origin)、2D 转换之 scale、鼠标经过图片放大案例、动画(animation)、动画序列、动画常见属性
案例:css书写三角——鼠标经过div 里面的三角旋转、分页按钮案例、 `2D` 转换综合写法以及顺序问题、 `scale` 的作用 - 用来控制元素的放大与缩小 ```css transform: scale(x, y) ```3. 知识要点 - 注意,x 与 y 之间使用逗号进行分隔 - `transform: scale(1, 1)`: 什么是动画、动画的基本使用、语法格式(定义动画)、 语法格式(使用动画)、速度曲线细节1. 速度曲线细节......原创 2022-06-11 23:51:47 · 2430 阅读 · 0 评论 -
HTML5 & CSS3 笔记——HTML5新特性、多媒体标签、视频标签、音频标签、新增的表单元素、CSS3新特性、CSS3 新增选择器、盒子模型、 CSS3 过渡
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的发展到了HTML5后,新增了一些语义化标签,这样的话更加有利于浏览器的搜索引擎搜索,也方便了网站的seo(Search Engine Optimization,搜索引擎优化),下面就是新增的一些语义化标签多媒体标签分为 音频 au原创 2022-06-09 23:34:42 · 199 阅读 · 0 评论 -
html+css 实现导航栏二级菜单——气泡框
HTML+CSS 实现二级菜单气泡框原创 2022-06-07 23:25:31 · 2398 阅读 · 1 评论 -
VSCode(Visual Studio Code )软件(插件)安装与使用
Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT 等特性,支持插件扩展等等。推荐理由:比 sublime 开源,比 webstorm 更轻智能提示很强大自带 emmet插件安装非常方便自带强大的调试功能软件跨平台支持 Win、Mac 以及 Linux。官网下载地址: https://code.visualstudio.com/安装步骤:傻瓜式安装,直接下一步即可。放原创 2022-06-06 09:31:55 · 4834 阅读 · 0 评论 -
CSS第七天总结——精灵图、字体图标、CSS 三角、CSS 用户界面样式、vertical-align 属性应用、溢出的文字省略号显示 、常见布局技巧、CSS 初始化
精灵图(sprites)的使用、字体图标的优点、字体图标的下载、字体图标的引入、字体图标的追加、字体图标加载的原理、案例:京东三角、什么是界面样式、鼠标样式 cursor、轮廓线 outline、 防止拖拽文本域 resize、图片、表单和文字对齐、解决图片底部默认空白缝隙问题、多行文本溢出显示省略号、 margin负值运用...原创 2022-06-05 23:35:01 · 154 阅读 · 0 评论 -
CSS第六天总结——定位(position)、综合案例:学成在线-hot 模块添加、网页布局总结、元素的显示与隐藏
为什么使用定位、定位组成、子绝父相、综合案例:学成在线-hot 模块添加、定位(position)的应用、堆叠顺序(z-index)、绝对定位的盒子居中、定位特殊特性(脱标的盒子不会触发外边距塌陷,绝对定位(固定定位)会完全压住盒子)、display 显示(重点)、visibility 可见性 、overflow 溢出(重点)、显示与隐藏总结...原创 2022-05-21 22:08:36 · 432 阅读 · 0 评论 -
CSS第五天总结——PS切图、CSS属性书写顺序
1. PS 切图1.1. 常见的图片格式序号格式特点和常用的用途1jpgJPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片 经常用jpg格式的2gifGIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果3pngpng图像格式,是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景. 如果想要切成 背景透明的图片 ,请原创 2022-05-21 21:01:42 · 208 阅读 · 0 评论 -
HTML5 第一天——html5新增标签、多媒体音频标签、多媒体视频标签、新增 input 标签、新增表单属性、CSS3 属性选择器、结构伪类选择器
html5新增标签、多媒体音频标签、多媒体视频标签、新增 input 标签、新增表单属性、CSS3 属性选择器、结构伪类选择器、nth-child和nt-of-type的区别、伪类选择器、伪类元素的案例、2D转换之translate、translate语法、如何让一个盒子水平居中、2D转换rotate...原创 2022-05-20 19:54:10 · 103 阅读 · 0 评论 -
CSS第四天总结——CSS其它样式、浮动、常见网页布局、清除浮动、PS切图
一、其他样式1、圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角分开写:border-top-left-radius、border-top-right-r原创 2022-05-20 18:44:20 · 92 阅读 · 0 评论 -
CSS第三天总结——CSS的三大特性、盒子模型、PS基本操作
一、css三大特性1、层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2、继承性 CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。子元素可以继承父元素的样式: (text-,font-,line-这些元素开头的可以继承,以及color属性原创 2022-05-20 17:54:36 · 97 阅读 · 2 评论 -
CSS第二天总结——emmet语法、CSS的复合选择器、CSS的显示模式、CSS的背景
一、emmet语法1、简介 Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。 快速生成HTML结构语法 快速生成CSS样式语法2、快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div如果有父子级关系的标签,可以用 > 比如 ul原创 2022-05-18 23:58:18 · 148 阅读 · 0 评论 -
设计一个图像画廊,采用无序列表加载五副图像,并利用marquee标记实现五副图像从右向左交替滚动显示。
设计一个图像画廊,采用无序列表加载五副图像,并利用marquee标记实现五副图像从右向左交替滚动显示。代码如下:<!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> &l原创 2022-05-18 22:17:28 · 2155 阅读 · 0 评论 -
CSS第一天总结——CSS选择器、CSS字体属性、CSS文本属性
css简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。CSS 最大价值: 由 HTML 专注去做结构呈现原创 2022-05-15 16:23:37 · 365 阅读 · 0 评论 -
HTML总结笔记(第二天)——列表、表单
列表总结无序列表有序列表自定义列表下面是各标签的说明:表单现实中的表单:为什么需要表单:使用表单目的是为了收集用户信息。在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。表单的组成:在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。表单域:表单域是一个包含表单元素的区域。在 HTML 标签中, <form> 标签用于定义表单域,以实现用户信息的收集和传递。<form原创 2022-05-07 23:49:46 · 141 阅读 · 0 评论 -
HTML+CSS实现淘宝轮播图效果——详细注解
HTML+CSS实现轮播图效果效果图如下(想要源码或者感兴趣的小伙伴可以评论区留言哦!)HTML部分代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid原创 2022-05-01 15:14:17 · 5853 阅读 · 9 评论