[散修弟子]CSS-7961|2019年11月06日的日报-技能树.IT修真院

发表于： 2019-11-06 01:11:38

1 994

今天完成的事

1.前两天写的日报内容浏览器竟然清理缓存了然后不见了

2.补充一些吧完成了版本选择页面架构

<body>
  
<input type="checkbox" id="input">
<label class="label" for="input">
    <span></span>
    <span></span>
    <span></span>
</label>

<nav class="nav">
    <ul class="ul">
        <li>公告</li>
        <li>设置</li>
        <li>帮助</li>
        <li>关于</li>
    </ul>
</nav>
 
<main class="main"> 
    <header class="header"></header>
    <div>
        <a type="button" href="task13-2.html" class="button">
            上次游戏:捉鬼猜词版
        </a>
    </div>
    <h>捉鬼游戏</h>
    <div> 
        <dl id="dl1">
            <dt>
                <a type="button" href="task13-2.html">简化版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">猜词版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">白痴版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt class="tab">
                <a type="radio" name="tab" href="#dl1" class="a bac-color"></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>
            </dt>
            <a type="radio" href="#dl2" class="triangle-right"></a>
        </dl>
        <dl id="dl2">
            <dt>
                <a type="button" href="task13-2.html">简化版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">猜词版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">白痴版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt class="tab">
                <a type="radio" name="tab" href="#dl1" class="a "></a>
                <a type="radio" name="tab" href="#dl2" class="a bac-color"></a>
                <a type="radio" name="tab" href="#dl3" class="a "></a>
                <a type="radio" name="tab" href="#dl4" class="a "></a>
            </dt>
            <a type="radio" href="#dl1" class="triangle-left"></a>
            <a type="radio" href="#dl3" class="triangle-right"></a>
        </dl>
        <dl id="dl3">
            <dt>
                <a type="button" href="task13-2.html">简化版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">猜词版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">白痴版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt class="tab">
                <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 bac-color"></a>
                <a type="radio" name="tab" href="#dl4" class="a "></a>
            </dt>
            <a type="radio" href="#dl2" class="triangle-left"></a>
            <a type="radio" href="#dl4" class="triangle-right"></a>
        </dl>        
        <dl id="dl4">
            <dt>
                <a type="button" href="task13-2.html">简化版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">猜词版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt>
                <a type="button" href="task13-2.html">白痴版</a>
                <br/>
                有1133个用户正在玩此款游戏
            </dt>
            <dt class="tab">
                <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 bac-color"></a>
            </dt>
            <a type="radio" href="#dl3" class="triangle-left"></a>
        </dl>   
    </div>
</main>  
    

3.完成版本选择页面样式

input {
    .none;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;/*隐藏默认行前小点*/
}

.label {
    .fixed;
    .flex;
    .width(30px);
    .height(30px);
    .pointer;
    top: 10px;
    left: 10px;
    flex-direction: column;
    justify-content: center;
    z-index: 100;
    span {
        .width(30px);
        .height(3px);
        .white;
    }
    span:nth-of-type(1) {
        transform: translateY(-5px);
    }
    span:nth-of-type(3) {
        transform: translateY(5px);
    }
}
 
#input:checked~.label {
    transform: rotate(360deg);
    transition:  transform 250ms ease;
    span:nth-of-type(1) {
        transform: translateY(3px) rotate(45deg);
        .bac-color;
    }
    span:nth-of-type(2) {
        display: none;
    }
    span:nth-of-type(3) {
        transform: rotate(-45deg);
        .bac-color;
    } 
}
#input:checked~.nav {
    left: 0;
    transition: left 500ms ease;
}
#input:checked~.main {
    transform: translateX(300px);
    transition: transform 500ms ease;
}


.nav {
    .fixed;
    .block;
    .width(300px);
    .height(100%);
    left: -301px;
    transition: left 500ms ease;
    border-right: 1px solid silver;
    .white;
    .ul {
        position: relative;
        margin: 100px 0;
        padding: 0;
        li {
            .flex;
            justify-content: space-between;
            padding: 10px 10px 10px 50px;
            .color;
            border-bottom: 1px solid silver;
        }
        li::after {
            content: "";
            .block;
            .width(15px);
            .height(15px);
            position: relative;
            float: right;
            right: 10px;
            border-top: 3px solid  rgb(41, 189, 224);
            border-right: 3px solid  rgb(41, 189, 224);
            transform: rotate(45deg);
        }
    }
}

.main {
    .block;
    .vw100;
    .height(100%);
    transform: translateX(0px);
    transition: transform 500ms ease;
    .header {
        .bac-color;
        .fixed;
        top: 0;
        left: 0;
        .vw100;
        .height(50px);
    }
    div:nth-of-type(1) {
        margin: 70px 20px 20px 20px;
        .button {
            .flex;
            border: 1px solid rgb(201, 201, 201);
            height: 70px;
            .vw100;
            .white;
            color: rgb(154, 154, 154);
            line-height: 70px;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
        }
    }
    div:nth-of-type(1)::after {
        content: "";
        .block;
        .relative;
        .width(20px);
        .height(20px);
        float: right;
        right: 5vw;
        top: -50px;
        border-top: 6px solid rgb(231, 231, 231);
        border-right: 6px solid rgb(231, 231, 231);
        transform: rotate(45deg);
    }
    h {
        .block;
        .height(50px);
        text-align: center;
        line-height: 50px;
        color: rgb(251, 180, 53);
        font-size: 26px;
        .white;
        border: 1px solid rgb(201, 201, 201);
        border-bottom: 1px solid rgb(251, 180, 53);
        margin: 20px 20px 0px 20px;
    }
    div:nth-of-type(2) {
        .flex;
        overflow: hidden;
        scroll-behavior: smooth;
        border: 1px solid rgb(201, 201, 201);
        margin: 0 20px 0 20px;
        .white;
        dl {
            flex-direction: column;
            margin-top: 30px;
            .flex;
            .relative;
            .vw100;
            align-items: center;
            flex-shrink: 0;
            dt {
                .width(80%);
                line-height: 40px;
                color: rgb(120,120,120);
                font: 12px;
                text-align: center;
                a {
                    display: inline-block;
                    .vw100;
                    .height(50px);
                    background-color: rgb(105, 209, 233);
                    color: white;
                    border: 0;
                    .pointer;
                    font-size: 18px;
                    line-height: 50px;
                    text-align: center;
                }
            }
            .tab {
                .flex;
                justify-content: center;
                align-items: center;
                .a {
                    .block;
                    background-color: transparent;
                    .width(10px);
                    .height(10px);
                    border: 1px solid silver;
                    border-radius: 50%;
                    margin-left: 5px;
                }
                .bac-color {
                    .bac-color;
                }
            }
        
        }
    }
}

4.开始游戏页面

使用选择页面一样的隐藏导航栏与header架构

5.架构一个返回按钮并使用两个伪元素完成X号

<header class="header">
        投票
        <a href="task13-1.html"></a> 
    </header>

a {
        .block;
        .width(30px);
        .height(30px);
        .absolute;
        .pointer;
        top: 10px;
        right: 20px;
    }
    a::after {
        .content;
        .width(2px);
        .height(40px);
        float: right;
        top: -5px;
        right: 15px;
        transform: rotate(45deg);
        background-color: white;
    }
    a::before {
        .content;
        .width(2px);
        .height(40px);
        float: right;
        top: -5px;
        right: 15px;
        transform: rotate(-45deg);
        background-color: white;
    }