让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )

一、横向导航栏实现核心要点1、固定定位下面的布局设置2、设置横向导航栏弹性布局3、弹性布局主轴和侧轴设置4、二倍精灵图二、代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、顶部固定定位搜索栏1、固定定位盒子居中对齐2、设置最大宽度和最小宽度3、使用 Flex 弹性布局管理宽度4、二倍精灵图设置5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 )二、代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、案例框架搭建1、html 标签结构2、css 初始样式

一、order 子项目属性 - 设置子项目元素排列顺序二、代码示例 - 设置子项目元素排列顺序

一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式二、代码示例 - 设置指定子项目的侧轴排列方式

一、flex 子项目常用属性1、子项目常用属性介绍2、flex 属性用法说明二、flex 属性代码示例1、代码示例 - 左右两侧 100 像素 / 中间元素占有所有剩余布局3、代码示例 - 平均分成三等份

一、设置主轴方向和是否自动换行 : flex-flow 样式说明1、flex-flow 样式2、flex-flow 样式属性值二、代码示例

一、设置侧轴多行子元素排列方式 : align-content 样式说明1、align-content 样式引入2、align-content 样式属性值二、代码示例1、代码示例 - 侧轴多行元素从上到下排列2、代码示例 - 侧轴多行元素垂直居中3、代码示例 - 侧轴多行元素平分剩余空间4、代码示例 - 侧轴多行元素 / 上下两行紧贴顶部和底部 / 其余元素平分剩余空间5、代码示例 - 侧轴多行元素自动拉伸平分父元素高度

一、设置子元素是否换行 : align-items 样式说明1、 align-items 样式引入2、 align-items 样式属性值二、代码示例1、 代码示例 - 默认样式2、 代码示例 - 设置主轴水平居中3、 代码示例 - 设置侧轴垂直居中4、 代码示例 - 设置侧轴从下到上排列5、 代码示例 - 设置侧轴拉伸排列

一、设置子元素是否换行 : flex-wrap 样式说明1、flex-wrap 样式引入2、flex-wrap 样式取值说明二、代码示例1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行2、代码示例 : 自动换行

一、设置主轴子元素排列方式 : justify-content 样式说明二、代码示例1、代码示例 - 子元素从头部开始排列2、代码示例 - 子元素从尾部开始排列3、代码示例 - 子元素在主轴方向上居中对齐4、代码示例 - 子元素平均分配剩余空间5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间

一、flex 弹性布局原理二、flex 容器 ( Flex Container ) 属性三、设置主轴方向 flex-direction 样式1、主轴与侧轴2、设置主轴方向 flex-direction3、代码示例 - 默认主轴方向: 从左到右4、代码示例 - 修改主轴方向 : 从右到左5、代码示例 - 修改主轴方向 : 从上到下6、代码示例 - 修改主轴方向 : 从下到上

一、传统布局与 flex 弹性布局二、flex 弹性布局简单使用1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高2、代码示例 - flex 弹性布局设置权重

一、水平排列的图片链接样式及核心要点1、实现效果2、HTML 结构3、CSS 样式二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、多排按钮导航栏样式及核心要点1、实现效果2、总体布局设计3、设置浮动及宽度4、设置图片样式5、设置文本二、完整代码实例1、HTML 标签结构2、CSS 样式3、展示效果

一、搜索栏样式及核心要点1、实现效果2、标签结构设置3、设置圆角和超过部分隐藏4、设置浮动并精确计算宽度5、设置图片宽度自适应二、完整代码实例1、HTML 标签结构2、CSS 样式设置3、展示效果

一、搜索栏样式及核心要点1、实现效果2、核心要点分析二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、搜索栏样式及核心要点1、实现效果2、自动伸缩搜索栏实现3、搜索栏父容器设置4、搜索栏左右两侧的按钮盒子5、搜索栏盒子6、二倍精灵图处理方案二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、样式测量及核心要点1、样式测量2、高度设定3、列表项设置4、设置每个元素的百分比宽度5、设置图像宽度二、核心代码编写1、HTML 标签结构2、CSS 样式3、展示效果三、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、视口标签设置二、CSS 样式文件设置三、布局宽度设置1、设置布局宽度2、设置布局最大宽度3、设置布局最小宽度4、查看网页最大最小宽度5、布局宽度设置四、代码示例1、主界面标签2、CSS 布局设置

一、流式布局简介二、流式布局代码示例

一、移动端常见布局二、Webkit CSS样式初始化1、引入 normalize.css 样式文件2、取消链接点击时的高亮效果3、禁用长按弹出菜单4、取消按钮的自定义样式5、完整代码示例

一、CSS3 盒子模型 box-sizing二、CSS3 盒子模型 box-sizing 代码示例

一、webkit 内核二、移动端网页 CSS 初始化 - normalize.css

一、移动端页面布局方案1、单独制作的移动端页面2、响应式页面兼容移动端

一、在 PhotoShop 中使用 Cutterman 切二倍图二、使用二倍图作为背景图像

一、背景图像缩放二、代码示例1、不设置 background-size 的默认状态2、宽高不等比例拉伸 - 同时设置 宽度 / 高度 的 像素值 / 百分比值3、宽高等比例拉伸 - 只设置 宽度 的 像素值 / 百分比值4、宽高等比例拉伸 - 设置 cover 完全覆盖盒子模型5、宽高等比例拉伸 - 设置 contain 在宽度或高度一个方向上充满父容器

一、视网膜屏技术二、二倍图概念三、代码示例

一、物理像素 / 物理像素比二、代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果

一、meta 视口标签简介二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例三、meta 视口标签代码示例1、不设置 meta 视口标签代码示例2、设置 meta 视口标签代码示例

一、视口1、布局视口 ( 网页大小 | 网页大小 > 设备大小 )2、视觉视口 ( 设备大小 | 网页大小 > 设备大小 )3、理想视口 ( 网页大小 = 设备大小 )

一、移动端浏览器二、移动端屏幕分辨率三、移动端网页调试方法