首页 > 其他分享 >对于购物中心HTML前端页面的优化

对于购物中心HTML前端页面的优化

时间：2024-03-03 14:44:38浏览次数：30  
标签：box 1px 购物中心 HTML rgba input 页面 border 255

在对同学上学期的购物中心HTML前端页面项目进行学习后，我对它进行了优化。在原先的基础上，给它的注册、忘记密码按钮增加了跳转接口，使得这两个功能可以实现跳转，并且在商品展示页增加了返回登录页面的接口。
原始代码列表：

优化后代码列表：

代码文件：
原始登录页.html：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="登录页.css"/>
</head>
<body>
    <div class="box">
        <h2>网上购物商场</h2>
        <div class="input-box">
            <label>账号</label>
            <input type="text" id="username"/>
        </div>
        <div class="input-box">
            <label>密码</label>
            <input type="password" id="password"/>
        </div>
        <div class="btn-box">
            <a href="#">忘记密码？</a>
            <div>
                <input id="a" type="submit" onclick="a1()" value="登录">
                <button>注册</button>
            </div>
        </div>
    </div>
<script>
    function a1(){
    var username=document.getElementById("username")
    var password=document.getElementById("password")
    if(username.value==="admin" && password.value==="123456")
    {
        alert("登录成功");
        window.location.href = "商品展示页.html";
    }
    else{
        alert("账号或密码错误");
    }
}
</script>
</body>
</html>

进行优化后的登录页.html：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="登录页.css"/>
    <style>
        
        .btn-box {
            margin-left: -16px; 
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>网上购物商场</h2>
        <div class="input-box">
            <label>账号</label>
            <input type="text" id="username"/>
        </div>
        <div class="input-box">
            <label>密码</label>
            <input type="password" id="password"/>
        </div>
        <div class="btn-box">
            <a href="忘记密码页.html">忘记密码？</a>
            <div style="margin-top: 20px; text-align: center;">
                <input id="a" type="submit" onclick="a1()" value="登录" style="margin-right: 3px;">
                <button onclick="window.location.href = '注册页.html';" style="margin-left: 3px;">注册</button>
            </div>
        </div>
    </div>
<script>
    function a1(){
    var username=document.getElementById("username")
    var password=document.getElementById("password")
    if(username.value==="admin" && password.value==="123456")
    {
        alert("登录成功");
        window.location.href = "商品展示页.html";
    }
    else{
        alert("账号或密码错误");
    }
}
</script>
</body>
</html>

新增注册页.html：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="注册页.css"/>
</head>
<body>
    <div class="box">
        <h2>注册</h2>
        <div class="input-box">
            <label>新账号:</label>
            <input type="text" id="new_username" name="new_username">
        </div>
        <div class="input-box">
            <label>新密码:</label>
            <input type="password" id="new_password" name="new_password">
        </div>
        <div class="btn-box">
            <input type="submit" value="注册">
            <a href="登录页.html" class="back-link">返回登录页面</a>
        </div>
    </div>
</body>
</html>

注册页.css：

点击查看代码 
@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(2.webp) no-repeat;
    background-size: cover;
}
.box{
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 300px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    background: rgba(50,50,50,0.2);
}
.box > h2{
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}
.box .input-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-bottom: 10px;
}
.box .input-box > label {
    margin-bottom: 5px;
    color:rgba(255, 255, 255, 0.9);
    font-size: 13px;
}
.box .input-box > input{
    box-sizing: border-box;
    color:rgba(255, 255, 255, 0.9);
    font-size: 14px;
    height: 35px;
    width: 250px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    transition: 0.2s;
    outline: none;
    padding: 0 10px;
    letter-spacing: 1px;
}
.box .input-box > input:focus{
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.box .btn-box{
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.box .btn-box > input[type="submit"]{
    width: 120px;
    height: 35px;
    border: 1px solid rgba(197,81,58,0.8);
    background: rgba(197,81,58,0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    transition: 0.2s;
}
.box .btn-box > input[type="submit"]:hover{
    border: 1px solid rgba(248, 108, 76, 0.8);
    background: rgba(248, 108, 76, 0.5);
}

.back-link {
    color: #6A5ACD;
    text-decoration: none; 
    margin-top: 10px; 
}

.back-link:hover {
    text-decoration: underline; 
}

新增忘记密码页.html：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码</title>
    <link rel="stylesheet" href="忘记密码页.css"/>
</head>
<body>
    <div class="box">
        <h2>忘记密码</h2>
        <div class="input-box">
            <label>账号:</label>
            <input type="text" id="username" name="username">
        </div>
        <div class="input-box">
            <label>新密码:</label>
            <input type="password" id="new_password" name="new_password">
        </div>
        <div class="btn-box">
            <input type="submit" value="重置密码">
            <a href="登录页.html" class="back-link">返回登录页面</a>
        </div>
    </div>
</body>
</html>

忘记密码页.css：

点击查看代码 
@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(2.webp) no-repeat;
    background-size: cover;
}
.box{
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 300px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    background: rgba(50,50,50,0.2);
}
.box > h2{
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}
.box .input-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-bottom: 10px;
}
.box .input-box > label {
    margin-bottom: 5px;
    color:rgba(255, 255, 255, 0.9);
    font-size: 13px;
}
.box .input-box > input{
    box-sizing: border-box;
    color:rgba(255, 255, 255, 0.9);
    font-size: 14px;
    height: 35px;
    width: 250px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    transition: 0.2s;
    outline: none;
    padding: 0 10px;
    letter-spacing: 1px;
}
.box .input-box > input:focus{
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.box .btn-box{
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.box .btn-box > input[type="submit"]{
    width: 120px;
    height: 35px;
    border: 1px solid rgba(197,81,58,0.8);
    background: rgba(197,81,58,0.5);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    transition: 0.2s;
}
.box .btn-box > input[type="submit"]:hover{
    border: 1px solid rgba(248, 108, 76, 0.8);
    background: rgba(248, 108, 76, 0.5);
}

.back-link {
    color: #6A5ACD; 
    text-decoration: none; 
    margin-top: 10px; 
}

.back-link:hover {
    text-decoration: underline; 
}

原始商品展示页.html：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示页</title>
    <link rel="stylesheet" href="商品展示页.css">
</head>
<body>
    <header>
        <div class="d1">
            <h1 class="h1">商品展示页</h1>
            <a class="h2" href="购物车页.html">购物车</a>
            <a class="h2" href="帮助中心页.html">帮助中心</a>
        </div>
        <nav>
            <table id="t1">
                <tr>
                    <td><a href="#category1">家用电器</a></td>
                    <td><a href="#category2">手机</a></td>
                    <td><a href="#category3">运营商</a></td>
                    <td><a href="#category4">耳机</a></td>
                    <td><a href="#category5">电脑</a></td>
                    <td><a href="#category6">办公</a></td>
                    <td><a href="#category22">相机</a></td>
                    <td><a href="#category36">图书</a></td>
                    <td><a href="#category37">电子书</a></td>
                    <td><a href="#category38">影像</a></td>
                </tr>
                <tr>
                    <td><a href="#category7">家具</a></td>
                    <td><a href="#category8">家居</a></td>
                    <td><a href="#category9">家装</a></td>
                    <td><a href="#category10">厨房用具</a></td>
                    <td><a href="#category11">男装</a></td>
                    <td><a href="#category12">女装</a></td>
                    <td><a href="#category13">童装</a></td>
                    <td><a href="#category14">内衣</a></td>
                    <td><a href="#category15">泳装</a></td>
                    <td><a href="#category16">鞋</a></td>
                    <td><a href="#category17">箱包</a></td>
                    <td><a href="#category18">钟表</a></td>
                    <td><a href="#category19">珠宝装饰</a></td>
                    <td><a href="#category20">运动</a></td>
                    <td><a href="#category21">户外</a></td>
                </tr>
                <tr>
                    <td><a href="#category23">食品</a></td>
                    <td><a href="#category24">酒类</a></td>
                    <td><a href="#category25">生鲜</a></td>
                    <td><a href="#category26">特产</a></td>
                    <td><a href="#category27">肉类</a></td>
                    <td><a href="#category29">蔬菜</a></td>
                    <td><a href="#category30">烘焙面包</a></td>
                    <td><a href="#category31">酱料</a></td>
                    <td><a href="#category32">饮料</a></td>
                    <td><a href="#category33">零食</a></td>
                    <td><a href="#category34">医疗保健</a></td>
                    <td><a href="#category35">宠物</a></td>
                </tr>
            </table>
        </nav>
    </header>

    <main>
        <section id="category1" class="product-category">
            <h2>相机</h2>
            <div class="product">
                <img src="R-C.jpg" alt="Product 1">
                <h3>尼康数码单反相机</h3>
                <p>$2000.00</p>
                <button class="btn">购买</button>
            </div>
            <!-- 其他商品... -->
        </section>

        <section id="category2" class="product-category">
            <h2>电脑</h2>
            <div class="product">
                <img src="3.jpg" alt="Product 2">
                <h3>拯救者笔记本</h3>
                <p>$7000.00</p>
                <button class="btn">购买</button>
            </div>
            <!-- 其他商品... -->
        </section>

        <section id="category3" class="product-category">
            <h2>酒类</h2>
            <div class="product">
                <img src="OIP-C.jpg" alt="Product 3">
                <h3>吉贝酒庄红葡萄酒</h3>
                <p>$300.00</p>
                <button class="btn">购买</button>
            </div>
            <!-- 其他商品... -->
        </section>
    </main>

    <footer>
        <p>&copy; 2023 商品展示页</p>
    </footer>
</body>
</html>

进行优化后的商品展示页.html：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示页</title>
    <link rel="stylesheet" href="商品展示页.css">
</head>
<body>
    <header>
        <div class="d1">
            <h1 class="h1">商品展示页</h1>
            <a class="h2" href="购物车页.html">购物车</a>
            <a class="h2" href="帮助中心页.html">帮助中心</a>
        </div>
        <nav>
            <table id="t1">
                <tr>
                    <td><a href="#category1">家用电器</a></td>
                    <td><a href="#category2">手机</a></td>
                    <td><a href="#category3">运营商</a></td>
                    <td><a href="#category4">耳机</a></td>
                    <td><a href="#category5">电脑</a></td>
                    <td><a href="#category6">办公</a></td>
                    <td><a href="#category22">相机</a></td>
                    <td><a href="#category36">图书</a></td>
                    <td><a href="#category37">电子书</a></td>
                    <td><a href="#category38">影像</a></td>
                </tr>
                <tr>
                    <td><a href="#category7">家具</a></td>
                    <td><a href="#category8">家居</a></td>
                    <td><a href="#category9">家装</a></td>
                    <td><a href="#category10">厨房用具</a></td>
                    <td><a href="#category11">男装</a></td>
                    <td><a href="#category12">女装</a></td>
                    <td><a href="#category13">童装</a></td>
                    <td><a href="#category14">内衣</a></td>
                    <td><a href="#category15">泳装</a></td>
                    <td><a href="#category16">鞋</a></td>
                    <td><a href="#category17">箱包</a></td>
                    <td><a href="#category18">钟表</a></td>
                    <td><a href="#category19">珠宝装饰</a></td>
                    <td><a href="#category20">运动</a></td>
                    <td><a href="#category21">户外</a></td>
                </tr>
                <tr>
                    <td><a href="#category23">食品</a></td>
                    <td><a href="#category24">酒类</a></td>
                    <td><a href="#category25">生鲜</a></td>
                    <td><a href="#category26">特产</a></td>
                    <td><a href="#category27">肉类</a></td>
                    <td><a href="#category29">蔬菜</a></td>
                    <td><a href="#category30">烘焙面包</a></td>
                    <td><a href="#category31">酱料</a></td>
                    <td><a href="#category32">饮料</a></td>
                    <td><a href="#category33">零食</a></td>
                    <td><a href="#category34">医疗保健</a></td>
                    <td><a href="#category35">宠物</a></td>
                </tr>
            </table>
        </nav>
    </header>

    <main>
        <section id="category1" class="product-category">
            <h2>相机</h2>
            <div class="product">
                <img src="R-C.jpg" alt="Product 1">
                <h3>尼康数码单反相机</h3>
                <p>$2000.00</p>
                <button class="btn">购买</button>
            </div>
            <!-- 其他商品... -->
        </section>

        <section id="category2" class="product-category">
            <h2>电脑</h2>
            <div class="product">
                <img src="3.jpg" alt="Product 2">
                <h3>拯救者笔记本</h3>
                <p>$7000.00</p>
                <button class="btn">购买</button>
            </div>
            <!-- 其他商品... -->
        </section>

        <section id="category3" class="product-category">
            <h2>酒类</h2>
            <div class="product">
                <img src="OIP-C.jpg" alt="Product 3">
                <h3>吉贝酒庄红葡萄酒</h3>
                <p>$300.00</p>
                <button class="btn">购买</button>
            </div>
            <!-- 其他商品... -->
        </section>
    </main>

    <footer>
        <p>&copy; 2023 商品展示页</p>
        <a href="登录页.html" class="back-link">返回登录页面</a>
    </footer>
</body>
</html>

优化后的页面展示：



小结：
在本次优化中，我们对登录页面、注册页面和商品展示页进行了一系列改进。首先，在登录页面，我们添加了注册和忘记密码的按钮，并使其能够跳转到相应页面。然后，我们修改了注册页面和忘记密码页面的样式，使其与登录页面保持一致，并且添加了返回登录页面的接口。最后，在商品展示页，我们添加了返回登录页面的链接，提供了更好的用户体验。通过这些优化，页面间的导航更加清晰明了，用户可以更轻松地进行操作，提升了整体用户体验。

标签：box,1px,购物中心,HTML,rgba,input,页面,border,255
From： https://www.cnblogs.com/Sup7d/p/18050023

相关文章

  • 使用 CSS 如何禁用浏览器打印页面 All In One
    使用CSS如何禁用浏览器打印页面AllInOneprint.css禁用PDF导出网页有时，你的网站或应用程序可能希望改善用户在打印内容时的体验。有几种可能的情况：你希望根据纸张的大小和形状调整布局。你希望使用不同的样式来增强纸上内容的外观。你希望使用更高分辨率的图像以......
  • Taurus.MVC WebMVC 入门开发教程7：部分视图和页面片段（结束篇）
    本系列的目录大纲为：Taurus.MVCWebMVC入门开发教程1：框架下载环境配置与运行Taurus.MVCWebMVC入门开发教程2：一个简单的页面呈现Taurus.MVCWebMVC入门开发教程3：数据绑定ModelTaurus.MVCWebMVC入门开发教程4：数据列表绑定List<Model>Taurus.MVCWebMVC入门开发教程5......
  • html基础知识
    第一章html简单介绍1.1html定义html：超文本标记语言(HyperTextMarkupLanguage)；它的作用是控制页面的结构，页面的内容。1.2web最基本html：用于对网页元素进行整理和分类css：用于设置网页元素的版式、颜色、大小等外观样式javascript：网页模型的定义及交互的编写第二章html常见......
  • 常用日期和时间标准对比：HTML, ISO 8601, RFC 3339, RFC 5322
    1.HTML,ISO8601,RFC3339,RFC5322对比日期和时间，对于不同系统和平台之间的数据交换和互操作至关重要。本文将对比HTML标准、ISO8601、RFC3339和RFC5322，为读者提供参考。表格文字版见文末-附1.1.标准链接HTML标准:https://html.spec.whatwg.org/multipage......
  • 【HarmonyOS】一招教你在竖屏的UIAbility中使用横屏页面
    ​【关键字】鸿蒙应用开发、ArkTS、UIAbility、横屏页面显示 1、写在前面我们在实际的项目开发过程中，可能会遇到这样的需求：在一个手机应用中，A页面是竖屏展示的，点击A页面的某个按钮需要跳转到B页面，但是B页面需要横屏展示，比如查看海报或者表格信息等内容，在HarmonyOS中，在不增加......
  • html 乱码
    一般中文乱码的原因：1、meta标签设置的编码格式与实际文件的编码格式不符，解决方案：将meta标签和文件实际编码设置统一<metacharset="UTF-8"/>2、未设置编码格式，使用了utf-8以外的编码，解决方案：设置meta标签为对应的编码或将文件的编码格式改为utf-83、文件本身已经乱码，用vsco......
  • Docker部署Gitea，以及自定义 Gitea 页面
    首先要先在你的Linux系统上成功安装Docker和DockerCompose。开始配置和部署Gitea：创建git用户。sudouseradd-m-s/bin/bash-U-u1000git配置docker-compose.yml，我这里使用了80端口和MySQL8数据库。version:"3"networks:gitea:external:falseservice......
  • dolphinscheduler管理页面主机host显示IP异常问题
    问题背景：登录dolphinscheduler管理页面，打开监控中心大盘发现IP显示异常，不是自己主机的业务IP问题分析：显示的IP是主机的bond0的IP，不是业务ip所在bond，则需要修改bond配置解决方案：需要将network.interface修改成业务ip所在的bond1网卡登录主机进行ipaddr查看业务IP所在bond......
  • Vue学习笔记27--v-html
    1.v-bind:单向绑定解析表达式，可简写为:xxx2.v-model:双向数据绑定3.v-for:遍历数组、对象、字符串4.v-on:绑定事件监听，可简写为@5.v-if:条件渲染——动态控制节点是否存在6.v-else：条件渲染——动态控制节点是否存在7.v-show：条件渲染——空调控制节点是否展示8.v-text:......
  • Vue给iframe设置嵌套页面的宽高
    Vue给iframe设置嵌套页面的宽高，代码示例如下：<template><iframeid="iframe":height="scrollHeight":width="scrollWidth"frameborder=0allowfullscreen="true"src="/docs-html/xxx.html"ref="iframe&......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99