html5+css3
文章平均质量分 95
本笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)
你说的白是什么白_
大四学生一枚,2023年本科毕业,现已工作
展开
-
21. 【移动端Web开发之vw和vh布局】
文章目录【移动端Web开发之vw和vh布局】前端小抄(21)一、vw和vh1.1 移动端布局1.2 vw/vh是什么?1.3 vw/vh怎么用?1.4 vw注意事项1.5 VSCode px->vw 插件【移动端Web开发之vw和vh布局】前端小抄(21)本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!一、vw和vh1.1 移动端布局移动端布局 — flex 布局为了实现可以适配移动端,页面元素可以宽度和高度等比例缩放需要移动端适配有如下方案:(1)rem市场比原创 2022-01-19 09:26:11 · 932 阅读 · 0 评论 -
20.【移动端Web开发之响应式布局】
文章目录【移动端Web开发之响应式布局】前端小抄(20)一、响应式开发1.1 响应式开发原理1.2 响应式布局容器二、Bootstrap前端开发框架2.1 Bootstrap简介2.2 Bootstrap使用2.3 布局容器三、Bootstrap栅格系统3.1 栅格系统简介3.2 栅格选项参数3.3 列嵌套3.4 列偏移3.5 列排序3.6 响应式工具四、阿里百秀首页案例五、移动端技术选型【移动端Web开发之响应式布局】前端小抄(20)本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!原创 2022-01-19 09:25:39 · 3018 阅读 · 16 评论 -
19. 【移动Web开发之综合案例】
文章目录【移动Web开发之综合案例】前端小抄(19)黑马面面布局开发一、目的1.1 技术方案1.2 代码规范1.2 目录规范二、流程开发2.1 蓝湖/摹客协作平台2.2 适配方案2.3 初始化文件2.4 布局模块2.5 swiper 插件使用2.6 图标字体上传下载2.7 上传码云并发布部署静态网站【移动Web开发之综合案例】前端小抄(19)本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!黑马面面布局开发一、目的了解移动端页面开发流程掌握移动端常见布局思路1.1原创 2022-01-19 09:25:04 · 793 阅读 · 0 评论 -
18. 【移动Web开发之rem适配布局】
文章目录【移动Web开发之rem适配布局】前端小抄(18)一、rem单位1.1 rem 单位二、媒体查询2.1 什么是媒体查询2.2 语法规范2.2.1 mediatype 查询类型2.2.2 关键字2.2.3 媒体特性2.3 媒体查询+rem实现元素动态大小变化2.4 引入资源(理解)三、Less基础3.1 维护CSS的弊端3.2 Less介绍3.3 Less安装(注意如果使用VSCode无需安装Less)3.4 Less变量3.4.1 变量命名规范3.4.2 变量使用规范3.5 Less编译3.6 Le原创 2022-01-19 09:24:30 · 818 阅读 · 0 评论 -
17. 【移动Web开发之flex布局】
文章目录【移动Web开发之flex布局】前端小抄(17)一、flex布局体验1.1 传统布局与flex布局1.2 初体验二、flex布局原理2.1 布局原理三、flex布局父项常见属性3.1 常见父项属性3.2 flex-direction设置主轴的方向3.3 justify-content设置主轴上的子元素排列方式3.4 flex-wrap设置子元素是否换行3.5 align-items设置侧轴上的子元素排列方式(单行)3.6 align-content 设置侧轴上的子元素的排列方式(多行)3.7 ali原创 2022-01-19 09:23:46 · 1192 阅读 · 0 评论 -
16. 【移动Web开发之流式布局】
文章目录【移动Web开发之流式布局】前端小抄(16)一、移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 常见移动端屏幕尺寸1.4 移动端调试方法1.5 总结二、视口2.1 布局视口2.2 视觉视口2.3 理想视口2.4 总结2.5 meta视口标签三、二倍图3.1 物理像素&物理像素比3.2 多倍图3.3 背景缩放3.4 多倍图切网 cutterman四、移动端开发选择4.1 移动端主流方案4.2 单独移动端页面(主流)4.3 响应式兼容PC移动端(其次)4.4 总结五、移动端技术解决方案5原创 2022-01-19 09:22:30 · 466 阅读 · 0 评论 -
15. 【CSS3提高:2D转换、动画、3D转换、浏览器私有前缀】
文章目录【CSS3提高:2D转换、动画、3D转换、浏览器私有前缀】前端小抄(15)一、CSS3 2D转换1.1 二维坐标系1.2 2D 转换之移动 translate1.3 2D 转换之旋转 rotate1.4 转换中心点 transform-origin1.5 2D 转换之缩放 scale1.6 2D 转换综合写法1.7 2D 转换总结二、CSS3 动画2.1 动画的基本使用2.1.1 用 keyframes 定义动画(类似定义类选择器)2.1.2 元素使用动画2.2 动画常用属性2.3 动画简写属性2.原创 2022-01-18 20:00:38 · 417 阅读 · 2 评论 -
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录【PC端品优购项目】前端小抄(14)电商—主页电商—分类列表页电商—注册页一、品优购项目规划1.1 网站制作流程1.2 品优购项目整体介绍1.3 品优购项目的学习目的1.4 开发工具以及技术栈1.5 品优购项目搭建工作1.6 网站favicon图标1.7 网站TDK三大标签SEO优化二、品优购首页制作2.1 常用模块类名命名2.2 快捷导航shortcut制作2.3 header制作2.4 nav导航制作2.5 footer底部制作2.6 main主体模块制作2.7 推荐模块制作2.8 楼层区flo原创 2022-01-18 20:00:06 · 1277 阅读 · 0 评论 -
13. 【语义化标签】、audio、video、【新增的input类型】、属性 / 结构伪类 / 伪元素选择器、filter、transition
文章目录【HTML5&CSS3提高】前端小抄(13)一、HTML5的新特性1.1 HTML5新增的语义化标签1.2 HTML5新增的多媒体标签1.2.1 视频1.2.2 音频1.2.3 多媒体标签总结1.3 HTML5新增的input类型1.4 HTML5新增的表单属性二、CSS3的新特性2.1 CSS3的现状2.2 CSS3新增选择器2.2.1 属性选择器2.2.2 结构伪类选择器2.2.3 伪元素选择器(重点)2.3 CSS3盒子模型2.4 CSS3其他特性(了解)2.4.1 CSS3滤镜 fi原创 2022-01-18 19:55:41 · 762 阅读 · 0 评论 -
12.【布局技巧:margin负值(多个盒子紧挨在一起,当鼠标放在其中一个盒子上时该盒子的边框自动变色)、文字围绕浮动元素、行内块元素居中显示、CSS三角强化(价格条)、CSS固定初始化】
文章目录【布局技巧:margin负值、文字围绕浮动、行内快、CSS三角、CSS初始化】前端小抄(12)一、margin负值的运用二、文字围绕浮动元素三、行内块的巧妙运用四、CSS三角强化五、CSS初始化【布局技巧:margin负值、文字围绕浮动、行内快、CSS三角、CSS初始化】前端小抄(12)本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!一、margin负值的运用如何实现以下效果呢?多个盒子紧挨在一起,当鼠标放在其中一个盒子上时该盒子的边框自动变色。让每个盒子 ma原创 2022-01-18 19:54:59 · 676 阅读 · 0 评论 -
11.【CSS精灵图background-position、字体图标@font-face{}、画小三角形、cursor、outline、resize、vertical-align、溢出省略号】
文章目录【CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号】前端小抄(11)一、精灵图1.1 为什么需要精灵图?1.2 精灵图(sprites)的使用1.3 案例:拼单词二、字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加2.6 字体图标加载的原理三、CSS三角四、CSS用户界面样式4.1 什么是界面样式4.2 鼠标样式 cursor4.3 轮廓线 outline4.4 防止拖拽文本域 resize五、vertical-a原创 2022-01-18 19:53:25 · 383 阅读 · 0 评论 -
10.【CSS定位】:position、z-index、dispaly(none)、visibility、overflow &&&& hot new 模块 + 淘宝焦点图布局 +土豆网鼠标经过显示遮罩
文章目录【CSS定位】前端小抄(10)一、定位1.1 为什么需要定位?1.2 定位组成1.3 静态定位 static(了解)1.4 相对定位 relative(重要)1.5 绝对定位 absolute(重要)1.6 子绝父相的由来1.7 固定定位 fixed (重要)1.8 固定定位小技巧:固定在版心右侧位置1.9 粘性定位 sticky(了解)1.10 定位的总结1.11 定位叠放次序 z-index1.12 定位的拓展二、综合案例三、网页布局总结四、元素的显示与隐藏4.1 display 属性4.2 v原创 2022-01-18 19:52:55 · 619 阅读 · 0 评论 -
9.----------------------------------------------------------------------------------------【学成在线案例】
文章目录【学成在线案例】前端小抄(9)一、准备素材和工具二、案例准备工作三、CSS属性书写顺序四、页面布局分析五、确定版心六、头部制作七、banner 制作八、精品推荐小模块九、精品推荐大模块十、底部模块十一、代码【学成在线案例】前端小抄(9)本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!一、准备素材和工具学成在线 PSD 源文件开发工具 = PS(切图)+ VSCode(代码)+ Chrome(测试)二、案例准备工作我们本次采取结构与样式相分离思想:原创 2022-01-18 19:52:04 · 560 阅读 · 0 评论 -
8.【CSS浮动】:float &&&&常见网页布局(纯代码)
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【CSS浮动】前端小抄(8)一、浮动(float)1.1 传统网页布局的三种方式1.2 标准流(普通流/文档流)1.3 为什么需要浮动?1.4 什么是浮动?1.5 浮动特性(重难点)1.6 浮动元素经常和标准流父级搭配使用二、常见网.原创 2022-01-18 19:50:46 · 465 阅读 · 0 评论 -
7.【圆角边框border-radius、盒子阴影box-shadow、文字阴影text-shadow】
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【圆角边框、盒子阴影、文字阴影】前端小抄(7)一、圆角边框二、盒子阴影三、文字阴影【圆角边框、盒子阴影、文字阴影】前端小抄(7)本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!一、圆角边框CSS 3 新.原创 2022-01-18 19:47:45 · 1071 阅读 · 0 评论 -
6.【CSS盒子模型】:border、padding 、margin 、overflow&&&& 新浪导航案例 + MI产品模块 + 快报模板
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【CSS盒子模型】前端小抄(6)一、看透网页布局的本质二、盒子模型(Box Model)组成三、边框(border)3.1 表格的细线边框3.2 边框会影响盒子实际大小四、内边距(padding)五、外边距(margin)5.1 外.原创 2022-01-18 19:46:59 · 273 阅读 · 0 评论 -
5.【CSS三大特性】:层叠性、继承性、优先级
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【CSS三大特性】前端小抄(5)层叠性继承性优先级【CSS三大特性】前端小抄(5)CSS 有三个非常重要的特性:层叠性、继承性、优先级。层叠性给同一个选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性.原创 2021-09-02 21:06:41 · 233 阅读 · 0 评论 -
4.【Emmet语法】:快速生成HTML结构、CSS样式语法
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【Emmet语法】快速生成HTML结构语法快速生成CSS样式语法快速格式化代码【Emmet语法】Emmet 语法的前身是 Zen coding,它使用缩写,来提高 html/css 的编写速度,,VSCode 内部已经集成该语法.原创 2021-09-02 21:06:03 · 171 阅读 · 0 评论 -
3.【CSS复合选择器、元素显示模式display、背景background所有】&&&& 简洁版小米侧边栏案例
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768?from=search&seid=5360606378186309382.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【CSS复合选择器、元素显示模式、背景】一、CSS的复合选择器1.1 什么是复合选择器1.2 后代选择器(包含选择器) 如:ul li {.原创 2021-09-02 20:58:32 · 204 阅读 · 0 评论 -
2.【CSS简介、四种选择器、字体属性font、文本属性(color、text-align、text-decoration、text-indent、line-height)、引入方式】
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768?from=search&seid=5360606378186309382.笔记参考大佬:https://jerry-z-j-r.github.io/(注:有时访问不了)文章目录【CSS简介、基础选择器、字体属性、文本属性、引入方式】一、CSS简介1.1 HTML的局限性1.2 CSS网页的美容师1.3 CSS语法规范1.4 .原创 2021-08-31 13:10:42 · 193 阅读 · 0 评论 -
1.【HTML基础】:html简介+html标签
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处!b站视频链接:https://www.bilibili.com/video/BV14J4114768?from=search&seid=5360606378186309382.文章目录【HTML基础】一、HTML简介1.1 网页1.1.1 什么是网页?1.1.2 什么是HTML?1.1.3 网页的形成1.2 浏览器1.2.1 常用浏览器1.2.2 浏览器内核1.3 Web标准1.3.1 为什么需要Web标准?1.3.2 Web.原创 2021-08-31 10:16:26 · 509 阅读 · 0 评论