![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习笔记(自用)
文章平均质量分 95
放下华子我只抽RuiKe5
代码如诗,逻辑如词,用指尖编制世界的模样。
展开
-
Web前端—移动Web第五天(媒体查询、Bootstrap、综合案例-alloyTeam)
在移动Web的第五天课程中,我们学习了媒体查询、Bootstrap以及综合案例-alloyTeam。媒体查询是用于针对不同设备屏幕尺寸编写不同的CSS样式的方法,它使我们能够更好地控制网页在不同设备上的显示效果。Bootstrap是一个流行的前端框架,它提供了许多预定义的CSS和JavaScript组件,可以帮助我们快速构建响应式网站。在综合案例-alloyTeam中,我们将所学的知识应用到实际项目中,通过使用媒体查询和Bootstrap,成功地创建了一个具有良好用户体验的移动网站。原创 2023-11-22 21:10:04 · 504 阅读 · 0 评论 -
Web前端—移动Web第四天(vw适配方案、vw和vh的基本使用、综合案例-酷我音乐)
在移动Web开发的第四天,我们主要学习了vw适配方案、vw和vh的基本使用以及综合案例-酷我音乐。首先,我们了解了vw适配方案,它是一种相对单位,可以根据屏幕宽度进行自适应。接着,我们学习了vw和vh的基本使用,vw表示视口宽度的1%,vh表示视口高度的1%,通过这两个单位可以实现更加精确的布局。最后,我们通过一个综合案例-酷我音乐,将所学知识应用到实际项目中,实现了一个简单的移动端音乐播放器界面。原创 2023-11-22 20:41:47 · 447 阅读 · 0 评论 -
Web前端—移动Web第三天(移动Web基础、rem、less、综合案例—极速问诊)
在移动Web的第三天课程中,我们首先学习了移动Web的基础知识,包括响应式设计、视口、设备像素比等概念。接着,我们探讨了rem和less两种重要的前端开发技术。rem是相对单位,可以根据屏幕宽度进行自适应缩放,使网页在不同设备上保持良好的显示效果;而less则是一种动态样式语言,可以简化CSS代码,提高开发效率。最后,我们通过一个综合案例——极速问诊,将所学知识应用到实际项目中。在这个案例中,我们学会了如何使用rem和less实现页面布局和样式的优化,以及如何与后端进行数据交互,为用户提供便捷的在线问诊服务原创 2023-11-20 20:51:40 · 990 阅读 · 3 评论 -
Web前端—移动Web第二天(空间转换、动画、综合案例:全名出游)
在移动Web的第二天课程中,我们学习了空间转换和动画的应用。空间转换主要涉及到视口、缩放、旋转等技术,通过这些技术可以实现网页在不同设备上的自适应展示。动画则包括过渡、动画属性、关键帧动画等,可以让网页更具动感和吸引力。在综合案例“全名出游”中,我们将所学知识应用于实际项目中,设计了一个响应式的旅游网站,实现了景点介绍、线路规划、在线预订等功能。通过这个项目,我们对移动Web开发有了更深入的了解,为今后的工作打下了坚实的基础。原创 2023-11-18 20:40:04 · 355 阅读 · 0 评论 -
Web前端—移动Web第一天(平面转换、渐变、综合案例--播客网页设计)
在"Web前端—移动Web第一天"的课程中,我们首先学习了平面转换。通过使用CSS3的transform属性,我们可以对元素进行旋转、缩放、倾斜和位移等操作,从而实现平面转换的效果。接着,我们探讨了渐变的使用。通过CSS3的linear-gradient和radial-gradient函数,我们可以为元素添加各种颜色和形状的渐变效果,使网页更加生动和有趣。最后,我们进行了一个综合案例的实践,设计了一个播客网页。在这个案例中,我们运用了前面学到的平面转换和渐变技术,为网页添加了动态效果和视觉吸引力。通过这个实原创 2023-11-17 20:59:52 · 438 阅读 · 0 评论 -
Web前端—小兔鲜儿电商网站底部设计及网站中间过渡部分设计
本文主要介绍了Web前端设计中的两个重要部分:小兔鲜儿电商网站底部设计和网站中间过渡部分设计。文章首先详细阐述了底部设计的原则和技巧,包括版权信息、联系方式、导航链接等元素的布局和样式。接着,文章探讨了网站中间过渡部分的设计方法,如使用动画效果、渐变背景等技术来增强用户体验。最后,文章总结了这两个部分的设计要点,为读者提供了实用的参考建议。原创 2023-11-16 23:54:32 · 1287 阅读 · 0 评论 -
Web前端—CSEO、Favicon、小兔鲜儿电商网站顶部设计
本文主要介绍了Web前端中的CSEO、Favicon以及小兔鲜儿电商网站顶部设计。CSEO是指搜索引擎优化,通过优化网站的结构和内容,提高网站在搜索引擎中的排名。Favicon是网站图标,可以显示在浏览器标签页上,增加用户对网站的辨识度。小兔鲜儿电商网站顶部设计采用了简洁明了的风格,包括了网站Logo、搜索框、购物车和登录入口等元素,方便用户进行浏览和操作。这些技术的应用可以提高网站的用户体验和流量转化率,对于电商企业来说尤为重要。原创 2023-11-08 23:40:25 · 933 阅读 · 0 评论 -
Web前端—CSS高级(定位、高级技巧、CSS修饰属性、综合案例:购物网站轮播图)
本文主要介绍了Web前端中的CSS高级技术,包括定位、高级技巧、CSS修饰属性以及一个综合案例:购物网站的轮播图。首先,我们探讨了CSS的定位技术,如相对定位、绝对定位和固定定位等。接着,我们讨论了一些高级技巧,如伪类选择器、属性选择器和层叠规则等。此外,我们还介绍了一些常用的CSS修饰属性,如颜色、字体、背景和边框等。最后,我们通过一个实际的购物网站轮播图案例,展示了如何运用这些CSS技术来创建一个美观且实用的网页界面。原创 2023-11-07 23:32:47 · 541 阅读 · 1 评论 -
Web前端—网页制作(以“学成在线”为例)
Web前端是网页制作的重要组成部分,它负责将设计师的设计稿转化为实际的网页。以“学成在线”为例,Web前端需要使用HTML、CSS和JavaScript等技术来构建网页结构、样式和交互功能。通过学习Web前端,你可以掌握这些技能,为成为一名优秀的前端工程师打下坚实的基础。原创 2023-11-05 23:24:15 · 1903 阅读 · 0 评论 -
Web前端—Flex布局:标准流、浮动、Flex布局、综合案例(短视频首页解决方案)
本博客将深入探讨Web前端的Flex布局技术。我们将从标准流和浮动布局开始,理解其基本原理和应用场景。然后,我们将详细介绍Flex布局,包括其基本概念、特性以及如何使用Flexbox进行布局。最后,我们将通过一个综合案例——短视频首页的解决方案,来展示如何将所学的Flex布局知识应用到实际项目中。无论您是初学者还是有一定经验的前端开发者,都能从这篇博客中获得有价值的学习内容。让我们一起探索Flex布局的魅力,提升我们的前端开发技能吧!原创 2023-10-24 06:00:00 · 1048 阅读 · 1 评论 -
Web前端—盒子模型:选择器、PxCook、盒子模型、正则表达式、综合案例(产品卡片与新闻列表)
Web前端—盒子模型:选择器、PxCook、盒子模型、正则表达式、综合案例(产品卡片与新闻列表)是一份关于Web前端开发的教程。它介绍了如何使用选择器来选取HTML元素,如何使用PxCook来测量页面元素的大小和位置,以及如何理解盒子模型的概念。此外,它还介绍了正则表达式的使用方法,并通过综合案例(产品卡片与新闻列表)来帮助读者更好地掌握所学知识。这份教程内容丰富,适合初学者学习。原创 2023-10-18 22:09:01 · 903 阅读 · 0 评论 -
《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选》学习笔记总目录
本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选》所有知识点的笔记进行总结分类。学习时总结的目录笔记以及思维导图和实训,将在后续更新。原创 2023-09-23 16:50:13 · 1078 阅读 · 2 评论 -
Web前端—CSS进阶:复合、后代、子代、并集、交集、伪类选择器、超链接伪类、CSS特性(继承、层叠、优先级(基础选择器、复合选择器))、Emmet写法、背景属性(背景图、平铺方式、位置、缩放、固定、
Web前端——复合选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、超链接伪类、CSS特性(继承性、层叠性、优先级(基础选择器、复合选择器-叠加))、Emmet写法、背景属性(背景图、平铺方式、背景图位置、背景图缩放、背景图固定、背景复合属性)、显示模式、块级元素、行内元素、行内块元素、转换显示模式、综合案例(热词、banner效果)原创 2023-09-23 16:33:10 · 458 阅读 · 0 评论 -
Web前端—CSS基础:选择器(标签、类、id、通配符)、盒子尺寸和背景色、文字控制属性、字体大小、字体样式、行高、单行文字垂直居中、字体族、font复合属性、文本(缩进、对齐方式、修饰线、color
选择器(标签、类、id、通配符)、盒子尺寸和背景色、文字控制属性、字体大小、字体样式、行高、单行文字垂直居中、字体族、font复合属性、文本(缩进、对齐方式、修饰线、color文字颜色)、调试工具、综合案例(新闻详情、原神简介)原创 2023-09-20 22:55:28 · 236 阅读 · 0 评论 -
Web前端——HTML进阶:列表(无序、有序、定义列表)、表格(结构标签、合并单元格)、表单(input标签、单选框、上传文件、多选框、下拉菜单、文本域、label标签、按钮)、语义化(无、有语义布局
列表(无序、有序、定义列表)、表格(结构标签、合并单元格)、表单(input标签、单选框、上传文件、多选框、下拉菜单、文本域、label标签、按钮)、语义化(无、有语义布局标签)、字符实体、体育新闻列表、注册信息。原创 2023-09-19 00:14:00 · 603 阅读 · 0 评论 -
Web前端——HTML基础:标签语法(标签结构)、HTML骨架、标签的关系、注释、标题标签、段落标签、换行和水平线、文本格式化标、图像标签、图像属性、属性语法、路径(相对、绝对路径)、超链接标签、简介
网页制作思路:从上到下,先整体再局部,逐步分析制作分析内容 → 写代码 → 保存 → 刷新浏览器,看效果< h1 > 尤雨溪 < hr > < p > 尤雨溪,前端框架 < a href = " ../17-综合案例二/vue简介.html " > Vue.js 的作者, < a href = " # " > HTML5 版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。原创 2023-09-17 16:54:23 · 275 阅读 · 0 评论