![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5
进阶H5小白
这个作者很懒,什么都没留下…
展开
-
哄另一半开心的下雨特效
在不下雨的天气,发给另一半这个下雨特效的html文件,她能开心一整天!!!看效果附上源码HTML+CSS代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten原创 2021-12-13 21:19:44 · 398 阅读 · 0 评论 -
H5+JS+CSS模仿JD商品详情页放大镜效果
源码下载:H5+JS+CSS模仿JD商品详情页放大镜效果-Javascript文档类资源-CSDN下载适合小白模仿的H5+JS+CSS模仿JD商品详情页放大镜效果,可以熟练掌握鼠标经过和鼠标移动事件更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_42660453/57211712...原创 2021-12-06 21:30:20 · 703 阅读 · 0 评论 -
学习日记_循环结构
循环结构循环结构,就是根据某些给出的条件,重复的执行同一段代码循环必须要有某些固定的内容组成初始化条件判断要执行的代码自身改变WHILE 循环while,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了语法 while (条件) { 满足条件就执行 }因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了// 1. 初始化条件var num = 0;// 2. 条件判断while (num < 1原创 2021-11-29 21:16:01 · 79 阅读 · 0 评论 -
学习日记_分支结构
分支结构我们的 js 代码都是顺序执行的(从上到下)逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码IF 条件分支结构if 语句通过一个 if 语句来决定代码执行与否语法: if (条件) { 要执行的代码 }通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行// 条件为 true 的时候执行 {} 里面的代码if (true) { alert('因为条件是 true,我会执行')}// 条件为 false 的时候不执行 {} 里面的代码if原创 2021-11-29 21:14:58 · 90 阅读 · 0 评论 -
JavaScript基础语法
JavaScript基础语法HTML :标记语言JavaScript :编程语言序言JavaScript发展历史(JS)1. 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办法,一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。 liveScript ==> javaScript ==> E原创 2021-11-29 21:12:12 · 186 阅读 · 0 评论 -
JavaScript基础语法
JavaScript基础语法HTML :标记语言JavaScript :编程语言序言JavaScript发展历史(JS)1. 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办法,一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。 liveScript ==> javaScript ==> E原创 2021-11-29 21:08:12 · 148 阅读 · 0 评论 -
学习日记——动画animation
Animation-->在这个动画之前,先看Keyframes关键帧,支持animation动画的只有webkit内核的浏览器 CSS中 animation动画 属性 个数 属性 说明 1 animation-name:mymove; 是用来定义一个动画的名称,mymove是由Keyframes创建的动画名 mymove要和Keyfra...原创 2021-11-10 17:15:54 · 65 阅读 · 0 评论 -
学习日记——CSS3中Transition过渡属性
个数 属性 说明 1 transition-property 需要过渡的样式 ,默认是 all 2 transition-duration 运动时间 默认是 0 s 3 transition-delay 延迟时间 默认是 0 s ...原创 2021-11-10 17:13:27 · 72 阅读 · 0 评论 -
学习日记——多列布局
多列布局添加在父元素上的1、column-count:分栏的个数2、column-width:分栏的宽度3、column-gap:分栏的间距4、column-rule:分栏的边框写在子元素上的1、column-span:all/1 合并分栏 2、break-inside:定义页面、列或区域发生中断时候的元素该如何表现 break-inside: auto;元素可以中断。 break-inside: avoid;元素不能中断。...原创 2021-11-10 09:50:56 · 71 阅读 · 0 评论 -
学习日记——响应式布局
响应式的概念响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。Responsive 网页设计不但要考虑其元素布局的秩序,还要做到“有求必应”,因此需要满足三个条件。1、网站必须建立灵活的网格基础;2、引用到网站的图片必须是可伸缩的;3、不同的显示风格,需要在Media Query上设置不同的样式注意:缺少任何一个功能,就不能称为是合格的Respons...原创 2021-11-10 09:38:57 · 102 阅读 · 0 评论 -
学习日记——七种css方式让一个容器水平垂直居中
方法一:position加margin方法二: diaplay:table-cell方法三:position加 transform方法四:flex;align-items: center;justify-content: center方法五:display:flex;margin:auto方法六:纯position方法七:兼容低版本浏览器,不固定宽高总结这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。这种方法比较多,本文只总结其中的几种...原创 2021-11-09 08:42:00 · 203 阅读 · 0 评论 -
学习日记——弹性盒子
Flex容器:采用 Flex 布局的元素的父元素;Flex项目:采用 Flex 布局的元素的父元素的子元素;容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。弹性盒子支持的浏览器原创 2021-11-08 15:44:05 · 82 阅读 · 0 评论 -
学习日记——圣杯布局
需求:就是结构上把center 放在前面写,视觉上还是左中右三栏效果,有哪些方法可以实现目的:是希望页面加载的时候优先加载中间的核心部分,优点,可以让搜索引擎及时抓取到想要表达的核心内容,便于搜索引擎收录特点: 1\独立的3块 2\结构上优先写center 3\所有的盒子都左浮动4\center的宽度设置了100%<style> /* 以下书写出来的就是圣杯布局: */ body{ ...原创 2021-11-03 15:33:06 · 98 阅读 · 0 评论 -
学习日记——BFC
BFC 即 Block Formatting Contexts (块级格式化上下文),通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。原创 2021-11-03 09:59:39 · 106 阅读 · 0 评论 -
学习日记——CSS隐藏的三种方法
Plan1:display:none;彻底隐藏Plan2:visibility:hidden;只是隐藏内容,但是空间还在Plan3:opacity:0;只是隐藏内容,但是空间还在原创 2021-11-01 17:57:20 · 104 阅读 · 0 评论 -
学习日记——解决父元素高度塌陷问题
父元素高度不给,子元素又加了浮动,父元素就会出现塌陷问题解决办法: 父元素div::after{ content:""; clear:both; display:block;}原创 2021-11-01 15:40:48 · 107 阅读 · 0 评论 -
学习日记——CSS清除浮动的8种方法以及优缺点
浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):1,父级div定义 height<style type="text/css">.div1{back...原创 2021-11-01 15:10:23 · 81 阅读 · 0 评论 -
学习日记——CSS吸顶效果之导航栏固定在浏览器顶部
添加粘性定位: position:sticky; 必须添加定位 top left right bottom使用 top:0px;原创 2021-11-01 10:22:15 · 291 阅读 · 0 评论 -
学习日记——CSS鼠标穿透
如果版心在banner上面,给banner加上超链接,在版心范围内是跳转不了的,所以就得想办法让鼠标穿过该版心触发到下面的banner 解决办法:pointer-events:none;鼠标阻止设置为没有。 扩展:pointer-events:visible;设置为默认值,默认鼠标阻止。...原创 2021-11-01 10:04:37 · 372 阅读 · 0 评论 -
学习日记——固定定位
固定定位 position:fixed;特点1:一个盒子给了固定定位之后,该盒子也是悬空不占位的,后面没有定位的盒子会上去,内容也会被覆盖。特点2:如果多个盒子同时给了固定定位,那么结构在后定位的层在上,想要改变可以通过z-index,z-index只能有定位之后才有效。特点3:固定定位之后,在使用top left right bottom移动位置的时候,参照物是浏览器的当前窗口(视口)。...原创 2021-10-29 10:54:20 · 103 阅读 · 0 评论 -
学习日记——绝对定位之弹窗固定在第一屏幕上的三种方法
第一种定位和margin结合。.box1{ width: 100px; height: 100px; background-color: red; font-size: 40px; position: absolute; z-index: 2; top:50%; left: 50%; ..原创 2021-10-28 17:59:14 · 687 阅读 · 0 评论 -
学习日记——图片有留白
在插入图片时,图片会向下撑大3像素,原因是因为img是行内块元素,默认垂直上相对于文本的基线对齐基线和底线中间有一段小缝隙,就是那3像素解决方法:1\给img添加display:block;2\给img添加vertical-align:top; 设置img相对于顶部对齐...原创 2021-10-27 19:11:21 · 163 阅读 · 0 评论 -
学习日记——行内元素
例如:a b em i span strong等都是行内元素A) 行内元素的表现形式是始终以行内逐个进行显示; 横着排B) 行内元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;C)行内元素也会遵循盒模型基本规则,但是对于margin和padding个别属性值不生效行内元素的细节点 1\行内元素不支持 width height 2\对margin-top margin-bott...原创 2021-10-27 17:04:37 · 104 阅读 · 0 评论 -
学习日记——想要实现单行文本溢出显示省略号
.text{ /* 设置范围 */ width: 300px; background-color: red; /* 强制单行显示 space 空间 nowrap不换行*/ white-space: nowrap; /* 把溢出的内容给隐藏掉 */ overflow: hidden; /* 显示省略号...原创 2021-10-27 16:37:42 · 61 阅读 · 0 评论