[上海|荣耀师兄]JS-郭巍|2018年09月06日的日报-技能树.IT修真院

发表于： 2018-09-06 23:33:21

1 697

完成的事情：

完成了任务7的第二个页面，中间列表部分使用了flex,再次使用了百分比单位来进行布局。

<ul>

            <li>

                <div class="via">

                    <p class="rank"> <strong>水民</strong></p>

                    <div class="no-sire"></div>

                    <p class="no">1号</p>

                </div>

                <div class="option">

                        <button class="knife"></button>

                        <button class="loupe"></button>

                        <button class="sign"></button>

                        <button class="cross"></button>

                    </div>

</li>

使用ul作为整体列表的父元素每个li 元素作为一个玩家头像，

第一个div完成了玩家头像的背景色和字体，

第二个定义了头像下的四个小图标。

使用hover、display,来进完成鼠标选择头像时，显示出下方的四个小图标。

明天计划的事情：

完成任务7的第三个页面，添加链接，让页面可以正常跳转。

优化三个页面的代码。

遇到的困难：

audio 只实现了点击进入页面时的音频自动播放，无法做到更改播放控件的按钮。

收获：

了解了audio 和鼠标点击事件，可以调动相对应的脚本来完成播放控件的更改和模拟，但是需要用到js所以暂时还无法理解。

.option button {
    width: 4.17vw;
    height: 4.17vw;
    border: none;
    outline: none;
    background-image: url(css-sprites.png)

}

.knife {
    background-position: -.2rem -.9rem;
}

.loupe {
    background-position: -.9rem -.2rem;
}

.sign {
    background-position: -.2rem -.2rem;
}

.cross: {
    background-position: -.9rem -.9rem;
}

给大小相同的button添加背景图片时，可以在一个选择器中把被背景图片的属性添加进去，然后在单独给每一个button来设置雪碧图中的位置。

返回列表

【任务7】 [上海|荣耀师兄]JS-郭巍 | 2018年09月06日 的日报 中品

评论

分享到

【任务7】 [上海|荣耀师兄]JS-郭巍 | 2018年09月06日的日报中品