每日总结#1
[遇到的问题]
1.position定位与z-index的问题。
做首页轮播图,发现轮播图片定位之后会覆盖导航栏。
解决办法:
>>> : 1.将导航栏的z-index值设置高一些,让它的级别高于轮播图片。
这样产生了第二个问题:导航栏内部的弹框被覆盖了。
解决办法:
>>> : 将弹框与导航栏代码同级,这样就可以解决导航栏设置了z-index较高的值之后覆盖弹框的问题。
可是又产生了第三个问题:弹框占据了轮播图片部分的位置。
解决办法:
>>> : 将弹框绝对定位,这样它们就会从文档流中剔除。不占据任何位置。
结论:所有定位问题的来源都是父子级关系的原因。要解决定位问题就先从html父子级结构着手。
[学习新知识]
1.使用easyui的layout布局。
layout可以将元素拆分成上(north)、下(south)、左(west)、右(east)、中央(center)五个部分,这样的话就是横排3行,竖排3列。但是假设需要横排4行或者更多、竖排4列或者更多时,就只能将已经拆分的那部分继续拆分,这是easyui多个布局的方式。
2.jquery里面改变节点顺序的方法:
在写轮播图代码的时候,实现了另一种通过改变节点顺序来显示图片的方式,这样可以不需要用到定位。
假设页面上有一个ul,里面有3个li,结构如下:
<ul id='parent'> <li id='node1'></li> <li id='node2'></li> <li id='node3'></li> </ul>
有两个方法可以改变li的顺序:
>>>方法1 :$(A).prepend($(B)) 将B放置到A的开头,始终是第一位。
js代码如下:
$(function(){ $('#parent').prepend($('#node3')); //将第3个<li>放到<ul>的第一位 })
执行之后的结果:
<ul id='parent'> <li id='node3'></li> <li id='node1'></li> <li id='node2'></li> </ul>
>>>方法2 :$(A).inserBefore($(B)) 将A放置到B之前。同样的有$(A).inserAfter($(B)) 表示将A放置到B之后。
js代码如下:
$(function(){ $("#node1").insertAfter($("#node2")); //将第1个<li>放置到第2个<li>之后 })
执行之后的结果:
<ul id='parent'> <li id='node2'></li> <li id='node1'></li> <li id='node3'></li> </ul>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!