列表页准备事项
- 新建list.html及list.css
- 把首页的公共部分的结构和样式引进来
- 引进commen.css文件
header模块
header模块和首页header模块一致 ，多一个秒杀模块。可以用定位实现
nav模块
- nav模块有两个盒子组成
- 左侧盒子左浮动 由ul li组成
- 右侧盒子右浮动 由ul li组成
列表页主体盒子模块
- 1号盒子宽度为1200 居中显示 可以设置为一个版心。不要给高度
- 2号盒子直接插入图片即可
- 3号盒子 由ul li组成，进度条用代码写出来
sk_goods 布局
- 此li 我们命名为 sk_goods
- 1号位置 有 a 包含 本图片 和下面的 标题 插入 图片即可 seckill_mod_goods_img 可以做一个 鼠标放入 图片 上滑动的效果
- 2号位置 标题 H5 命名为 sk_goods_title
- 3号 位置 为 价格 div 命名为 sk_goods_price
- 4号位置 为 div 命名为 sk_goods_progress 此处，我们 采取 代码的形式 写出 这个 导航条
- 5号位置 为 a 链接 命名为 sk_goods_buy 此处注意， 因为父盒子已经有左右padding 我们这里用定位合适
分页制作
- div嵌套两个盒子
- 两个盒子全由a组成 所以使用text-align居中对齐
表单获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
width: 100px;
border: 1px solid red;
background-color: red;
transition: all 2s;
}
input:focus {
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
源码：pan.baidu.com/s/1IqD9Glj2…
