2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(三)

品优购项目(三)

1. 首页制作

1). 楼层区 floor

注意这个floor 一个大盒子包含，不要给高度，内容有多少，算多少

2). 家用电器模块

这个模块简单不需要写样式
版心居中对齐因为这些模块基本相同，下面的模块基本用这些样式所以咱们下面两个盒子的命名是：
1号盒子 box-hd 给一个高度，有个下边框里面分为左右2个盒子
2号盒子 box-bd 不要给高度。

3). box-hd 模块

有高度
左边 h3 盒子
右边 div 命名为 tab-list 因为用到 tab 切换效果，所以里面要用 ul 和 li 来做。

4). box-bd 模块

根据tab 切换的原理，应该还需要一个 tab-content 的内容来包装里面的 5个盒子
分为5个大列列的宽度不一致

5). 侧边栏 fixedtool 制作

此模块用固定定位里面包含 li

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 鼠标触发就立即开始可以设置延迟触发时间

案例：

div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
			transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
			/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
			
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

			width: 600px;
			height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

transition: all 0.5s;

常见效果：

按钮变换底色图片移动小米效果（阴影效果）传智导航栏效果等等

2. 列表页制作

1). 列表页准备工作

列表页面是新的页面，我们需要新建 list.html
因为列表页的头部和底部基本一致，我们需要把首页中的头部和底部的结构复制过去
头部和底部的样式，列表也需要，因此 list.html 也需要引入 common.css
同时需要新的 list.css 文件这个样式文件，里面只写 list.html 结构里面的内容就好了

秒杀盒子 sk 定位即可 second kill
1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
2 号盒子左侧浮动 sk_con 里面包含 ul 和 li

3). 列表页主体盒子 sk _container

这个盒子里面包含了所有的列表页的所有主体内容

1号盒子 sk _container 给宽度 1200 不要给高度
2号盒子 sk_hd 插入图片即可
3号盒子 sk_bd 里面包含很多的 ul 和 li

4). 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 我们这里用定位合
适。

5). 分页制作 page

最大的盒子我们div 命名为 page 注意里面的盒子全部用行内块
1号盒子用 span 命名为 page_num ( 页码的意思 ) 里面放 a 把a 转换为行内块设置样式

pn_prev  上一页     pn_next  下一页

2号盒子用 span 命名为 page_skip ( skip 跳转转移的意思 ) 里面注意有 input 和 button

6). 知识点 -获得焦点元素

:focus 伪类选择器用于选取获得焦点的元素。我们这里主要针对的是表单元素

:hover

语法：

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

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