今天完成的事

1.下班后思考获得另一种架构解决小圆点选中样式的问题

可以在不同的页面设置本页面对应的小圆点显示样式，每个页面都不一样，这样就能解决小圆点指示当前页面的问题。

2.根据思路更改版本选择界面架构

<dl class="dl1" id="dl1">
    <dt class="dt">
        <input type="button" value="简化版" class="input1">
        <br/>
            有1133个用户正在玩此款游戏
    </dt>
    <dt class="dt">
        <input type="button" value="猜词版" class="input1">
        <br/>
        有1133个用户正在玩此款游戏
    </dt>
    <dt class="dt">
        <input type="button" value="白痴版" class="input1">
        <br/>
        有1133个用户正在玩此款游戏
    </dt>
    <div class="div2">
        <a type="radio" name="tab" href="#dl1" class="a"></a>
        <a type="radio" name="tab" href="#dl2" class="a"></a>
        <a type="radio" name="tab" href="#dl3" class="a"></a>
        <a type="radio" name="tab" href="#dl4" class="a"></a>
    </div>
</dl>

3.消除版本选择界面的margen。以解决跳转时的样式偏移。

margin: 0px;

4.设置当前页面对应按钮的颜色

<a type="radio" name="tab" href="#dl1" class="a aa"></a>

5.设置切换版本选择界面时平滑切换

.div1 {
    height: 302px;
    overflow: hidden;
    scroll-behavior: smooth;            /*选项卡平滑移动*/
}

6.设置样式来取消移动端的a标签点击时的蓝色效果

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

明天计划的事 

1.想办法让几个版本选择界面横向并排而不是竖向排列

关键思路

flex-shrink属性

flex-basis属性

2.横向并排之后启用平滑移动效果

3.学习如何使用纯CSS画三角形和X型

4.设置好每个版本选择界面的三角形选择按钮 并设置跳转效果

5.尝试使用一个HTML文件来包含版本选择 游戏界面 游戏结果等几个页面

并且架构框架

遇到的问题

1.手机浏览器模式下，点击切换按钮时 其他位置的隐藏按钮会显示一瞬间的点击蓝颜色效果

如下图的位置

从左往右点击会在上端隐藏的位置出现 从右往左点击会在下端隐藏的出现

后面找到了解决方法 在移动端才会造成这种效果

设置以下样式解决

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
　　

2.没有几个列表选择页面横向并列防止在空间里 设置平滑切换效果是上下滑动 不太美观

现在是横向并排的时候文字会自动换行 按钮被挤压 

一时没有找到单个版本选择页面撑开填满整个视窗的方法

收货

1.学会如何取消单选按钮在移动端的蓝色点击效果

css取消a标签在移动端点击时的背景颜色