购物网站练习_电商网站网址模拟练习-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_81142776/article/details/140638404

网站首页

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Website</title>
<style>
    /* Resetting default margin and padding */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Basic styles for body */
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        line-height: 1.6;
        color: #333;
        margin: 0;
        padding: 0;
    }
    
    /* Header styles */
    header {
        background-color: #333;
        color: #fff;
        padding: 10px 0;
        text-align: center;
    }
    
    header h1 {
        font-size: 2em;
    }
    
    /* Navigation styles */
    nav {
        background-color: #444;
        text-align: center;
        padding: 5px 0;
    }
    
    nav a {
        color: #fff;
        text-decoration: none;
        padding: 10px 20px;
        display: inline-block;
    }
    
    nav a:hover {
        background-color: #555;
    }
    
    /* Main content area */
    .container {
        max-width: 1200px;
        margin: 20px auto;
        overflow: hidden;
        padding: 0 20px;
    }
    
    .product {
        float: left;
        width: 25%;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .product img {
        max-width: 100%;
    }
    
    .product h3 {
        margin: 10px 0;
    }
    
    .product p {
        color: #888;
    }
    
    /* Footer styles */
    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        position: absolute;
        width: 100%;
        bottom: 0;
    }
</style>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>Shopping</h1>
        <p>Welcome to our online store!</p>
    </header>
    
    <!-- Navigation -->
    <nav>
        <a href="#">首页</a>
        <a href="#">购物车</a>
        <a href="file:///D:/php/%E5%85%B3%E4%BA%8E%E7%BD%91%E7%AB%99">客服</a>
        <a href="file:///D:/php/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2">登录</a>
    </nav>
    
    <!-- Main content -->
    <div class="container">
        <div class="product">
            <img src="https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/248113/17/13041/32167/667bca23Fbcdcf668/ef26543697a65796.jpg.avif" alt="Product 1">
            <h3>耳机</h3>
            <p>$19.99</p>
            <button>Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="https://img14.360buyimg.com/babel/s460x460_jfs/t1/113128/34/25803/106285/62ad6ae5E8260a0be/8a7aa2e0a4b27fc2.jpg.avif" alt="Product 2">
            <h3>电脑</h3>
            <p>$2999.99</p>
            <button>Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="https://img30.360buyimg.com/babel/s460x460_jfs/t1/137834/19/31036/34514/636e1d1cE128bc0b1/6328730bcc83f77f.jpg.avif" alt="Product 3">
            <h3>相机</h3>
            <p>$1499.99</p>
            <button>Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="https://img30.360buyimg.com/babel/s460x460_jfs/t1/183580/27/37691/43697/64feaf13F7a12e72f/3b01570909f628e2.jpg.avif" alt="Product 4">
            <h3>电源</h3>
            <p>$299.99</p>
            <button>Add to Cart</button>
        </div>
    </div>
    
    <!-- Footer -->
    <footer>
        <p>&copy; 2024 Awesome Shopping. All rights reserved.</p>
    </footer>
</body>
</html>

网站客服

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>客服聊天窗口</title>
<style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.chat-container {
    width: 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chat-box {
    height: 300px;
    padding: 10px;
    overflow-y: scroll;
}

.chat-message {
    margin-bottom: 10px;
}

.user-input {
    width: calc(100% - 80px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px;
}

.send-btn {
    width: 60px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px;
}

.send-btn:hover {
    background-color: #45a049;
}

</style>
</head>
<body>

<div class="chat-container">
    <div class="chat-box" id="chat-box">
        <div class="chat-message">
            <span class="message">您好！有什么可以帮助您的吗？</span>
        </div>
    </div>
    <input type="text" id="user-input" class="user-input" placeholder="请输入您的消息...">
    <button id="send-btn" class="send-btn">发送</button>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
    const chatBox = document.getElementById("chat-box");
    const userInput = document.getElementById("user-input");
    const sendBtn = document.getElementById("send-btn");

    // 模拟客服的初始问候消息
    appendMessage("客服", "您好！有什么可以帮助您的吗？");

    // 发送按钮点击事件
    sendBtn.addEventListener("click", function() {
        const userMessage = userInput.value.trim();
        if (userMessage !== "") {
            appendMessage("用户", userMessage);
            userInput.value = ""; // 清空输入框
            // 在这里可以添加发送消息给客服的逻辑，可以是ajax请求等
        }
    });

    // 模拟客服回复消息的函数
    function appendMessage(sender, message) {
        const messageElement = document.createElement("div");
        messageElement.classList.add("chat-message");
        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatBox.appendChild(messageElement);

        // 自动滚动到底部
        chatBox.scrollTop = chatBox.scrollHeight;
    }
});

</script>
</body>
</html>

网站登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="submit"] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form action="/login" method="POST">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="登录">
        </form>
    </div>
</body>
</html>
<script>
</script>