目录
一、前言
二、设计要求
三、页面设计以及实现图
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>
五、仓库地址
具体详情代码前往仓库:(供学习参考使用,随便取)
orangehome: 使用Html、css、javascript实现橙子之家网页设计
六、总结
感谢您阅读“橙子之家”的内容!在这段旅程中,我们一起探索了html" title=前端>前端网页设计的基础知识、最新趋势和实用技巧。希望这些资源不仅帮助您提升了技能,也激发了您的创造力。
无论您是新手还是有经验的开发者,html" title=前端>前端设计都为您提供了无限的可能性。掌握 HTML 和 CSS 的核心知识,可以让您在构建美观且实用的网站时游刃有余。
请继续关注我的博客,未来我们将分享更多深入的教程、案例分析和设计灵感。让我们共同努力,打造一个充满创意的网页世界,期待与您在这个过程中相遇与交流!