Web前端网页设计与制作（想起来哪里写哪里版）

编程语言 2024-11-05 00:01:38 阅读次数: 0

本文技术栈基于Html+Css+JavaScript制作web页面以及功能实现的部分设计与展示，实际的网站开发会涉及更多的细节，包括但不限于用户认证、数据库存储、前端框架的使用、响应式设计、安全性措施等。

废话不说，直接看源码

1.index

  1. 首页：包含导航栏和一些基本介绍。
  2. 菜单页面：列出所有可选购的商品。
  3. 商品详情页面：当用户点击某个商品时，会展示该商品的详细信息，如价格、介绍等。
  4. 购物车页面：展示用户已选择的商品，并提供跳转至支付界面的选项。
  5. 支付界面：提供支付方式选择，如微信和支付宝。
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>菜单页面</title>
    <link rel="stylesheet" href="css/second.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="menu.html">首页</a></li>
                <li>菜单</a></li>
                <li><a href="second_shopping.html" id="cart-link">购物车</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </nav>
    </header>

    <section id="product-section">
        <div class="product-item">
            <h2>红烧肉</h2>
            <img src="img/l1.jpg" alt="红烧肉" class="product-image">
            <p>价格：￥35</p>
            <p>介绍：红烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p>
            <button class="add-to-cart" data-product='{"name": "红烧肉", "price": 35}'>加入购物车</button>
        </div>
        <div class="product-item">
            <h2>黄烧肉</h2>
            <img src="img/l1.jpg" alt="黄烧肉" class="product-image">
            <p>价格：￥35</p>
            <p>介绍：黄烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p>
            <button class="add-to-cart" data-product='{"name": "黄烧肉", "price": 35}'>加入购物车</button>
        </div>
        <div class="product-item">
            <h2>绿烧肉</h2>
            <img src="img/l1.jpg" alt="绿烧肉" class="product-image">
            <p>价格：￥35</p>
            <p>介绍：绿烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p>
            <button class="add-to-cart" data-product='{"name": "绿烧肉", "price": 35}'>加入购物车</button>
        </div>
        <div class="product-item">
            <h2>粉烧肉</h2>
            <img src="img/l3.jpg" alt="粉烧肉" class="product-image">
            <p>价格：￥35</p>
            <p>介绍：粉烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p>
            <button class="add-to-cart" data-product='{"name": "粉烧肉", "price": 35}'>加入购物车</button>
        </div>
        <div class="product-item">
            <h2>黑烧肉</h2>
            <img src="img/l2.jpg" alt="黑烧肉" class="product-image">
            <p>价格：￥35</p>
            <p>介绍：黑烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p>
            <button class="add-to-cart" data-product='{"name": "黑烧肉", "price": 35}'>加入购物车</button>
        </div>
    </section>

    <footer>
        <p>&copy; 2024 简易购物网站</p>
    </footer>

    <script src="js/second.js"></script>
</body>
</html>

Css

/* 重置浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* 导航栏样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #555;
}

/* 商品详情部分样式 */
#product-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 20px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-item {
    flex-basis: calc(20% - 20px);
    margin: 10px;
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.product-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.product-item h2 {
    color: #d62828;
    margin-bottom: 10px;
}

.product-item p {
    margin-bottom: 15px;
}

/* 按钮样式 */
.add-to-cart {
    display: inline-block;
    padding: 10px 20px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-to-cart:hover {
    background-color: #4cae4c;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

Js 

document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', function() {
        const productData = JSON.parse(this.getAttribute('data-product'));
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        cart.push(productData);
        localStorage.setItem('cart', JSON.stringify(cart));
        alert('商品已添加到购物车！');
        document.getElementById('cart-link').textContent = `购物车 (${cart.length})`;
    });
});

window.onload = function() {
    const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
    document.getElementById('cart-link').textContent = `购物车 (${cartItems.length})`;
};

2.index 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/shopping.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                
            </ul>
        </nav>
    </header>

    <section id="cart">
        <h2>购物车</h2>
        <ul id="cart-items"></ul>
        <p id="total">总计：￥0</p> 
        <button id="clear-cart">清空购物车</button> 
        <button id="checkout">结算</button> 
    </section>

    <footer>
        <p>&copy; 2024 简易购物网站</p>
    </footer>

    <script src="js/shopping.js"></script>
</body>
</html>

 此处购物车页面没有做页面美化，只是提供了个大致Model哈便于演示功能设计，加个Style和一些美化元素即可

Css 

/* 重置浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* 导航栏样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #555;
}

/* 购物车列表样式 */
#cart-items {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

#cart-items li {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 按钮样式 */
button {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

Js 

window.onload = function() {
    displayCart();
};

function displayCart() {
    const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
    const cartList = document.getElementById('cart-items');
    let total = 0;
    cartList.innerHTML = ''; // 清空现有的列表

    cartItems.forEach((item, index) => {
        const itemElement = document.createElement('li');
        itemElement.textContent = `${item.name} - ￥${item.price}`;
        cartList.appendChild(itemElement);
        total += item.price; // 计算总价
    });

    // 显示总价
    const totalDisplay = document.getElementById('total');
    totalDisplay.textContent = `总计：￥${total}`;
}

// 清空购物车按钮事件
document.getElementById('clear-cart').addEventListener('click', function() {
    if (confirm('确定要清空购物车吗？')) {
        localStorage.removeItem('cart');
        window.location.reload(); // 重新加载页面
    }
});

// 结算按钮事件
document.getElementById('checkout').addEventListener('click', function() {
    if (confirm('确认结算吗？')) {
        // 这里可以添加实际的结算逻辑，比如调用支付API
        alert('结算成功！');
        localStorage.removeItem('cart'); // 清空购物车
        window.location.href = 'index.html'; // 结算后跳转到首页
    }
});

 

此处没有做实际的支付功能，只是模拟支付场景，这个示例提供了一个基本的购物车功能，用户可以点击“加入购物车”将商品添加到购物车列表中，点击“结账”会弹出支付成功的提示并清空购物车。实际的支付过程需要与支付服务提供商的API进行集成，这通常涉及到服务器端的逻辑和安全性考虑。

主页以及关于部分，直接连接另外Html页面，根据自己需求书写内容以及样式即可，这里就不一一展示了

 仅供参考，提供思路方法，如有不足，欢迎指正，书写不易，喜欢点赞收藏呦~~

补充：


要在购物车页面显示商品的图片，需要在购物车页面的JavaScript中处理商品信息，并在HTML中为每个商品创建一个包含图片和文本的列表项。以下是实现这一功能的完整代码示例。 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/second.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="menu.html">菜单</a></li>
                <li><a href="second_shopping.html" id="cart-link">购物车</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </nav>
    </header>

    <section id="cart">
        <h2>购物车</h2>
        <ul id="cart-items"></ul>
        <p id="total">总计：￥0</p>
        <button id="clear-cart">清空购物车</button>
        <button id="checkout">结算</button>
    </section>

    <footer>
        <p>&copy; 2024 简易购物网站</p>
    </footer>

    <script src="js/shopping.js"></script>
</body>
</html>
/* 重置浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* 导航栏样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #555;
}

/* 购物车列表样式 */
#cart-items {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

#cart-items li {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}

#cart-items img {
    width: 50px; /* 根据需要调整图片大小 */
    height: auto;
    margin-right: 10px;
}

/* 按钮样式 */
button {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}
window.onload = function() {
    displayCart();
};

function displayCart() {
    const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
    const cartList = document.getElementById('cart-items');
    let total = 0;
    cartList.innerHTML = ''; // 清空现有的列表

    cartItems.forEach((item, index) => {
        const itemElement = document.createElement('li');
        const itemImage = document.createElement('img');
        itemImage.src = `img/${item.name}.jpg`; // 假设图片文件名与商品名称相同
        itemImage.alt = item.name;
        itemImage.style.width = '50px'; // 根据需要调整图片大小

        itemElement.appendChild(itemImage);
        itemElement.textContent += ` ${item.name} - ￥${item.price}`;

        cartList.appendChild(itemElement);
        total += item.price; // 计算总价
    });

    // 显示总价
    const totalDisplay = document.getElementById('total');
    totalDisplay.textContent = `总计：￥${total}`;
}

// 清空购物车按钮事件
document.getElementById('clear-cart').addEventListener('click', function() {
    if (confirm('确定要清空购物车吗？')) {
        localStorage.removeItem('cart');
        window.location.reload(); // 重新加载页面
    }
});

// 结算按钮事件
document.getElementById('checkout').addEventListener('click', function() {
    if (confirm('确认结算吗？')) {
        // 这里可以添加实际的结算逻辑，比如调用支付API
        alert('结算成功！');
        localStorage.removeItem('cart'); // 清空购物车
        window.location.href = 'index.html'; // 结算后跳转到首页
    }
});

猜你喜欢

转载自blog.csdn.net/m0_74940474/article/details/140521092
今日推荐
周排行
ASP.NET MVC零基础自学篇：（二） ASP.NET MVC Web 应用程序
Linux中的NetworkManager网络管理
倍增ST应用 选择客栈（提高组）
《沉思录卷六》不朽之誉不过一时虚幻
Linux根目录介绍
SVM真实数据集和多分类
Install SVN tool on redhat
nginx实现proxy_cache
HDU 5583 Kingdom of Black and White
深入扒 HashMap 源码 - 6.2 HashMap 内部类 TreeNode
每日归档
更多
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)
2025-01-26(0)
2025-01-25(0)
2025-01-24(0)
2025-01-23(0)
2025-01-22(0)
2025-01-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022