今天完成的事情：

今天完成了任务二页面设置部分的静态页面的书写。

最近有一段时间没写这种小页面了，还真有点不熟练了，还好这个psd图和任务七的差不多，

我依然是把头部固定浏览器顶部布局，整体自适应，不知道做js任务时是不是可以直接写不自适应的，毕竟主要练习的是js

整个页面比较关键的就是下方的玩家人数部分，人数数字部分使用input type=number，按照psd的样式，消除默认的上下箭头

input[type=number] {

  -moz-appearance: textfield;

}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

玩家人数下方用到一个input type=range定义的滑动条，为了与psd内容相符，依然要用到样式重置，如

input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: .6rem;

  height: .36rem;

  background-image: url("slider.png");

}

这里可以改的东西挺多，包括轨道track、滑块thumb的默认样式

明天计划的事情：

完成设置页面js代码，包括根据滑块所在位置填充进度条的功能的实现，对滑动控件属性的设置、事件的监听、以及设置回调函数。监听input事件时，对进度条进行填充。还有点击设置按钮，上方按总游戏人数随机分配身份。

遇到的问题：

进度条部分的自适应没做好，有些地方用的rem，一缩小就跳行了。

收获：

之后的任务应该还要写不少静态页面，今天算是练练手了，由于做的js任务，所以写html和css的时候也要考虑到js，

尽量减少标签数量以减小DOM树的规模，同时给各个需要获取元素和属性的节点添加id选择器。

今天刘明的技术分享会分享了div+css布局相较于table布局的优点。

table布局其实是对table标签的一种滥用，因为table是用来做表格的，

而div+css的优点就是我们一直以来强调的符合w3c标准，代码结构清晰明了，兼容性好；

结构和样式分离，带来足够好的可维护性；提高页面浏览速度；更灵活控制页面布局。