前端开发入门教程-CSS3的2D3D转换与动画
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. 2D转换 1.1 translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y...
前端开发入门教程-HTML5 和 CSS3 提高
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. HTML5新特性 1.1 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是...
前端开发入门教程-CSS（七）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. 精灵图（重点） 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服...
前端开发入门教程-CSS（六）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？ 场景1： 某个元素可以自由...
前端开发入门教程-CSS（五）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. PS 切图 1.1 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们...
前端开发入门教程-CSS（四）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. 浮动 1.1 传统网页布局的三种方式 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子...
前端开发入门教程-CSS（三）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. 盒子模型 1.1 看透网页布局的本质 网页布局过程： 1.先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2.利用 CSS 设置好盒子样式，然后...
前端开发入门教程-CSS（二）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. Emmet语法 1.1 快速生成HTML结构语法 1.生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div...
前端开发入门教程-CSS（一）
本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。 1. CSS 简介 1.1 HTML 的局限性 说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1> 表明这是一个大标题，&l...