品优购day03

一、首页制作

1.1 楼层区floor

• 不要给高度，根据内容，动态计算

1.2 家用电器模块

• box-hd：里面有tab切换效果
• box-bd：tab-content包装里面的内容

1.3 侧边栏

• 固定定位，里面放li

1.4 过渡

• transition: all 0.6s;

二、列表页制作

2.1 列表页准备

• list.html

2.2 header和nav修改

• 秒杀盒子：使用定位

2.3 列表页主体盒子sk_container

• 宽度1200，不给高度

2.4 sk_goods布局

2.5 分页条

• 全部用行内块

2.6 获得焦点

获得焦点的时候，input变宽

.total input {
  border: 1px solid #ccc;
  height: 30px;
  width: 40px;
  transition: all .5s;
}
/*这个input 获得了焦点*/
.total input:focus {
  width: 80px;
  border: 1px solid skyblue;
}

本文地址：https://blog.csdn.net/yangguo52047/article/details/107639842