# orangehome

**Repository Path**: tanzero/orangehome

## Basic Information

- **Project Name**: orangehome
- **Description**: 使用Html、css、javascript实现橙子之家网页设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-10-25
- **Last Updated**: 2024-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### 网站首页设计

网站首页采用了简洁的设计风格，使用了div元素来创建页面结构，并使用img标签来插入背景图片。通过设置div元素的样式，实现了页面布局和样式的调整。同时，还使用了a标签来创建导航链接，使得用户可以方便地访问其他页面。

### 用户登录页面设计

用户登录页面采用了表单形式，使用了form元素来创建表单，包含了必要的输入字段如用户名和密码，并加入了必填校验和提交按钮。此外，还加入了提示信息和注册链接等细节，提高了用户体验。

### 用户注册页面设计

在设计用户注册页面时，使用了form元素来创建表单，包含了必要的输入字段如用户名、密码、电子邮件等，并加入了必填校验和提交按钮。此外，还加入了提示信息和隐私条款链接等细节，以提高用户体验。

### 主题内容页面设计

五个主题内容页面各自围绕不同的主题展开，每个页面都嵌入了相关的图片，并设置了热点区域链接，使得用户可以点击图片的不同部分跳转到其他页面或外部链接。通过使用img标签及其usemap属性实现了热点区域的功能。

### 登录页面设计

登录页面同样采用了表单形式，包含了用户名和密码输入框。登录按钮触发的JavaScript函数用于验证用户输入，成功则跳转至首页或其他指定页面。

### 布局设计

使用table进行了初步布局，定义了页面的基本结构，如头部、主体内容区和底部版权信息等。另外，探索了frameset和frame标签来创建框架集布局，实现了主页面内不同内容区域的独立加载。对于更加灵活的布局需求，则使用了div标签配合CSS进行定位和样式设计。

### 导航菜单设计

左侧导航菜单通过超链接a标签实现了与其他页面的相互跳转。确保所有链接均能正常工作，并且用户可以从任何一个页面返回到主页或其他页面。

#### Login.html 登录表单区域

![Alt text](image.png)

#### Register.html 注册表单区域

![Alt text](image-1.png)

#### home.html 图片热点区域

![Alt text](image-2.png)

#### pageOne.html 栽培技术页面结构

![Alt text](image-3.png)

#### pageTwo.html 药用价值页面布局

![Alt text](image-4.png)

#### pageThree.html 相关知识页面布局

![Alt text](image-5.png)

#### pageFour.html 新鲜橙子Card布局

![Alt text](image-6.png)

#### pageFive.html 留言板Form 表单布局

![Alt text](image-7.png)