[成都|内门弟子]CSS-何俊|2020年06月25日的日报-技能树.IT修真院

发表于： 2020-06-25 21:25:58

1 1192

今天完成的事情：

了解了css制作胶囊导航栏

了解了css制作轮播图的两种方法

1.html:

            <nav class="navbar">
                <div class="nav-box">
                    <input type="checkbox" id="nav-toggle">
                    <label for="nav-toggle">
                        <img src="./images/src/jnshu按钮.jpg" style="width: 3rem;height: 3rem;">
                    </label>
                    <ul class="nav-list">
                        <li>
                            <a href="#">关于</a>
                        </li>
                        <li>
                            <a href="#">菜单二</a>
                        </li>
                        <li>
                            <a href="#">菜单三</a>
                        </li>
                    </ul>
                </div>
            </nav>

css:

            .navbar {
                background-color: green;
                width: 100%;
                height: 6rem;
            }

            .nav-box {
                text-align: right;
                width: 90%;
                margin: 0 auto;
            }

            input {
                display: none;
            }

            label {
                display: none;
            }

            .nav-list {
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: row-reverse;
                line-height: 6rem;
            }

            li {
                font-size: 1.3rem;
                list-style: none;
                margin-bottom: 4px;
                margin-left: 3rem;
                line-height: 5.6rem;
                padding-left: 1rem;
                padding-right: 1rem;
            }

            li:hover {
                border-bottom: 4px solid white;
                margin-bottom: 0;
            }

            a {
                text-decoration-line: none;
                color: #fff;
            }

            @media screen and (max-width:767px) {
                .nav-list {
                    display: none;
                }

                input:checked~.nav-list {
                    display: block;
                }

                label {
                    display: inline-block;
                    margin: 1.3rem 1rem;
                }

                input:checked~li {
                    clear: both;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .navbar {
                    background-color: green;
                    width: 100%;
                    height: auto;
                }
            }