2.7日学习记录-CSDN博客

本文链接：https://blog.csdn.net/H0r1zon/article/details/136069297

依旧边学边写

重新复习了一下css的盒子模型和传统的网页布局方式（主要是自己练手的项目和实际上自己写的项目差别很大）。

（ps：原来的笔记本在学校没有带回来所以只能重新开始记点笔记）

小年后就开始忙了，所以这周只是做了一个简单的登录注册窗口以及图片轮播的效果。本来想的登录注册时新开一个窗口，类似于下列这种。

然后发现一是不美观，再者又不方便使用，再加上用js写的窗口居中有点问题（测试后才发现他酸的屏幕尺寸是我两个屏幕的尺寸加在一起/2），这样会导致点开的时候窗口靠在两个屏幕的连接处，还没想办法解决这个问题。

登录功能：

// 等待DOM内容完全加载
document.addEventListener("DOMContentLoaded", function() {
    // 通过ID获取登录按钮
    var loginButton = document.getElementById("nav-login");

    // 添加点击事件监听器到登录按钮
    loginButton.addEventListener("click", function() {
        // 调用函数显示登录窗口
        showLoginWindow();
    });

    // 显示登录窗口的函数
    function showLoginWindow() {
        // 创建一个新的窗口或模态框（你可以根据需要自定义此部分）
        var loginWindow = window.open("", "Login Window", "width=400,height=300");

        // 向登录窗口添加内容（你可以自定义此部分）
        loginWindow.document.write("<h2>登录窗口</h2>");
        loginWindow.document.write("<form>");
        loginWindow.document.write("<label for='username'>用户名：</label>");
        loginWindow.document.write("<input type='text' id='username' name='username'><br>");
        loginWindow.document.write("<label for='password'>密码：</label>");
        loginWindow.document.write("<input type='password' id='password' name='password'><br>");
        loginWindow.document.write("<input type='submit' value='登录'>");
        loginWindow.document.write("</form>");
    }
});

图片轮播+滚动条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 设置轮播容器的样式 */
        #slider-container {
            width: 80%; /* 设置轮播容器宽度 */
            margin: auto; /* 水平居中 */
            overflow: hidden; /* 隐藏超出容器部分的内容 */
        }

        /* 设置轮播列表的样式 */
        #slider-list {
            display: flex; /* 使用 Flex 布局 */
            transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
        }

        /* 设置轮播项的样式 */
        .slider-item {
            min-width: 100%; /* 每个轮播项占据整个容器宽度 */
            box-sizing: border-box; /* 包含边框和内边距在内的元素的总宽度 */
        }

        /* 设置滚动条的样式 */
        body {
            overflow-y: scroll; /* 显示垂直滚动条 */
            margin: 0; /* 移除默认的页面边距 */
        }
    </style>
</head>
<body>

    <div id="slider-container">
        <div id="slider-list">
            <div class="slider-item">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="slider-item">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <!-- 添加更多轮播项 -->
        </div>
    </div>

    <script>
        // 获取轮播列表和轮播容器的引用
        var sliderList = document.getElementById('slider-list');
        var sliderContainer = document.getElementById('slider-container');

        // 自动轮播的间隔时间（毫秒）
        var interval = 3000;

        // 设置定时器，实现自动轮播
        setInterval(function () {
            // 计算下一个轮播位置
            var newPosition = sliderList.scrollLeft + sliderContainer.clientWidth;

            // 如果已经到达最后一个轮播项，回到第一个轮播项
            if (newPosition >= sliderList.scrollWidth) {
                newPosition = 0;
            }

            // 使用平滑滚动效果
            sliderList.style.transition = 'transform 0.5s ease-in-out';
            sliderList.style.transform = 'translateX(' + -newPosition + 'px)';
        }, interval);
    </script>

</body>
</html>

登录窗口（这里还没实际运用，改成了用div窗口，这样的话方便对窗口的style进行修改）

<button id="showLoginWindowBtn">点击显示/隐藏登录窗口</button>

<div id="nav-login-window">
    <!-- 窗口内容 -->
</div>

<script>
    // 获取按钮和登录窗口的引用
    var showLoginWindowBtn = document.getElementById('showLoginWindowBtn');
    var loginWindow = document.getElementById('nav-login-window');

    // 初始化状态，隐藏登录窗口
    loginWindow.style.display = 'none';

    // 添加点击事件监听器
    showLoginWindowBtn.addEventListener('click', function () {
        // 切换登录窗口的显示状态
        if (loginWindow.style.display === 'none') {
            loginWindow.style.display = 'block';
        } else {
            loginWindow.style.display = 'none';
        }
    });
</script>

然后就是关于伪元素

双冒号(::)和单冒号(:)：

在CSS中，双冒号(::)用于表示伪元素，而单冒号(:)用于表示伪类。虽然在实践中，许多浏览器对于伪元素和伪类的使用都支持使用单冒号，但根据最新的规范，建议使用双冒号(::)以区分伪元素和伪类。

::before和::after伪元素：

::before 和 ::after 是最常见的伪元素。它们允许你在元素的内容之前或之后插入生成的内容，而无需在HTML中添加额外的元素。这通常用于添加装饰性的内容或图标

.example::before {
    content: "Before Content";
}

.example::after {
    content: "After Content";
}