1. 首页制作
1.1 楼层区 floor
- 注意这个floor 一个大盒子 包含， 不要给高度，内容有多少，算多少。
注意不要给高度。
楼层区
1.2 家用电器模块
家用电器模块
这个模块 jiadian 不需要写样式。
版心居中对齐 因为这些模块 基本相同，下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是。
1号盒子 box-hd 给一个高度， 有个下边框 里面分为左右2个盒子。
2号盒子 box-bd 不要给高度。
1.3 box-hd 模块
有高度。
左边 h3 盒子 。
右边 div 命名为 tab-list 因为用到 tab 切换效果， 所以 里面 要用 ul 和 li 来做 。
1.4 box-bd 模块
box_bd模块
- 根据tab 切换的原理， 应该还需要一个 tab-content 的 内容来包装 里面的 5个 盒子。
- 分为5个大列 列的宽度 不一致 。
1.5 侧边栏 fixedtool 制作
- 此模块用固定定位 里面包含 li 。
电梯导航
1.5.1 制作电梯导航小技巧
如何让页面缩放的时候导航依旧紧贴版心显示。
首先让电梯导航向右移动屏幕的 50% ，然后向左移动版心的一半 + 导航的宽度 + 导航与版心的间距。
参考 ：电梯导航案例
1.6 知识点 -过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
属性
- 属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
花费时间
- transition-duration 花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒。
运动曲线
默认是 ease。
运动曲线示意图：
过渡动画运动曲线
何时开始
- 默认是 0s 鼠标触发就立即开始 可以设置 延迟触发时间
案例：
<head>
<meta charset="UTF-8">
<title>过渡动画演示</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 1. transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/* 2. 如果需要过渡多个属性使用逗号进行分隔 */
transition: width 1s ease , height 2s linear , background-color 1s ease;
/* 3. all 所有属性都会变化 */
/* 4. 注意：过渡写到本身上 */
/*transition: all;*/
}
div:hover {
width: 300px;
height: 266px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. 列表页面制作
2.1 使用三大标签进行页面优化
- 创建一个html页面，使用三大标签对页面进行优化。
<!-- 网站标题 -->
<title>品优购-综合网购首选-整平低价、品质保证、配送及时、轻松购物</title>
<meta name="description"
content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"/>
2.2 引入公共样式
- 复制页面的重复结构，并引入公共样式。
<!-- 引入网页图标 favicon.ico type 是可以省略的-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- 引入初始化的CSS文件 -->
<link rel="stylesheet" href="css/base.css">
<!--引入公共样式的CSS文件-->
<link rel="stylesheet" href="css/common.css">
2.3 创建一个属于自己的样式文件 list.css
2.4 列表页 header 和 nav 修改
header 和 nav 修改
- 秒杀盒子 sk 定位 即可 second kill 。
- 1 号 盒子 左侧浮动 sk_list 里面包含 ul 和 li 。
- 2 号盒子 左侧浮动 sk_con 里面 包含 ul 和 li。
2.5 列表页主体盒子 sk _container
列表页主体
- 1号盒子 sk _container 给宽度 1200 不要给高度
- 2号盒子 sk_hd 插入图片即可
- 3号盒子 sk_bd 里面包含 很多的 ul 和 li
2.5.1 sk_goods 布局
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 我们这里用定位合适。
2.6 分页制作 page
分页制作page
- 最大的盒子 我们div 命名为 page 注意里面的盒子 全部用 行内块
- 1号盒子 用 span 命名为 page_num ( 页码的意思 ) 里面 放 a 把a 转换为 行内块 设置样式
- pn_prev 上一页 pn_next 下一页
- 2号盒子 用 span 命名为 page_skip ( skip 跳转 转移的意思 ) 里面注意 有 input 和 button
2.7 知识点 -获得焦点元素
:focus伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素:hover语法：
<head>
<meta charset="UTF-8">
<title>文本框获取焦点事件</title>
<style>
div {
width: 500px;
margin: 300px auto;
}
input {
width: 200px;
height: 30px;
outline: none;
text-align: center;
transition: all .2s linear;
}
input:focus {
width: 266px;
height: 38px;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div>
<input type="text" value="点我">
</div>
</body>
失去焦点
获得焦点
