1k 字 1 分钟

# CSS3 2D 转换 转换 (transform) 是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果 移动 : translate 旋转 : rotate 缩放 : scale # 2D 转换之移动 translate 2D 移动是 2D 转换里面的一种功能，可以改变元素再页面中的位置，类似定位 == 语法 : 123transform: translate(x, y); /*或者分开写*/transform: translateX(n);transform: translateY(n); 重点 : 定义 2D 转换中的移动，沿着 X 和 Y...
2k 字 2 分钟

# 品优购项目 # 项目搭建 需要创建如下文件夹 : 名称 说明 项目文件夹 shoping 样式类图片文件夹 images 样式文件夹 css 产品图片文件夹 upload 字体类文件夹 fonts 脚本文件夹 js 需要创建如下文件 : 名称 说明 首页 index.html CSS 初始化样式文件 base.css CSS 公共样式文件 common.css 模块化开发 有些央视和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复利用 这里最典型的应用就是 common.css...
344 字 1 分钟

# CSS3 过渡 过渡 (transition) 是 CSS3 中具有颠覆性的特征之一，我们可以在不使用 flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式是为元素添加效果 过渡动画：是从一个状态 渐渐的过渡到另一个状态 可以让我们页面更好看，更具有动感，虽然低版本浏览器不支持 (IE9 以下版本) 但是不会影响页面布局 == 经常和 :hover 一起搭配使用 语法 : 1transition: 要过渡的属性 花费时间 运动曲线 何时开始; 属性：想要变化的 CSS 属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个...
1.7k 字 2 分钟

# CSS3 新特性 # CSS3 的现状 新增的 CSS3 特性有兼容性问题，IE9 + 才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习 : 新增选择器和盒子模型以及其他特性 # 新增选择器 CSS3 新增了选择器，可以更加便捷，更加自由的选择目标元素 属性选择器 结构伪类选择器 伪元素选择器 ** 注意 : ** 类选择器，属性选择器，伪类选择器，权重为 10 # 属性选择器 属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者 id 选择器 选择符 简介 E[att] 选择具有 att 属性的 E...
1.5k 字 1 分钟

# HTML5 新特性 HTML5 的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等 这些新特性都有兼容性问题，基本是 IE9 + 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性 # 语义化标签 <header> : 头部标签 <nav> : 导航标签 <article> : 内容标签 <section> : 定义文档某个区域 <aside> :...
1.2k 字 1 分钟

# CSS 初始化 不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容性，我们需要对 CSS 初始化 简单理解 : CSS 初始化是指重设浏览器的样式 (也称 CSS reset) 每个网页都必需首先进行 CSS 初始化 Unicode 编码字体 : 把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS 代码是出现乱码的问题 例 : 黑体 : \9ED1\4F53 宋体 : \5B8B\4F53 微软雅黑 :...
246 字 1 分钟

# vertical-align 属性应用 CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单 (行内块元素) 和文字垂直对齐 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效 语法 : 1vertical-align: baseline | top | middle | bottom 值 描述 baseline 默认，元素放置在父元素的基线上 top 把元素的顶端于行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部 bottom 把元素的顶端与行中最低的元素的顶端对齐
263 字 1 分钟

# CSS 用户页面样式 所谓的页面样式，就是更改一些用户操作样式，以便提高更好的用户体验 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 # 鼠标样式 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状 1li {cursor: pointer;} 属性值 描述 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 # 表单轮廓线 : outline 1input {outline: none;} #...
354 字 1 分钟

# 字体图标 字体图标使用场景：主要用于显示网页中通用，常用的一些小图标 精灵图是有诸多优点的，但是缺点很明显 图片文件还是比较大 图片本身放大和缩小会失真 一旦图片制作完毕想要更换非常复杂 此时有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体 优点...
124 字 1 分钟

# 精灵图 # 精灵图的使用 使用精灵图核心 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中 这个大图片也成为 sprites 精灵图或者雪碧图 移动背景图片位置，此时可以使用 background-position 一半情况下精灵图坐标都是负值