今天完成的事

1.开始任务7

首页页面结构构思

2.构建header

<header class="header">
</header>

.header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background-color: rgb(41, 189, 224);
    background-image: url("header1.png");
    background-position: 10px ;
    background-repeat: no-repeat;
}

3.架构“上次游戏”按钮

<del>
    <input type="button" value="上次游戏：抓鬼猜词版" class=""> 
</del>

4.设置“上次游戏”按钮样式

.input {
    position: fixed;
    top: 70px;
    left: 20px;
    border: 1px solid ;
    height: 70px;
    width: 100%;
    background-color: white;
    color: silver;                            /*设置文字颜色*/
    font-size: 20px;
    background-image: url("back-Icon.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 95%;                /*定位图标位置*/
}

5简单架构版本选择标题

<div class="div">
    <h class="h">
        捉鬼游戏
    </h>
    <div1>

    </div1>
</div>

6.设置版本选择部分的样式

.div {
    margin: 20px 20px 0px 20px;
    height: 100px;
    border: 1px solid rgb(201, 201, 201);
    background-color: white;
}

7.设置版本选择部分标题的样式

.h {
    display: block;
    border-bottom: 1px solid rgb(251, 180, 53);
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;                          /*设置文字垂直居中*/
    color: rgb(251, 180, 53);                   /*设置文字颜色*/
    font-size: 26px;
}

8.设置版本选择部分段落为display：flex 弹性盒子布局 主轴从上往下

.div2 {
    display: flex;
    flex-direction: column;                     /*设置主轴方向从上到下*/
}

9.经过思考 修改整体架构思路

10.简单架构版本选择按钮部分

<div1 class="div1">
    <div2 class="div2">
        <input type="button" value="简化版" class="input1">
        <br/>
            有1133个用户正在玩此款游戏
    </div2>
    <div2 class="div2">
        <input type="button" value="猜词版" class="input1">
        <br/>
        有1133个用户正在玩此款游戏
    </div2>
    <div2 class="div2">
        <input type="button" value="白痴版" class="input1">
        <br/>
        有1133个用户正在玩此款游戏
    </div2>

11.设置按钮部分的样式

.div1 {
    display: flex;
    flex-direction: column;                     /*设置主轴方向从上到下*/
    align-items: center;
    padding: 20px 20px 0px 20px;

}
.div2 {
    width: 100%;
    text-align: center;
    line-height: 40px;
    color: rgb(120, 120, 120);
}
.input1 {
    width: 100%;
    height: 50px;
    background-color: rgb(105, 209, 233);
    color: white;
    border: 0px;
    cursor: pointer;                    /*s设置光标样式手指变化*/
}

12.插入左右切换的三角按钮

<input type="button" class="img">

13.引入三角按钮的样式

.img {
    position: fixed;
    top: 324px;
    right: 21px;
    width: 20px;
    height: 40px;
    background-image: url("多边形.png");
    background-size: 20px;
    background-color: white;
    border: 0px;
    cursor: pointer;                    /*s设置光标样式手指变化*/
}

明天计划完成的事

1.完成版本选择页面的四个圆点翻页

2.开始投票页面

遇到的问题

1.css四个小圆点的效果，想通过根据屏幕高度自动分页的效果实现，但是没有思路。

看了其他师兄的日报都是设点圆点和按钮跳转页面的方式实现，不太有自适应的风格。

明天找找有没有自动分页显示几个圆点的方法。

收货

1.更加熟悉了flex弹性盒子。

2.学会了

align-items: center;

交叉轴中点对齐

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。