今天完成的事

1.学习html列表部分的内容

2.根据列表修改版本选择部分的结构代码

<dl class="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>
</dl>

3.简单架构圆点切换按钮部分

<div>
    <input type="radio" name="sildeinput" value="" id="input1" >
    <label class="label1" for="input1"></label>
    <input type="radio" name="sildeinput" value="" id="input2" >
    <label class="label1" for="input2"></label>
    <input type="radio" name="sildeinput" value="" id="input3" >
    <label class="label1" for="input3"></label>
    <input type="radio" name="sildeinput" value="" id="input4" >
    <label class="label1" for="input4"></label>
</div>

4.设置圆点切换按钮样式

.div2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

5.经过几天繁忙的工作之后重新开始学习，重新整理思路

6.查找资料并且比对方法之后采用《href="#"》的跳转方式配置不同div设置不同id来设置圆点切换按钮

7.将透明圆点按钮的结构及代码重新调整 使用“a”跳转标签

<div class="div2">
    <a href="#dl1" class="a"></a>
    <a href="#dl2" class="a"></a>
    <a href="#dl3" class="a"></a>
    <a href="#dl4" class="a"></a>
</div>

8.根据实际使用情况调整为

<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>

9.学习了属性选择器【】和：before伪类的内容

10.初步设置伪类的css部分

a[type="radio"] {
    /*display: none;*/
}
a[type="radio"] + label {
    position: relative;
}
a[type="radio"] + label:before {
    content: ;
    width: 5px;
    height: 5px;
    background-color: transparent;
    border: 1px solid silver;
    border-radius: 50%;
    display: block;
}
a[type="radio"]:checked + label:before {
    content: ;
    width: 5px;
    height: 5px;
    background-color: aqua;
    border-radius: 50%;
    display: block;
}

明天计划的事

1.完善版本选择下的圆点切换标签

2.修改三角按钮标签为《a》

3.将三角按钮分到各个页面中并设置跳转“href=”

2.完善整个版本选择界面的代码

3.开始游戏界面主体的构思，并完成简单架构。

遇到的问题

1.几天不学重新找回状态就很艰难

2.input标签不能使用href属性 后面切换到a标签

3.不同标签里type=“radio”时 name=“”或者id=“”里的属性值要相同（比如同为name=“tab”）

这几个按钮才能成为多项单选按钮

4.对伪类的使用很不熟练 

收货

1.学习了属性选择器【】和：before伪类的内容以及label

CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。