标签结构
2、CSS 样式
3、展示效果
绘制矩形框中的部分 :
一、网格商品展示模块盒子模型测量及样式
----
1、盒子尺寸测量
下面的 网格商品展示模块盒子模型 , 可以分为三个盒子 ,...最外层的大盒子 , 宽度充满版心 , 1200 像素 ;
顶部的标题所在的盒子 , 宽度也是 1200 像素 ;
下面的列表所在的盒子 , 宽度 1200 像素 , 但是高度不进行设置 , 根据需求灵活设置显示...1 行 , 2 行 或 3 行 ;
2、标题盒子尺寸测量和样式
文本所在盒子 , 与 顶部的导航栏有 15 像素间隔 , 这里使用 上外边距 设置 ;
/* 网格商品展示模块大盒子 距离上面的 导航栏...= 内容高度 , 这里精确的测量 " 精品推荐 " 文本的行高与内容高度 ;
该文本盒子如下图所示 , 文本内容 20 像素 , 文本上面和下面各有 20 像素的空白 ;
行高直接设置为 60 像素...}
/* 设置总体背景 */
body {
background-color: #f3f5f7;
}
/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {
width: