web前端基础
文章平均质量分 53
记录前端学习过程中的笔记
NGUP_LEE
毕业之后找到了一份还可以的工作,就是少了一些上学时学习的激情,上班就已经搞得自己精疲力尽,偶尔点开自己的博客,看到自己的学习笔记还可以帮助到不少的同学感到很开心。
加油,陌生人,如果你是为了挣钱,请努力,互联网不会辜负你,最重要的是你要考虑清楚自己的方向~
展开
-
webpack5的JS基础配置
Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他语法,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。BabelEslint在使用webpack进行打包时,先试用Eslint检测代码格式无误后,再由Babel做代码兼容性处理。原创 2024-02-22 11:44:46 · 527 阅读 · 0 评论 -
webpack5入门配置
过去在 Webpack4 时,我们处理图片资源通过 file-loader 和 url-loader 进行处理。默认 Webpack 会将文件打包输出到 dist 目录下,我们查看 dist 目录下文件情况就好了。css-loader:负责将 Css 文件编译成 Webpack 能识别的模块。less-loader:负责将 Less 文件编译成 Css 文件。sass-loader:负责将 Sass 文件编译成 css 文件。sass:sass-loader 依赖 sass 进行编译。原创 2024-02-21 17:32:48 · 815 阅读 · 0 评论 -
web前端基础——响应式布局BootStrap框架
文章目录1、BootStrap栅格系统1、BootStrap栅格系统所谓的栅格系统是指在Bootstrap3中,把我们的网页宽度等分成12等份,而每个内容占12份中对应的份数。原创 2022-03-15 17:39:27 · 610 阅读 · 0 评论 -
web前端基础——vw、vh移动适配
vw适配原理实现在不同宽度的设备中,网页元素尺寸等比缩放的效果vw单位尺寸确定设计稿对应的vw尺寸(1/100视口宽度)vw单位的尺寸=px单位数值 / (1/100视口宽度 )在实际的生产环境中,vw、vh单位一般是不混用的...原创 2022-03-14 09:19:14 · 547 阅读 · 0 评论 -
web前端基础——Less语法
在使用rem对移动端界面布局进行适配时,需要完成px单位到rem单位的转换,这个过程中的除法运算对于界面中很多个标签时,是很麻烦的,但是CSS又不支持计算写法,那么有什么办法可以解决这个问题呢?文章目录1、Less语法简介2、Less语法的运算3、Less语法快速生成选择器4、Less变量设置属性值5、Less文件的导入与导出5.1 导入5.2 导出5.3 禁止导出1、Less语法简介Less是一个CSS预处理器,Less文件后缀是.less扩充了CSS语言,使CSS具备一定的逻辑性、计算能力.原创 2022-03-11 17:02:16 · 9658 阅读 · 0 评论 -
web前端基础——rem移动适配
文章目录1、rem是什么?2、rem媒体查询3、不同设备移动适配4、rem——flexible移动适配1、rem是什么?rem是目前好多企业都在使用的移动端界面的适配方案,是一种尺寸单位rem单位相对单位rem单位是相对于HTML标签的字号计算结果1rem = 1HTML字号大小网页的根就是 html 标签样例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2022-03-11 10:25:15 · 2888 阅读 · 0 评论 -
web前端基础——flex布局
1、简介Flex布局/弹性布局是一种浏览器提倡的布局模型,使用FLex布局网页更加简单、灵活,且可以避免浮动脱标的问题2、Flex布局模型构成基于Flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生,Flex布局非常适合结构化布局使用方式:父元素(亲爹)添加属性display:flex,子元素可以自动的挤压或者拉伸组成部分:弹性容器弹性盒子主轴(默认在弹性容器中心水平方向,弹性盒子默认沿着主轴排列)侧轴/交叉轴(默认在中心垂直方向)3、Flex主轴对齐方式使原创 2022-03-09 20:10:37 · 490 阅读 · 0 评论 -
web前端基础——实现动画效果
当两个效果之间变换时,可以使用transition过渡属性,但是有多个效果来回变换时,就需要使用动画效果,且动画过程可控(重复播放,画面暂停,最终画面等)文章目录1、简介2、实现步骤3、复合属性animation4、动画属性1、简介动画的本质是快速切换大量图片在人脑中形成的具有连续性的画面构成动画的最小单元:帧或者动画帧2、实现步骤定义动画@keyframes 动画名称{ from{} to{}}@keyframes 动画名称{ 0%{} 10%{} 20%{} 50.原创 2022-03-08 21:35:39 · 2620 阅读 · 0 评论 -
web前端基础——rotate实现旋转效果
使用rotate实现元素旋转效果语法:transform:rotate(j角度)角度的单位是deg,角度可以正值可以负值,正值顺时针,负值逆时针注意:测试旋转必须要有过渡的属性样例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-03-08 20:36:52 · 3431 阅读 · 0 评论 -
web前端基础——过渡效果
作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互的内容属性名:transition常见取值:参数取值过渡的属性all:所有能过渡的属性都过渡,比如填width,则只有width能过渡过渡的时长数字+ s(秒)注意只有默认状态和hover状态的样式不同,才能有过渡的效果transition属性给需要过渡的元素本身加transition属性设置在不同状态中,效果是不同的,比如给hover状态设置,则只有鼠标移入时,才有过渡效果样例代码.bo原创 2022-03-02 17:05:12 · 4422 阅读 · 0 评论 -
web前端基础——盒子的阴影
作用:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节属性名:box-shadow常用参数:参数作用h-shadow必须,水平偏移量,允许负值v-shadow必须,垂直偏移量,允许负值blur可选,模糊度spread可选,阴影扩大color可选,阴影颜色inset可选,将阴影改为内部阴影...原创 2022-03-02 16:29:19 · 722 阅读 · 0 评论 -
web前端基础——背景图片
作用:设置背景图片大小语法:background-size: 宽度 高度取值:取值场景数字+px简单方便,常用百分比相对于当前盒子自身的宽高百分比contain包含,将背景图片等比例缩放,直到不会超出盒子的最大范围cover覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白...原创 2022-03-02 15:35:55 · 2140 阅读 · 0 评论 -
web前端基础——CSS定位装饰
文章目录一、 垂直对齐方式1.1 基线1.2 垂直对齐方式二、 光标类型三、 边框圆角四、overflow溢出部分显示效果五、 元素本身隐藏一、 垂直对齐方式1.1 基线基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)浏览器在解析行内标签以及行内块标签的时候,默认按照文字模式进行解析,所以有的标签排列是无法完全对齐的,因为是按照 基线对齐1.2 垂直对齐方式方法一属性名:vertical-align属性值:属性值效果baseline默认,原创 2022-03-01 21:11:08 · 221 阅读 · 0 评论 -
web前端基础——定位
1.1网页常见布局方式1、标准流块级元素独占一行——垂直布局行内元素、行内块元素一行显示多个——水平布局2、浮动可以让原本垂直布局的 块级元素变成水平布局3、定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况...原创 2022-03-01 16:03:54 · 1605 阅读 · 0 评论