随笔分类 -  前端系统学习笔记

上一页 1 2 3 4 5 下一页
对前端相关知识进行系统的学习，对所学内容及遇到的问题进行梳理。
JS面向对象编程
摘要：JavaScript 面向对象编程 面向对象介绍 什么是对象 Everything is object （万物皆对象） 对象到底是什么，我们可以从两次层次来理解。 (1) 对象是单个事物的抽象。 一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被 阅读全文
posted @ 2019-10-23 17:50 阿江是个程序猿 阅读(6887) 评论(2) 推荐(4)
JS基础知识回顾
摘要：回顾 由于 JavaScript 高级还是针对 JavaScript 语言本身的一个进阶学习，所以在开始之前我们先对以前所学过的 JavaScript 相关知识点做一个快速复习总结。 重新介绍 JavaScript JavaScript 是什么 解析执行：轻量级解释型的 语言特点：动态，头等函数 ( 阅读全文
posted @ 2019-10-23 16:37 阿江是个程序猿 阅读(160) 评论(0) 推荐(0)
Photoshop基本操作
摘要：PS 工具是我们使用频率比较高的软件之一， 我们学习PS目的不是为了设计海报做电商和UI的，而是要求： 会简单的抠图 会简单的修改PSD效果图 熟练的切图 能和网站美工美眉有共同话题。。。。。 Photoshop基本使用 PS界面组成： 菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、 阅读全文
posted @ 2019-10-23 16:10 阿江是个程序猿 阅读(1109) 评论(0) 推荐(0)
CSS3——伸缩布局及应用
摘要：CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右，侧轴默认从上到下 主 阅读全文
posted @ 2019-10-22 11:23 阿江是个程序猿 阅读(286) 评论(0) 推荐(0)
CSS3动画
摘要：动画（animation） animation属性 1 animation-name 2 animation-duration 3 animation-timing-function 4 animation-delay 5 animation-iteration-count 6 animation- 阅读全文
posted @ 2019-10-22 11:20 阿江是个程序猿 阅读(159) 评论(0) 推荐(0)
CSS3——2D变形和3D变形
摘要：2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform transform 变换 变形的意思 阅读全文
posted @ 2019-10-22 11:15 阿江是个程序猿 阅读(558) 评论(0) 推荐(0)
CSS W3C统一验证工具
摘要：CssStats 是一个在线的 CSS 代码分析工具 如果你想要更全面的，这个神奇，你值得拥有： W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆ 因为它可以检测本地文件哦！！ 阅读全文
posted @ 2019-10-21 17:37 阿江是个程序猿 阅读(592) 评论(0) 推荐(0)
CSS压缩
摘要：通过W3C 统一验证工具的检测没有错误后，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。 w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢 还可以去站长之家进行 阅读全文
posted @ 2019-10-21 17:37 阿江是个程序猿 阅读(143) 评论(0) 推荐(0)
CSS——BFC
摘要：BFC(块级格式化上下文) BFC(Block formatting context) 直译为"块级格式化上下文"。 元素的显示模式 我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 哪些元素会具有BFC的条件 不是所有的元素模式 阅读全文
posted @ 2019-10-21 17:34 阿江是个程序猿 阅读(206) 评论(0) 推荐(0)
CSS3——过渡
摘要：过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画（ 阅读全文
posted @ 2019-10-21 15:04 阿江是个程序猿 阅读(433) 评论(0) 推荐(0)
CSS——优雅降级和渐进增强
摘要：什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？ 渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验 阅读全文
posted @ 2019-10-21 14:59 阿江是个程序猿 阅读(729) 评论(0) 推荐(0)
CSS——垂直居中
摘要：vertical-align 垂直对齐 以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto; 以前我们还讲过让文字居中对齐，是 text-align: center; 但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。 vertical-alig 阅读全文
posted @ 2019-10-20 09:45 阿江是个程序猿 阅读(154) 评论(0) 推荐(0)
CSS——用户界面样式
摘要：所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 鼠标放我身上查看效果哦： 尽量不要用hand 阅读全文
posted @ 2019-10-19 15:11 阿江是个程序猿 阅读(388) 评论(0) 推荐(0)
CSS——before和after伪元素
摘要：之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪 阅读全文
posted @ 2019-10-18 14:21 阿江是个程序猿 阅读(165) 评论(0) 推荐(0)
CSS——滑动门技术及应用
摘要：先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构 阅读全文
posted @ 2019-10-17 16:39 阿江是个程序猿 阅读(490) 评论(0) 推荐(0)
CSS案例3（在线教育网站）
摘要：案例练习目的是总结以前的css和html 还有ps的使用。 制作步骤： 头部通栏： 共四部分 logo、导航、搜索栏、个人中心 前两个左浮动，后两个右浮动 banner部分： 背景图片+左侧侧边导航栏+右侧我的课表模块 text-align: center; /* 文字水平居中 */ font-we 阅读全文
posted @ 2019-10-16 19:56 阿江是个程序猿 阅读(268) 评论(0) 推荐(0)
浏览器前缀
摘要： 阅读全文
posted @ 2019-10-16 19:11 阿江是个程序猿 阅读(89) 评论(0) 推荐(0)
CSS——背景渐变
摘要：在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。 兼容性问题很严重，我们这里只讲解线性渐变 语法格式： background:-webkit-linear-gra 阅读全文
posted @ 2019-10-16 19:09 阿江是个程序猿 阅读(274) 评论(0) 推荐(0)
CSS字体图标
摘要：字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出 阅读全文
posted @ 2019-10-16 18:58 阿江是个程序猿 阅读(3023) 评论(0) 推荐(0)
CSS——精灵技术
摘要：精灵技术产生的背景 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和 阅读全文
posted @ 2019-10-16 18:50 阿江是个程序猿 阅读(269) 评论(0) 推荐(0)

上一页 1 2 3 4 5 下一页