Web前端网页设计—

htmledit_views">

一、前言

二、设计要求

三、页面设计以及实现图

1.网站首页设计

2.用户登录页面设计

3.用户注册页面设计

4.主题内容页面设计

5.布局设计

6.导航菜单设计

四、划重点代码区域

1、图片热点区域

2、Card区域

3、留言板区域

五、仓库地址

六、总结

一、前言

欢迎来到“橙子之家”！在这里，我们将一起探索html" title=前端>前端网页设计的魅力与乐趣。无论你是刚刚踏入这一领域的新手，还是希望提升技能的经验丰富者，这里都能为你提供实用的资源与灵感。

在这篇文章中，你将发现关于 HTML 和 CSS 的基础知识、最新的设计趋势、实用的技巧和丰富的示例。我们相信，掌握这些技能不仅能帮助你创建美观且功能丰富的网站，还能为你的职业发展打开新的大门。

让我们一起开始这段充满创意与探索的旅程，打造属于自己的网页世界吧！

一个无聊的大学生写了一个无聊的作业发在了一个有得聊的网站上~

二、设计要求

使用所学过的html、css、JavaScript实现Web网站——橙子之家

用户注册页面设计（表单）
五个相关主题内容页面(有图片，并有热点区域分割)
登录页面的设计
用table和frameset进行布局，也可以用div。
左边菜单使用连接方式.....连接到4-5页面，能够返回

三、页面设计以及实现图

1.网站首页设计

网站首页采用了简洁的设计风格，使用了div元素来创建页面结构，并使用img标签来插入背景图片。通过设置div元素的样式，实现了页面布局和样式的调整。同时，还使用了a标签来创建导航链接，使得用户可以方便地访问其他页面。中间图片设置了热点区域链接，使得用户可以点击图片的不同部分跳转到其他页面或外部链接。通过使用img标签及其usemap属性实现了热点区域的功能。

2.用户登录页面设计

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

3.用户注册页面设计

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

4.主题内容页面设计

五个主题内容页面各自围绕不同的主题展开，分别是栽培技术、药用价值、相关知识、新鲜橙子、留言板五个主题，每个主题页面都嵌入了对应相关的图片,介绍相关内容。

5.布局设计

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

6.导航菜单设计

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

四、划重点代码区域

1、图片热点区域

首页使用了a标签来创建导航链接，使得用户可以方便地访问其他页面。中间图片设置了热点区域链接，使得用户可以点击图片的不同部分跳转到其他页面或外部链接。通过使用img标签及其usemap属性实现了热点区域的功能。

实现代码

html"><!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>橙子之家</title><link rel="stylesheet" href="sider.css">
</head><body><div class="page"><div class="sidebar"><h2>橙子之家</h2><a href="home.html">首页</a><a href="pageOne.html">栽培技术</a><a href="pageTwo.html">药用价值</a><a href="PageThree.html">相关知识</a><a href="PageFour.html">新鲜橙子</a><a href="pageFive.html">留言板</a></div><div class="content"><!-- 这是首页的标题部分 --><div class="title"><h1>WelCome to the home of oranges</h1></div><!-- 这是图片热点区域部分 --><div class="img"><!-- 图片 --><img src="./assert/img/newCenter.png" alt="带有热点区域的图片" usemap="#image-map"><!-- 定义图片映射 --><map name="image-map"><!-- 主页图标 --><area shape="circle" coords="150,90,150" href="home.html" alt="主页" title="主页"><!-- 环保图标 --><area shape="circle" coords="500,90,150" href="pageOne.html" alt="栽培技术" title="栽培技术"><!-- 药房图标 --><area shape="circle" coords="800,90,150" href="pageTwo.html" alt="药用价值" title="药用价值"><!-- 教育图标 --><area shape="circle" coords="150,300,150" href="pageThree.html" alt="相关知识" title="相关知识"><!-- 水果图标 --><area shape="circle" coords="500,300,150" href="pageFour.html" alt="新鲜橙子" title="新鲜橙子"><!-- 聊天图标 --><area shape="circle" coords="800,300,150" href="pageFive.html" alt="留言板" title="留言板"></map></div></div></div>
</body>
<style>/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 *//* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */@font-face {font-family: "Thin";src: url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff2") format("woff2"),url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff") format("woff");/* src: url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff2") format("woff2"), *//* url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff") format("woff"); */font-display: swap;}/* webSite/assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff *//* webSite/assert/font/uGFLnLcckjCC/Z1eaFFZZPDjN.woff */.content {background: url(./assert/img/bg3.png) no-repeat center;background-size: cover;}.content .title h1 {color: #d5950b;font-size: 120px;margin-top: 6%;/* 更改字体 */font-family: "Thin", Arial, sans-serif;/* 使用新字体 */}.content .title {text-align: center;}.content .img {margin-top: 3%;margin-left: 25.5%;height: 50%;width: 50%;}.content .img img {height: 100%;width: 100%;}
</style></html>

2、Card区域

在橙子之家的卡片区域，您将发现多种新鲜橙子的详细展示。每张卡片都包含一幅诱人的橙子图片和其名称，旨在帮助您快速识别和了解不同的橙子品种。

实现代码

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="sider.css">
</head><body><div class="page"><div class="sidebar"><h2>橙子之家</h2><a href="home.html">首页</a><a href="pageOne.html">栽培技术</a><a href="pageTwo.html">药用价值</a><a href="PageThree.html">相关知识</a><a href="PageFour.html">新鲜橙子</a><a href="pageFive.html">留言板</a></div><div class="content"><div class="content-container"><!-- <h1>新鲜橙子</h1> --><div class="container"><div class="card"><img src="./assert/img/origin2.jpg" alt="新鲜橙子"><h3><p>脐橙</p></h3></div><div class="card"><img src="./assert/img/origin7.jpg" alt="新鲜橙子"><h3><p>瓦伦西亚橙</p></h3></div><div class="card"><img src="./assert/img/origin1.jpg" alt="新鲜橙子"><h3><p>血橙</p></h3></div><div class="card"><img src="./assert/img/origin1.jpg" alt="新鲜橙子"><h3><p>卡拉卡橙</p></h3></div><div class="card"><img src="./assert/img/origin2.jpg" alt="新鲜橙子"><h3><p>酸橙</p></h3></div><div class="card"><img src="./assert/img/origin7.jpg" alt="新鲜橙子"><h3><p>克莱门氏小柑橙</p></h3></div><div class="card"><img src="./assert/img/origin1.jpg" alt="新鲜橙子"><h3><p>塔罗科血橙</p></h3></div><div class="card"><img src="./assert/img/origin7.jpg" alt="新鲜橙子"><h3><p>摩洛哥血橙</p></h3></div><div class="card"><img src="./assert/img/origin2.jpg" alt="新鲜橙子"><h3><p>冰糖橙</p></h3></div></div><div class="pagination"><a href="#">Previous</a><a href="#" class="active">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">Next</a></div></div></div></div>
</body>
<style>.page {display: flex;background-color: #faf7ef;}body {background-color: #FCE9D4;font-family: Arial, sans-serif;}h1 {text-align: center;margin-top: 50px;}.content {background: url(./assert/img/bg3.png) no-repeat center;background-size: cover;display: flex;justify-content: center;align-items: center;height: 100%;}.content .content-container {height: 100%;width: 70%;/* background-color: pink !important; */}.container {display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;margin-top: 50px;}.card {width: 30%;padding: 10px;box-sizing: border-box;/* border: 1px solid #E6AEDB; */margin: 10px;text-align: center;}img {max-width: 100%;height: auto;}.pagination {display: flex;justify-content: center;margin-top: 50px;}.pagination a {color: black;padding: 10px;margin: 0 5px;text-decoration: none;font-size: 18px;}.pagination a:hover {background-color: #E6AEDB;color: white;}.active {background-color: #E6AEDB;color: white;}
</style>
</style></html>

3、留言板区域

实现代码

欢迎来到橙子之家的留言板！这里是您与我们沟通的桥梁，期待聆听您的宝贵意见和建议。无论您对我们的产品、服务，还是其他任何方面的看法，我们都非常重视。您的每一条反馈都是我们成长和改进的重要动力。

请您在留言时填写相关信息，方便我们与您保持联系。您的隐私对我们至关重要，我们承诺将保护您的个人信息。感谢您参与我们的社区，让我们一起把“橙子之家”建设得更加美好！

html"><!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>旅游主题</title><link rel="stylesheet" href="sider.css">
</head><body><div class="page"><div class="sidebar"><h2>橙子之家</h2><a href="home.html">首页</a><a href="pageOne.html">栽培技术</a><a href="pageTwo.html">药用价值</a><a href="PageThree.html">相关知识</a><a href="PageFour.html">新鲜橙子</a><a href="pageFive.html">留言板</a></div><div class="content"><!-- 使用表单实现留言板区域 --><form action=""><h1>留言板</h1><br><p>留下亲的宝贵意见，我们会成长的更健康！</p><br><label for="name">name:</label><br><input type="text" id="name" name="name" placeholder="请输入您的姓名"><br><label for="email">Email:</label><br><input type="text" id="email" name="email" placeholder="请输入您的邮箱地址"><br><label for="phone">电话:</label><br><input type="text" id="phone" name="phone" placeholder="请输入您的联系电话"><br><label for="message">留言内容:</label><br><textarea id="message" name="message" class="my-textarea"></textarea><br><div class="btn"><button type="submit">提交</button><button type="reset">重置</button></div></form><!-- 右侧图片区域 --><div class="img-box"><p>橙子之家</p><img src="./assert/img/origin1.jpg" alt="橙子之家"></div></div></div>
</body><style>.page {display: flex;background-color: #faf7ef;}.content {background: url(./assert/img/bg3.png) no-repeat center;background-size: cover;display: flex;justify-content: center;align-items: center;height: 100%;}form {width: 30%;margin-right: 5%;padding: 5px;}input[type=text] {width: 60%;padding: 12px 20px;margin: 8px 0;box-sizing: border-box;border: 1px solid #ccc;}p {font-size: 28px;font-weight: lighter;}.my-textarea {height: 200px;/* 设置高度 */width: 100%;/* 设置宽度 */resize: none;/* 禁用拖动调整大小 */border: 1px solid #ccc;}.btn {display: flex;justify-content: space-between;}button {background-color: orange;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: inline-block;width: 16%;}.img-box {width: 30%;height: 50%;display: inline-block;justify-content: center;align-items: center;}.img-box img {margin-top: 6%;width: 100%;height: 80%;object-fit: cover;}
</style></html>