今天完成的事情：

task9彻底完事

明天计划的事情：

重写task9，尽量简化整合。

遇到的问题：

这个list的样式通过看师兄的日报知道可以用appearance解决。

收获：

把写task9的整个过程和遇到的问题写一下，以下为本人第一次写task9的思路

思路：

1、“登录”“注册”图标（此处为span）效果通过如下方式完成。

       a、span内设置好初始样式

       b、对span的声明内加入“transition：‘属性  变化时间’，‘属性  变化时间’”，两组属性之间逗号衔接。

       c、span：hover内设置变换后的样式。

2、首页行用列表完成。（单独div）

3、定制纸箱行，通过给文字增加上边距，再对数字绝对定位。（单独div）

4、从“请按照以下步骤来定制你的纸箱”至“footer”之上化为一个整体“main”

5、“main”内“箱形”“尺寸”“材质”三大块（不算3中文字及“下一步div”）

6、“选择箱形”分“标题div”和“input  div”，“input  div”以列表呈现，<select>含在<ul>”中，与<li>并列。<ul>内格式为

       对<input>的“原样式进行opacity:0”，替代框<div>绝对定位到“原input”位置进行遮挡。

       （此处遇到问题，

       Q1：替代框怎么做？

       A1：大圈套小圈，定位；

       Q2：如何让鼠标选中“对口箱”时，前面的替代框<div>响应？

       A2：input:checked+div；）

7、<select>右浮动

      （遇到问题：

       Q1：如何使<select>原样式消失？

       A1：select的样式表中加入appearance：none；

       Q2：为什么加了appearance不好用？

       A2：）

8、“select”中自定义图标以背景方式引入，通过“background-position”调整。

9、“确定尺寸”分为两个ul，“外径+长宽高+查看详情list”为一个ul，“内径+长宽高”为另一个ul；

      “外径”“内径”name相同id不同，通过<label for="id">结合：checked来保证“鼠标选中外径时只有外径的input进行响应”（这           里并不确定是否正确，望指教）

10、“选择材质”部分由于之前设置“opacity：0”导致“input”消失，单独定义“opacity：1”进行覆盖。

最大的困难在第6步，到现在还不是很明朗

针对<label><input>这两个标签还有困惑：

1、这两个标签哪些属性是必须的？

2、这两个标签的“id”“name”“value”属性始终比较混乱

3、<select>标签掌握的还不够