web前端课程设计 HTML+CSS+JavaScript旅游风景云南城市网页设计与实现 web前端课程设计代码 web课程设计 HTML网页制作代码

news2025/1/2 0:24:08

👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平和原创度都适合学习或交作业用,记得点赞。


🏀 精彩专栏推荐👇🏻👇🏻👇🏻

💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📖
  • 四、网站效果🌐
  • 五、网站代码制作部分 📕
    • HTML结构代码🧱
    • CSS样式代码🏡
  • 六、遇到问题及如何解决🔍
  • 七、实训总结😊
  • 八、更多干货🎁


一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。


二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情,并通过访客留言,增加游客的互动体验。同时,地方旅游网站里的每一个网页都采用了统一的设计风格,以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格,更能吸引浏览者的眼球。


三、网站介绍📖

网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;
(2)css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)js文件包含:js实现动态轮播特效, 点击事件等等(个别网页中运用到js代码)。


四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面:计划实现简洁大气的网页设计效果。
网站功能方面:计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、网站代码制作部分 📕

(1)网站首页布局确定好各个板块的内容,并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(2)页面使用了DIV+CSS布局,使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(3)表单部分页面使用了DIV+CSS布局,使用到的知识主要有运用了form表单、input文本框和input提交按钮,完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云南</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <!-- 头部导航栏 -->
    <div id="title">
        <nav>
            <!-- logo -->
            <img src="static/picture/logo.png" alt="">
            <!-- 导航超链接 -->
            <a href="">首页</a>
            <a href="footer.html">美食</a>
            <a href="fengjing.html">风景</a>
            <a href="renwen.html">人文</a>
            <a href="liuyan.html">留言</a>
        </nav>
    </div>
    <!-- 轮播图模块 -->
    <div class="contentl">
        <ul class="wrapper">
            <li>
                <a href="footer.html"><img src="static/picture/food.png"></a>
            </li>
            <li>
                <a href="renwen.html"><img src="static/picture/people.png"></a>
            </li>
            <li>
                <a href="fengjing.html"><img src="static/picture/fengjing.png"></a>
            </li>
            <li><a href="footer.html"><img src="static/picture/food.png"></a></li>
        </ul>
        <ul class="radius">
        </ul>
        <div class="prev">
            <span>
                < </span>
        </div>
        <div class="next">
            <span>></span>
        </div>
    </div>
    <div id="main">
        <h1>关于云南</h1>
        <div id="jiehsao">
            <img src="static/picture/ditu.png" alt="">
            <p>
                <span>云南省</span>
                ,简称云或滇,中国23个省之一,位于西南地区,省会昆明。介于北纬21°8′~29°15′,东经97°31′~106°11′之间,东部与贵州、广西为邻,北部与四川相连,西北部紧依西藏,西部与缅甸接壤,南部和老挝、越南毗邻,云南省总面积39.41万平方千米,占全国国土总面积的4.1%,居全国第8位。云南是全国边境线最长的省份之一,有8个州(市)的25个边境县分别与缅甸、老挝和越南交界。
            </p>
            <p>
                北回归线横贯云南省南部,属低纬度内陆地区,地势呈西北高、东南低,自北向南呈阶梯状逐级下降,为山地高原地形,山地面积占全省总面积的88.64%,地跨长江、珠江、元江、澜沧江、怒江、大盈江6大水系。云南气候基本属于亚热带和热带季风气候,滇西北属高原山地气候。云南动植物种类数为全国之冠,素有“动植物王国”之称,被誉为“有色金属王国”,历史文化悠久,自然风光绚丽,是人类文明重要发祥地之一。
            </p>
            <p>
                云南省是中国面向南亚东南亚的辐射中心,地处中国与东南亚、南亚三大区域的结合部,入选国家自由贸易试验区,是长江经济带重要组成部分,全国热门旅游目的地和文旅大省。2021年,云南省实现地区生产总值(GDP)27146.76亿元,比2020年年增长7.3%
            </p>
            <div id="fenlei">
                <div id="fenlei_title">
                    <div id="fenleiimg">
                        <img src="static/picture/fengjing1.png" alt="">
                    </div>
                    <h1>风景</h1>
                    <p>
                        云南历史文化悠久,自然风光绚丽,拥有丽江古城、三江并流、石林、哈尼梯田、大理古城、崇圣寺三塔、玉龙雪山、洱海、滇池、抚仙湖、梅里雪山、普达措国家公园、噶丹松赞林寺...
                    </p>

                </div>
                <div id="fenlei_title">
                    <div id="fenleiimg">
                        <img src="http://www.ylcp.shop/files/files/1654586744930/images/food1.png" alt="">
                    </div>
                    <h1>美食</h1>
                    <p>
                        云南人格外地擅长就地取材,以烹制山珍、淡水鱼鲜和蔬菜见长,口味酸辣微麻, 重油味厚,但又不失鲜嫩。他们还选取热带水果、花卉,甚至是竹鼠、昆虫作为食材,其间,各地...
                    </p>

                </div>
                <div id="fenlei_title">
                    <div id="fenleiimg">
                        <img src="static/picture/people2.png" alt="">
                    </div>
                    <h1>人文</h1>
                    <p>
                        去到云南,走进丽江,感受不一样的人文风貌 偶尔放下手里的工作,与匆忙的都市生活,说再见,踏上旅途,也是给自己的慰藉。去过云南的都流连,没去过的都憧憬...
                    </p>

                </div>
            </div>
        </div>
    </div>
    <audio id="aud" controls="" loop="" style="display: none;">
        <source src="./media/1.MP3" type="audio/ogg">
        您的浏览器不支持 audio 元素。
    </audio>
    <footer>
        <p>
            版权所有©云南
        </p>
    </footer>
</body>
<!-- 轮播图js -->

<script src="static/js/js.js"></script>
<style>

</style>

</html>


CSS样式代码🏡

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

body {
    background-color: #aad5e8;
}


#title {
    width: 100%;
    background-color: #E7D2F0;
}

nav {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    text-align: right;
}

nav a {
    text-decoration: none;
    font-size: 14px;
    color: #DE0782;
    font-weight: 600;
    margin-left: 20px;
    border-bottom: 1px solid rgba(204, 204, 204, 0);
}

nav img {
    position: absolute;
    left: 0px;
    height: 50px;
    top: 5px;
}

nav a:hover {
    color: #5DB4DD;
    border-bottom: 1px solid #5DB4DD;

}

/* 轮播图样式 */
.contentl {
    width: 1000px;
    height: 430px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.wrapper {
    width: 400%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    transition: none;
}

.wrapper li {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrapper li img {
    width: 100%;
}

.radius {
    height: 12px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
}

.radius li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.6;
    margin: 0 3px;
    padding: 0;
    list-style: none;
}

.radius-active {
    opacity: 1 !important;
    border: 2px solid rgb(255, 255, 255, 0.5);
    background-clip: padding-box;
}

.prev {
    width: 23px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
}

.next {
    width: 23px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
}

.prev span,
.next span {
    font-weight: bold;
    color: white;
    font-size: 18px;
}

/* 中间内容区域 */
#main {
    width: 1000px;
    margin: 0 auto;
    background-color: #D8DFEB;
    box-sizing: border-box;
    padding: 20px;
}

h1 {
    color: #DE0782;
    text-align: center;
    margin-bottom: 30px;
}

#jiehsao {
    margin-top: 30px;
}

#jiehsao img {
    width: 300px;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
}

#jiehsao p {
    font-size: 16px;
    line-height: 30px;
    color: rgb(103, 103, 103);
    text-indent: 32px;
}

#jiehsao p span {
    color: #333;
    font-size: 28px;
    font-weight: 550;
}

#fenlei {
    width: 100%;
    font-size: 0px;
    margin-top: 30px;
}

#fenlei>div {
    margin-left: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}

#fenlei>div:first-child {
    margin-left: 0px;
}

#fenleiimg {
    width: 300px;
    height: 179px;
    overflow: hidden;
}

#fenlei_title {
    width: 300px;
    height: 400px;
    background-color: #f9f2fc;
    display: inline-block;
    font-size: 16px;
}

#fenlei_title h1 {
    text-align: left;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#fenlei_title p {
    box-sizing: border-box;
    padding: 0px 20px;
    font-size: 14px;
}

footer {
    line-height: 60px;
    background-color: #E7D2F0;
    color: #DE0782;
    text-align: center;
}

/* 第二页 */
#main_banner {
    width: 100%;
    font-size: 0px;
}

#main_banner img {
    width: 100%;
}

.h1 {
    margin-top: 20px;
}

#dierye {
    width: 100%;
    padding-top: 30px;
}

#dierye li {
    width: 100%;
    margin-bottom: 0px;
    height: 210px;
    overflow: hidden;
    margin-bottom: 30px;
}

#dierye li div {
    display: inline-block;
    height: 210px;

}

#foodimg {
    width: 350px;
    height: 210px;
    overflow: hidden;
    float: left;
    border-radius: 10px;
    margin-right: 30px;
}

#foodimg img {
    width: 100%;
    height: 210px;
}

#jieshao {
    width: 100%;
    height: 300px;
}

#jieshao p:first-child {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

#jieshao p:last-child {
    text-indent: 32px;
    line-height: 30px;
}

/* 第三页 */
#fengjing {
    width: 1000px;
    margin: 0 auto;
    font-size: 0px;
    margin-top: 20px;
}

#fengjing li {
    display: inline-block;
    width: 320px;
    height: 400px;
    box-sizing: border-box;
    padding: 20px;
}

#fengjing li p {
    font-size: 16px;
    line-height: 28px;
}

#fengjing li p:nth-child(2) {
    font-weight: 600;
}

#fengjing li p:nth-child(3) {
    box-sizing: border-box;
    width: 280px;
    height: 135px;
    font-size: 14px;
    margin-top: 10px;
    color: rgb(101, 101, 101);
}

#fengjing li img {
    display: inline-block;
    width: 280px;
    height: 175px;
    background-color: #333;
    margin-bottom: 10px;
}

/* 第四页 */
#renwen {
    text-align: center;
}

#renwen img {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

#renwen p {
    text-align: left;
    line-height: 30px;
    text-indent: 32px;
}

#liuyan {
    text-align: center;
}

#liuyanbox {
    display: inline-block;
    text-align: left;
}

#liuyanbox {
    line-height: 30px;
}

#liuyanbox input {
    width: 240px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea {
    width: 500px;
    height: 230px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    width: 100px;
    height: 30px;
    margin-left: 225px;
    margin-top: 30px;
}



六、遇到问题及如何解决🔍

实训中遇到得困难不少,比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等,最后,通过上网查询和请教别人得到了很好的解决。


七、实训总结😊

通过这次网页设计制作实训,能够灵活的运用到所学的知识和技巧制作简单的网页,掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识,对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料,学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题,通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大,学有所用,在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科,值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了,以至于很多想法都没能实现,在以后的学习过程中我要对网页制作有更深的了解,做出更为成熟的网页。


八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/65373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

狂神说多线程学习笔记

一、线程简介 1、多任务 现实中太多这样同时做多件事情的例子了&#xff0c;看起来是多个任务都在做&#xff0c;其实本质上我们的大脑在同一时间依旧只做了一件事情。 2、多线程 原来是一条路&#xff0c;慢慢因为车太多了&#xff0c;道路阻塞&#xff0c;效率极低。为了提…

【信管2.6】项目可研(二)详细可行性研究

项目可研&#xff08;二&#xff09;详细可行性研究在实际的整个项目可研的过程中&#xff0c;机会研究和初步可行性研究有可能不会出现&#xff0c;但详细可行性研究这个步骤是不可缺少的。比如说一些升级改造的项目可能需要初步和详细的可行性研究&#xff0c;而一些小项目可…

阿里P8大牛带你深入理解SpringCloud微服务构建文档

前言 蓦然回首自己做开发已经十年了&#xff0c;这十年中我获得了很多&#xff0c;技术能力、培训、出国、大公司的经历&#xff0c;还有很多很好的朋友。但再仔细一想&#xff0c;这十年中我至少浪费了五年时间&#xff0c;这五年可以足够让自己成长为一个优秀的程序员&#…

嵌入式开发学习之--RCC(下)

文章目录前言一、使用HSE二、使用HSI三、代码编写总结前言 这一篇记录一下时钟的具体实验。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、使用HSE 一般情况下&#xff0c;我们都是使用 HSE&#xff0c;然后 HSE 经过 PLL 倍频之后作为系统时钟…

WRF模式、WRF-SOLAR、WRF-UCM、人工智能气象、FLEXPART、CMIP6数据处理、LEAP模型

1、《高精度气象模拟软件 WRF 实践技术及案例应用》 时间&#xff1a;12月17-18日、24-25日、31日 2、《双碳目标下太阳辐射预报模式【WRF-SOLAR】及改进技术在气象、农林、电力等相关领域中的实践应用 》 时间&#xff1a;12月10-11日、17日-18日 3、《第三期Python人工智能在…

TGK-Planner无人机运动规划算法解读

高速移动无人机的在线路径规划一直是学界当前研究的难点&#xff0c;引起了大量机器人行业的研究人员与工程师的关注。然而无人机的计算资源有限&#xff0c;要在短时间内规划出一条安全可执行的路径&#xff0c;这就要求无人机的运动规划算法必须轻型而有效。本文将介绍一种无…

Java项目:SSM企业OA管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目包含管理员与普通员工两种角色&#xff0c; 管理员角色包含以下功能&#xff1a; 岗位管理,部门管理,工龄奖金管理,员工管理,考勤管理,…

Linux下Jenkins服务器安装与使用

CentOS7环境下安装Jenkins​ JDK安装详细见&#xff1a; JDK安装详细步骤 ​ jenkins安装 Jenkins源添加 **注意&#xff1a; ** 问题1、在添加Jenkins源时会出现以下错误 这是由于没有安装wget软件包的原因 进行wget软件包的安装&#xff1a; yum -y install wget 问题2…

HTML网页设计制作——初音动漫(6页) dreamweaver作业静态HTML网页设计模板

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐&#x1f4…

市面上跑步耳机哪种好、2023年最适合跑步用的耳机排名

这几年&#xff0c;越来越多人注意到了身体健康的重要性&#xff0c;而随着今年飞盘、露营、刘畊宏女孩的兴起&#xff0c;再到卡塔尔世界杯&#xff0c;不断刺激大众运动、健身的热情&#xff0c;面对全民运动热潮&#xff0c;作为普通人应该如何保持激情&#xff0c;实现身心…

Pr:导出设置之编码设置

视频 VIDEO设置因所选导出格式而异。每种格式都有独特的要求&#xff0c;这些要求决定了哪些设置可用。以导出 H.264 文件格式为例&#xff0c;下面给出有关编码设置 Encoding Settings的选项及说明。性能Performance--硬件加速Hardware Encoding利用系统的可用 GPU 硬件&#…

前后端分离模式下,SpringBoot + CAS 单点登录实现方案

1.CAS服务端构建 1.1.war包部署 cas5.3版本 https://github.com/apereo/cas-overlay-template 构建完成后将war包部署到tomcat即可 1.2.配置文件修改 支持http协议 修改apache-tomcat-8.5.53\webapps\cas\WEB-INF\classes\services目录下的HTTPSandIMAPS-10000001.json&…

PDF文档一键自动生成目录和书签

在工作中经常会遇到编写文档的时候&#xff0c;当我们在word编写完文档后&#xff0c;一般可以自动生成一个目录。为了方便阅读和保护文档不被破坏&#xff0c;一般发送给别人的时候&#xff0c;需要把word文档转换成PDF格式。但是word文档转换为PDF格式后&#xff0c;目录虽然…

【强化学习论文合集】五.2017国际表征学习大会论文(ICLR2017)

强化学习(Reinforcement Learning, RL),又称再励学习、评价学习或增强学习,是机器学习的范式和方法论之一,用于描述和解决智能体(agent)在与环境的交互过程中通过学习策略以达成回报最大化或实现特定目标的问题。 本专栏整理了近几年国际顶级会议中,涉及强化学习(Rein…

vscode electron安装环境

1. 安装nodejs Node.js 安装18.12.1LTS版本 安装完成后确认 node –-version 2. 安装electron npm install electron –g 验证是否安装成功 electron –v 没成功&#xff01;&#xff01;&#xff01; 找解决方案 ​​​​​​​ 无法加载文件xxx.ps1&#xff0c;因为在…

信而泰OLT使用介绍-网络测试仪实操

一、OLT产品介绍 1.概述 PON作为FTTX网络发展的核心技术&#xff0c;局端设备OLT尤其重要。 本文档中主要介绍OLT的功能特性、业务配置 2.基本功能特性 2.1大容量和高集成度 ZXA10 C300集光接入、数据交换、路由处理于一体&#xff0c;提高了系统的集成度。 2.2 EPON功能…

ADSP-21489的图形化编程详解(3:音效开发例程-直通三个例程讲清楚)

Fireware 烧写好了之后&#xff0c;SigmaStudio 图形化开发的基本条件就达成了。我们重新来链接一下硬件&#xff0c;进入图形化编程的阶段&#xff0c;这个阶段我尽量多写一些例程&#xff0c;让大家能够尽快熟悉这个软件开发的全过程。 1. 直通&#xff08;1&#xff09; 1&…

C++类与对象(三)赋值运算符重载、const成员

目录 1.赋值运算符重载 1.1引入 1.2 运算符重载 1.3赋值运算符重载 1.4 前置和后置重载 2.const成员 3.取地址及const取地址操作符重载 1.赋值运算符重载 1.1引入 赋值运算符重载&#xff1a;用已存在的对象&#xff0c;给另一个已存在的对象赋值 还是使用上节日期类的…

[网络工程师]-应用层协议-电子邮件协议

常见的电子邮件协议有简单邮件传输协议、邮局协议和Internet邮件访问协议。 1、简单邮件传输协议&#xff08;Simple Mail Transfer Protocol&#xff0c;SMTP&#xff09; SMTP主要负责将电子邮件从发送方传送到接收方&#xff0c;即对传输的规则做了规定&#xff0c;该协议工…