前端开源项目-产品登录页

INTRODUCTION

本项目主要基于HTML和CSS开发实现一个产品登录页。

功能模块

• 首页
• 热销推荐
• 产品功能
• 产品特色
• 产品规格

项目描述

1. header部分包括“首页、热销推荐、产品功能、产品特色、产品规格”5个元素。固定在页面顶部，点击任一元素可跳转到对应的部分。
2. 页面的右上角有一“登录”按钮，点击可跳转到登录界面。
3. 第一个banner图当鼠标在其上停留时，可缓慢进行放大两秒
4. 热销推荐，三个商品既描述文字和购买链接，采取浮动技术排版
5. 图片设有鼠标悬停效果，放大1.1倍，并且透明度变为0.9
6. 点击其下面的链接可跳转到相应的网址页面
7. 实现了将一个视频插入到页面中
8. 页面在缩小放大的时候，页面背景会实现不同颜色的变换，使用了媒体查询
9. 登录界面输入email时会自动检查格式正误，输入界面背景设有固定图片
10. email输入框内存在描述该区域用途的占位符文字
11. 密码格式遮挡输入内容
12. 提交邮箱时将信息提交到一个静态页面。
13. flexbox布局了整个界面。
14. 文字设有上下间隔 每个大功能快之间设有间隔
15. 连接去掉了下划线，并修改了颜色
16. 功能标题设有边框，边框内部填充颜色，并设有弧度

实现需求

• 需求 1： 产品登录页应存在 id="header" 的 header 元素。
• 需求 2： 在 header 元素内应存在 id="header-img" 的图像， 这里通常用来放置公司的 logo。
• 需求 3： 在 #header 元素内，应存在一个 id="nav-bar" 的 nav 元素。
• 需求 4： nav 元素中应至少包含三个 class 为 nav-link 且可点击的元素。
• 需求 5： 当点击 nav 内的 .nav-link 按钮时，应滚动到产品主页上相应的部分。
• 需求 6： 页面上应存在 id="video" 的嵌入式视频播放区域。
• 需求 7： 产品登陆页应存在一个 id="form" 的 form 元素。
• 需求 8： 在表单中，应存在一个 id="email" 的 input 输入框供用户填写邮箱。
• 需求 9： #email 输入框内应存在描述该区域用途的占位符文字。
• 需求 10： #email 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。
• 需求 11： 在表单中，应存在一个 id="submit" 的 input 提交按钮。
• 需求 12： 当点击 #submit 元素时，应将邮箱信息提交到一个静态页面（请使用这个 模拟的 URL：https://www.freecodecamp.com/email-submit）。
• 需求 13： navbar 应保持在视口（viewport）的顶部。
• 需求 14： 在此 app 中，应至少使用一次媒体查询。
• 需求 15： 在此 app 中，应至少使用一次 CSS 的 flexbox 布局。

INSTALL

相关源码地址项目源码

源码平台	源码地址
github	https://github.com/ZYJ066/Web

开发环境

Download VScode

开发语言

• HTML
• CSS

LICENSE

• MIT

CREDITS

• ZYJ066
• 1549504858
• HW-BC
• ZhaoYongrui
• chungeniubi

HISTORY

开发流程

• 项目构思：使用HTML5和CSS实现登录页面的源代码
• 环境部署：在浏览器上能够展示出页面
• 代码编写：使用vscode编写代码
• 代码测试：使用浏览器预览效果
• 文档撰写：使用Markdown格式进行撰写，对项目产品进行全面而详尽的介绍
• 项目发布：将项目发布到GitHub平台进行托管

FAQ

• Q:产品界面会持续更新产品吗？
• A:后续会根据市场情况相应调整产品的展示。