HTML + CSS

一、实现考拉商品布局 前面的文章中我们使用浮动实现了京东首页的商品布局，接下来我们使用浮动实现考拉首页的商品布局，如下图所示： 考拉官网中品牌布局的总的宽度为 1098px： 加上左右边框，总宽度为

一、京东首页商品的另一种布局 京东首页还有另一种商品布局，如下所示： 1. 搭建 HTML 基本结构 针对这种布局我们可以按照左右划分，左边两个都是整体，右边四个都进行了上下的排列，共有六个 item

一、京东首页商品布局实现 在了解了浮动的基本使用规则之后，接下来我们尝试使用浮动来实现京东首页的商品布局。 1. 搭建最外层的 HTML 结构以及样式 首先查看商品布局中最外层盒子的宽度为 990px

一、百度底部分页的实现 浮动常用的场景，用来解决行内级元素、inline-block 元素的水平间隙问题，常见的可以用来设置导航栏或者底部页码的分页，比如下面这个分页就可以通过浮动来实现： 接下来我们

一、行内元素的间隙处理 在编写 HTML 时，多个行内级元素之间会有一定的空隙，比如多个 span 元素之间就有一定的空隙，常见一个 HTML 页面，使用一个 div.box 包裹多个 span 元素

一、元素浮动规则 浮动元素不能与行内级元素的内容层叠，行内级的内容将会被浮动元素推出。 创建一个 HTML 页面，设置一个 div.box 包含行内级元素和块级元素，同时设置 div.box 的宽高以

一、元素浮动规则 本文紧接上篇文章来讲述第三个浮动的规则，即 浮动元素之间不能层叠；如果一个元素浮动而另一个元素已经在那个位置了，后面浮动的元素将会紧贴着前一个浮动元素，也就是左浮动找左浮动，右浮动找

一、认识浮动 CSS 浮动属性 float 可以指定一个元素沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它。 float 属性最初只用于在一段文本内浮动图像，实现文字环绕的效果，由于早期的 CS

一、CSS 属性 - z-index CSS 属性 z-index 属性用来设置定位元素的层叠顺序，且只对定位元素有效，取值可以为正整数、负整数或者 0，相当于坐标轴上的 z 轴。 我们来创建一个 H

一、粘性定位 除了前面提到的相对、绝对和固定定位外，还有一个定位就是粘性定位 sticky，给元素设置 position: sticky 即可实现粘性定位。可以使用left、right、top、bot

一、实现网易云音乐首页 item 左上角的图标 网易云音乐首页有的 item 中可能左上角还是包含一个图标，并且这个图标是在另外一张图片当中的，通过浏览器的检查工具查看具体的背景图和图标位置： 根据上

一、实现网易云首页 item 图片上的图标 上篇文章中我们已经实现了封面的基本样式： 与官网中的样式相比还缺少播放量和播放按钮等信息： 第 1 步：设置播放量 在 div.top 中添加一个 div.

一、实现网易云音乐首页的 item 封面 接下来我们通过相对定位和绝对定位来实现网易云音乐首页的 item，如下图所示： 该例中耳机图标、播放量以及播放图标都是盖在图片上的，这里需要通过相对定位和绝对

一、将 position 设置为 absolute/fixed 元素的特点（下） 上篇文章中我们通过绝对定位元素的参照对象的宽度公式实现了元素的居中，根据绝对定位元素的参照对象的高度公式也可以实现元素

一、将 position 设置为 absolute/fixed 元素的特点（中） 绝对定位元素定位参照对象的宽和高 首先先说结论，对于绝对定位元素来说有这样两个公式： 定位参照对象的宽度 = 绝对定位

一、将 position 设置为 absolute/fixed 元素的特点 将元素设置为绝对定位或者固定定位后，元素会有如下特点： 可以随意设置宽高，宽高默认由内容决定 不再受标准流的约束，不再严格执

一、绝对定位案例-子绝父相 绝对定位一般要和带有定位的父级搭配使用，因为是相对父级定位元素来偏移的，那么父级要用什么定位呢？ 最常见的一种方式就是子绝父相 —— 子级是绝对定位，父级要用相对定位，因为

一、绝对定位 当元素的position属性值设置为absolute时，则开启了元素的绝对定位。 创建 HTML 页面，具体代码如下： 在浏览器中打开 HTML 页面，具体效果如下： 可以通过 left

一、相对定位的练习 相对定位即相对自己本身的位置进行定位来改变位置，相对定位常用的场景就是微调位置，这是因为相对定位是不脱离标准流的，常用的应用场景有： 相对定位用来微调元素自身的位置 提升自身的层级

一、固定定位 固定定位可以通过 postion: fixed 来实现，设置固定定位的元素会脱离标准流。 不同于相对定位参考元素自己原来的位置，固定定位移动参考的是对象是视口（viewport），即原点