16-div布局模块的划分
公开笔记对他人可见,有机会被管理员评为“优质笔记”
{{ noteEditor.content.length }}/2000
38-通过浏览器检查标签的多种样式来源
视频讲解了Web页面中元素样式的来源及其影响因素,包括浏览器默认的用户代理样式,元素从父级继承的样式,以及开发者自定义的样式。示例中用LI标签说明了如何区分不同来源的样式并管理它们,包括继承自UL的项目符号样式,以及从最近的父级body到最远的根元素HTML继承的字体、颜色和文本大小调整。讲解强调了理解元素样式继承和浏览器默认样式对于有效控制页面布局和解决样式冲突的重要性,适合希望深入了解CSS工作机制的前端开发者。
02:273590115--优设通栏幻灯片案例制作
本视频针对前端开发者,介绍如何通过CSS和HTML技术实现复杂的Web页面布局。包含浮动布局、定位布局的应用,以及如何将页面拆分成模块进行练习。课程内容涉及导航、列表、幻灯片、用户交互和动态效果等页面元素的实现。透过实战演练为学员提供如何从模块出发逐步构建整个页面的经验,进阶部分探讨响应式设计理念及其在用户界面设计中的应用。通过具体例子展示了图片的使用、按钮设计,为实现动态的幻灯片效果引入了JavaScript的概念,准备后续深入学习交互式元素的制作。
45:503251123--网页界面设计法则1
掌握界面设计的基本原则是确保网页符合用户体验的关键。讨论了设计中的“重复”原则,提高模块的一致性与辨识度;“对比”原则,则通过元素间的差异突出层次和重要性;亲密性原则运用空间距离来表达元素间的关系;而对齐原则则是通过统一的排列来提供清晰的视觉导向。这些原则在实际设计中可应用于样式的重复性管理、颜色和字体的对比性选择、元素间距的合理设置等方面,共同作用于界面的视觉和功能性,使用户交互更直观、页面更有秩序和美感。
12:593251一分钟教你做出水波纹涟漪效果
通过 CSS 技术制作页面动态效果,如本例中的水波纹效果,展示了使用 DIV 元素及类选择器构建页面基础结构的方法。介绍了如何通过设置相对定位和绝对定位使元素居中显示,以及如何定义动画关键帧和应用 transition 属性来实现动画效果。演示了调整 opacity 属性来控制透明度,完成水波纹由中心向外扩散消散的视觉效果,并介绍了设置动画延时以实现连续动态效果。内容适合前端开发者、UI设计师、网页设计爱好者、动画效果制作人员、CSS学习者。
01:205.1万两分钟带你做出按钮的光晕效果
视频介绍了如何使用HTML和CSS结合JavaScript实现一个酷炫的按钮光晕效果。首先,通过在HTML中添加按钮并设置文本,接下来在CSS中通过相对与绝对定位配合transform属性,让光晕背景圆形居中。文字通过轻微定位覆盖在光晕之上。通过设置宽度和高度并与transition属性搭配,实现动态的过渡效果,使得光晕在鼠标悬停时平滑展现。JavaScript用于计算鼠标相对按钮的位置,并动态更新背景的位置,让光晕在鼠标周围移动。此技术适合前端开发者、UI/UX设计师、网站制作爱好者、JavaScript学习者以及对CSS动画感兴趣的人群。
02:053.9万2023新CSS特性(上)
随着2023年新的CSS特性发布,前端界迎来了创新的布局与设计能力,这些更新将允许开发者以更精细的控制和更高的效率设计网页。比如,改进的网格布局和对响应式设计的增强支持使得创建适应不同设备的页面变得更为简便。新增的CSS变量和动画效果则为用户界面带来更丰富的视觉体验。新特性还包括对现代浏览器功能的支持,提升了网页的性能和兼容性。这些内容特别适合那些希望保持最新行业知识,以及想要提升网页设计能力和用户体验的前端开发者学习。
01:272.9万一分钟教你做出文字触碰过渡下划效果
本视频展示了如何使用CSS为文字添加具有动态交互效果的背景。操作中首先设置了文本的行高来优化布局,随后引入了一个不重复的背景,并调整其位置至底部。为了实现过渡效果,进一步定义了背景的宽度和高度,使其在鼠标悬停时展开到全宽,鼠标移出时收缩。通过调整background-position在悬停和常态下的x位置,达到了背景位置动态变化的效果。此技术适合前端开发人员和UI设计师,帮助他们丰富网站界面的视觉体验和用户交互。
00:592.8万JavaScript基础训练营 - 课程前瞻
针对JavaScript零基础学者,该课程旨在建立扎实的JavaScript基础,涉及前端行业必备知识。内容包括JavaScript历史、作用及实际应用,覆盖JavaScript作用域预解析、window对象、数据类型详解、以及DOM的关系与事件处理。课程设计注重从基础概念到代码实践的过渡,适合对前端开发抱有兴趣,意在此领域内打下坚实基础的初学者。
06:432.6万







