html+css+js制作LOL官网，web前端大作业（3个页面+模拟登录+链接）
文章目录
- 一、效果图
-
- 1.1首页
- 1.2 模拟登录
- 1.3 游戏资料页面
- 1.4 商城页面
- 二、代码
-
- 2.1 首页
- 2.2 资料页面
- 2.3 商城页面
- 三、链接
一、效果图
1.1首页
1.2 模拟登录
1.3 游戏资料页面
1.4 商城页面
二、代码
2.1 首页
index.html
游戏玩法感想12月17日：下一步的打算？英雄联盟官网 
执事（2021）通行证
全明星最佳阵容折扣 2021德玛西亚杯 荣誉之路限时开放 约德尔手办盲盒
视频 《双城之战》：等你续写联盟IP宇宙新篇章 12-18
新闻 光明哨兵回顾 12-16
新闻 《盟牙有礼·第四季》福利来袭！ 12-13
公告 福星计划权益皮肤更新公告 12-10
公告 执事系列皮肤与执事通行证即将上线 12-08
阅读更多最新资讯
12月24日周免英雄更新公告公告 荣誉之路 限时开放 12-17
公告 2021年12月16日 11.24b版本不停机更新公告 12-16
公告 2021年12月16日 例行停机维护公告 12-15
公告 2021年12月13日 不停机更新公告 12-15
公告 福星计划权益皮肤更新公告 12-10
阅读更多最新资讯
LPL年度纪录片《不破不立》第六集片段：Bin的自律生活视频 2021德玛西亚杯淘汰赛第四日宣传片：最熟悉的对手 12-25
视频 TOP5：knight死亡射线乱战秀细节 12-25
视频 英雄麦克疯：五杀终结者 12-24
视频 2021德玛西亚杯淘汰赛第三日宣传片：战热烈，制新章 12-24
赛事 恭喜LNG晋级2021德玛西亚杯四强！ 12-23
阅读更多最新资讯
电研所：控制效果排行榜，最强控制你猜不到视频 电研所：减速抗性 韧性 这些你真的懂吗？ 四分钟带你快速了解 12-23
教学 一文教你针对峡谷泛滥成灾的破舰者赛恩 12-20
教学 Ac教你玩游戏-超级强势滴冰川救赎流泰坦！ 12-19
教学 【婵儿】莎弥拉教科书，学会就轻松拿五杀！ 12-16
新闻 【小贝塔】王者死歌的光速发育技巧，教你瞬间拉开等级 12-13
阅读更多最新资讯
三个人的德玛西亚——简评《脆弱的遗赠》视频 峡谷十二钗，国风与召唤师峡谷的碰撞 12-24
娱乐 台词里的致敬梗（19）：魔鬼总能得偿所愿 12-24
视频 英雄联盟宇宙丨死神，冥界的由来丨科普第1集 12-23
娱乐 《简笔画联盟》没想到我也可以这么帅？ 12-22
视频 他回来了，全部都回来了！ 12-21
阅读更多最新资讯
热门活动
每周优惠
1天后结束NEW
激战全明星赢图标奖励
今天结束HOT
约德尔人手办盲盒
15天后结束HOT
英雄联盟排位FAQ
长期活动LONG
function move(img) {
img.src = "img/btn3.png";
}
function leave(img) {
img.src = "/img/52/btn1.png";
}
<img src="/img/1b/btn2.png" width="130px" style="cursor: pointer;" data-container="body"
data-toggle="popover" data-html="true" data-placement="bottom"
data-content="
">
在线客服
秩序殿堂
LOL宇宙
峡谷之巅
神龙尊者
黎明与黑夜
英雄砺十年联盟神凰现
拥抱神力 叱咤魔城
魔女摇曳 魅惑众生
光明哨兵
腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作
腾讯公司版权所有网络游戏行业防沉迷自律公约
COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.
COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.
本网络游戏适合16+岁的用户使用；为了您的健康，请合理控制游戏时间。
深圳市市场监督管理局企业主体身份公示工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号
批准文号：新出审字[2011]310号 |文网进字[2011] 004号 | 出版物号：ISBN 978-7-89989-145-2|全国文化市场统一举报电话：12318
账号密码登录
$(function() { $('[data-toggle="tooltip"]').tooltip() }) $(function() { $('[data-toggle="popover"]').popover() }) console.log("小牛马版权所有")index.css
body {
background-color: rgb(238, 238, 238);
}
/* 修改container的宽度 */
@media (min-width: 1200px) {
.container {
max-width: 1470px;
}
}
/* ---------------------------分割线---------------------------------- */
/* 导航栏样式的修改 */
.form-control-sm {
border-radius: 0;
border: black 1px solid;
width: 300px;
}
.btn-dark {
border-radius: 0;
}
.myself p {
color: whitesmoke;
font-size: 18px;
}
.myself img {
margin-top: -14px;
border: rgb(205, 190, 136) 2px solid;
border-radius: 50%;
padding: 2px;
cursor: pointer;
}
.myself a {
color: rgb(205, 190, 136);
}
.myself a:hover {
text-decoration: none;
color: rgb(205, 190, 136);
}
.tipcolor {
color: rgb(205, 190, 136);
}
/* ---------------------------分割线---------------------------------- */
/* 霸屏箭头的动画效果 */
.big {
position: relative;
}
@keyframes bounce-down {
25% {
transform: translateY(-3px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(3px);
}
100% {
transform: translateY(0);
}
}
.animate-bounce-down {
position: absolute;
bottom: 80px;
left: 50%;
color: rgb(205, 190, 136);
-webkit-animation: bounce-down 1s linear infinite;
animation: bounce-down 1s linear infinite;
}
.animate-bounce-down:hover {
color: rgb(205, 190, 136);
}
/* ---------------------------分割线---------------------------------- */
/* 模态框样式 */
.btn-info {
border: 0;
border-radius: 0;
background-color: rgb(134, 206, 47);
}
.btn-info:hover {
background-color: rgb(142, 218, 49);
}
/* js表单验证需要用到的样式 */
.error {
border: 1px solid #FF3300;
background: #FFF2E5;
font-size: 10px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
padding: 0 10px;
}
.success {
border: 1px solid #01BE00;
background: #E6FEE4;
font-size: 10px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
padding: 0 10px;
}
/* ---------------------------分割线---------------------------------- */
/* 轮播图自己修改的样式 */
.carousel-indicators {
color: black;
bottom: -35px;
margin-right: 0;
margin-left: 0;
overflow: hidden;
}
.carousel-indicators div {
cursor: default;
width: 166px;
height: 35px;
text-align: center;
padding-top: 5px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 5px;
background-color: rgb(227, 226, 226);
transition: opacity 0.6s ease;
}
.carousel-indicators div:hover {
background-color: rgb(247, 246, 246);
color: rgb(205, 190, 136);
border-bottom: 2px solid rgb(205, 190, 136);
}
.carousel-indicators .active {
background-color: rgb(247, 246, 246);
color: rgb(205, 190, 136);
border-bottom: 2px solid rgb(205, 190, 136);
}
@media (prefers-reduced-motion: reduce) {
.carousel-indicators div {
transition: none;
}
}
/* ---------------------------分割线---------------------------------- */
/* 右侧边栏分页式导航+tab切换栏+列表组自己增加和修改的样式 */
.list-first {
height: 70px !important;
font-size: 26px !important;
color: #0da0b4 !important;
text-align: center;
font-weight: bold;
background-image: url(../img/tiaowen.png);
background-repeat: no-repeat;
/* 单行文本溢出显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-first:hover {
color: rgb(187, 154, 108) !important;
}
.nav-link {
color: #495057;
}
.nav-link:hover {
color: #0da0b4;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #0da0b4;
}
/* 自定义徽章样式 */
.badge-gold {
border: rgb(197, 171, 134) 1px solid;
border-radius: 0;
color: rgb(197, 171, 134);
}
.badge-gold-fill {
border: rgb(197, 171, 134) 1px solid;
background-color: rgb(197, 171, 134);
}
.badge-red-fill {
border: red 1px solid;
background-color: red;
}
.badge-orange {
border: rgb(233, 133, 45) 1px solid;
border-radius: 0;
color: rgb(233, 133, 45);
}
.badge-blue {
border: rgb(99, 136, 197) 1px solid;
border-radius: 0;
color: rgb(99, 136, 197);
}
.badge-lightblue {
border: #69c5d2 1px solid;
border-radius: 0;
color: #69c5d2;
}
.badge-green {
border: rgb(75, 163, 106) 1px solid;
border-radius: 0;
color: rgb(75, 163, 106);
}
.list-group-item a {
font-family: "微软雅黑";
color: #3f3f3f;
}
.list-group-item a:hover {
color: #0da0b4;
}
.list-group-item {
font-size: 13px;
height: 45px;
/* 单行文本溢出显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-last {
font-size: 17px;
background-color: rgb(227, 226, 226);
-webkit-animation: move 1.5s linear infinite;
animation: move 1.5s linear infinite;
}
/* 左右移动的动画 */
@keyframes move {
25% {
transform: translateX(-3px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(3px);
}
100% {
transform: translateX(0);
}
}
.list-last:hover {
cursor: pointer;
border-radius: 3px;
background-color: rgb(218, 216, 216);
}
.list-last a {
color: #0b8c9d;
}
/* ---------------------------分割线---------------------------------- */
/* 卡片组自己修改的样式 */
.card {
cursor: pointer;
border-radius: 0;
}
.card:hover {
color: #0b8c9d;
transform: translateY(-9px);
transition-duration: 0.25s;
}
.card-body {
padding: 0;
padding-left: 10px;
padding-top: 5px;
}
/* ---------------------------分割线---------------------------------- */
/* 弹出框里面内容的样式 */
.free {
overflow: hidden;
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
}
/* 功能区样式 */
.more {
width: 135px;
height: 75px;
background-color: white;
text-align: center;
display: inline-block;
}
.more p {
padding-top: 19%;
}
.more:hover {
cursor: pointer;
color: rgb(13, 160, 180);
border-radius: 5px;
box-shadow: 0px 0px 5px #888888;
}
/* 图标变大变小的动画 */
@-webkit-keyframes beBig {
25% {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
}
50% {
-webkit-transform: scale3d(1.3, 1.3, 1.3);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
.more:hover img {
-webkit-animation: beBig 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
}
/* ---------------------------分割线---------------------------------- */
/* 图片变大的动画 */
@-webkit-keyframes imgBig {
from {
-webkit-transform: scale3d(1, 1, 1);
}
to {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
}
}
/* 底下一排图片的样式 */
.imgbox {
overflow: hidden;
width: 210px;
height: 135px;
cursor: pointer;
}
.imgbox:hover img {
-webkit-animation: imgBig 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
}
.imgbox-text {
position: absolute;
margin-top: -28px;
z-index: 999;
height: 28px;
width: 210px;
background-color: rgb(0, 0, 0, 0.6);
color: rgb(205, 190, 136);
text-align: center;
}
2.2 资料页面
introduce.html
新手指引
联盟简介
游戏详情
上手难度
电竞风潮
破败之王 佛耶戈
世界将我无情毁弃。现在，我将以痛报之。永失吾爱，举目破败。
时间刺客 艾克
我宁愿犯错，也不愿什么都不做。
疾风剑豪 亚索
且随疾风前行，身后亦需留心。
封魔剑魂 永恩
如果面具戴的够久，你就会忘了后面那张脸。
德邦总管 赵信
一点寒芒先到，随后枪出如龙。
什么是英雄联盟？
英雄联盟（League of Legends）是由美国Riot Games开发，腾讯游戏运营的全新英雄对战网游。英雄联盟的主创团队由各著名游戏公司的核心美术、策划、程序人员组成，他们打造了游戏中风格特色各异的英雄，加入更加丰富的物品合成系统、地图玩法、天梯匹配机制，以及独创的“召唤师”技能、符文、天赋组合，让玩家感受不一样的英雄对战网游。
在游戏中，玩家将扮演一位召唤者，并选择你所信任的联盟国进入这个游戏的正义领域，为了控制瓦罗然的权利而奋战。在这个联盟中只有一条规则：胜者就是一切！
全新英雄对战网游
英雄联盟中拥有的海量英雄及皮肤让人印象深刻——这些英雄不仅在外观上风格迥异，甚至个个都有自己独特的性格和脾气，例如：正气凛然的无畏先锋军团领袖—德玛西亚之力盖伦、意志坚强的弗雷尔卓德部族领袖—寒冰射手艾希、乐于钻研的魔法学者—流浪法师瑞兹……除此之外，你还可以在英雄联盟中看到代表不同地域文化特色的角色或皮肤，其中包括中国武术大师、北欧冰雪巨人、日本忍者、古埃及神话角色等。
在游戏中，身为召唤师的玩家在每局游戏中都将召唤一位英雄帮助自己进行战斗。目前已经有许多英雄协助他们达成目标，在英雄联盟中完成各自心中的正义之战！我们也深信，在英雄联盟超过100位英雄中，总有一个是合适你的！
在游戏中，身为召唤师的玩家在每局游戏中都将召唤一位英雄帮助自己进行战斗。目前已经有许多英雄协助他们达成目标，在英雄联盟中完成各自心中的正义之战！我们也深信，在英雄联盟超过100位英雄中，总有一个是合适你的！
注：英雄联盟每周有13位免费英雄可供使用。
真正的易于上手 难于精通
英雄联盟非常注重游戏上手难度，我们希望让更多用户能够快速了解它，进而认识它，并且爱上它。与传统的英雄对战网游相比，英雄联盟取消了“反补”、“英雄死亡掉落金钱”、“法球效果”等设定，在保留游戏核心玩法的基础上，加入更易特色的召唤师技能、符文、天赋，以及更便捷的匹配机制，让英雄联盟真正变得“易于上手”。
与此同时，召唤师技能、符文、天赋搭配带来的可变性让每一位玩家都能按照自己的风格打造英雄，而英雄联盟本身所要求的团队协作能力以及竞技性让它极具可玩性，想成为高手可不是什么简单的事。
引领电子竞技风潮
作为全球最火的电子竞技游戏之一，英雄联盟在2013年10月结束的第三赛季（S3）世界总决赛上创造了新的记录，来自世界各地的14支顶尖战队共同争夺2,000,000美元奖金以及世界冠军的荣誉，中国战队“皇族”在决赛中不敌韩国“SKT”，最终夺得亚军。据统计，共有超过3200万的玩家通过网络、数字电视等方式观看了比赛。
在中国，由腾讯打造的英雄联盟职业联赛（LOL Pro League，简称LPL）同样万众瞩目，这里代表了中国的英雄联盟最高竞技水平。在比赛期的每个周末，你都能欣赏到由WE、OMG、iG、皇族等知名职业战队带来的精彩对决。对所有职业选手而言，这里是梦想的殿堂！
腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作
腾讯公司版权所有网络游戏行业防沉迷自律公约
COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.
COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.
本网络游戏适合16+岁的用户使用；为了您的健康，请合理控制游戏时间。
深圳市市场监督管理局企业主体身份公示工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号
批准文号：新出审字[2011]310号 |文网进字[2011] 004号 | 出版物号：ISBN 978-7-89989-145-2|全国文化市场统一举报电话：12318
introduce.css
body {
background-color: rgb(238, 238, 238);
}
.button {
cursor: pointer;
border-radius: 35px;
padding: 30px;
background: url(../img/btnbg1.jpg) no-repeat center;
}
/* 固定侧边栏的样式 */
.slider-bar {
z-index: 99999;
position: fixed;
z-index: 999999999999;
margin-top: 25%;
margin-left: 95%;
width: 145px;
height: 165px;
font-size: 12px;
}
.nav-link {
color: #c1c1c1 !important;
}
.active {
color: #0b8c9d !important;
}
/* 图标变大变小的动画 */
@-webkit-keyframes beBig {
25% {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
}
50% {
-webkit-transform: scale3d(1.3, 1.3, 1.3);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
.nav-item:hover img {
-webkit-animation: beBig 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
2.3 商城页面
shop.html
英雄联盟周边商城 返回官网
Anker授权联名新品加入购物车
2021全球总决赛EDG冠军纪念周边加入购物车
英雄联盟手游首款约德尔人盲盒首发加入购物车
英雄联盟 双城之战加入购物车
7天无理由退换货
100%官方正品
全场每单满299包邮
- 购物指南
- 账户注册与登录
- 购买流程介绍
- 支付方式
- 常见问题
- 配送服务
- 全场满299元免运费
- 配送范围及运费
- 配送进度查询
- 售后服务
- 7天无理由退换货
- 退换货流程
- 商品送错的处理方案
- 售后服务及投诉
- 服务中心
- 在线客服查询（8:00~24:00）
- 咨询时间：工作日13:00-17:00
- 售后：499152654（QQ）
账号密码登录
// 预览图片的方法 function move(img, url) { img.src = url; } function leave(img, url) { img.src = url; } // 加入购物车的方法 var num = document.querySelector(".num"); var numV = parseInt(num.textContent); var addbtns = document.querySelectorAll("#addbtn"); for (var i = 0; i < addbtns.length; i++) { addbtns[i].onclick = function() { ++numV; num.innerText = numV; alert("添加成功") } } console.log("小牛马版权所有") $(function() { $('[data-toggle="tooltip"]').tooltip() }) $(function() { $('[data-toggle="popover"]').popover() })shop.css
ul {
list-style: none;
}
/* 模态框样式 */
.btn-info {
border: 0;
border-radius: 0;
background-color: rgb(134, 206, 47);
}
/* 固定侧边栏的样式 */
.slider-bar {
z-index: 99999;
position: fixed;
z-index: 999999999999;
margin-top: 25%;
margin-left: 95%;
width: 95px;
height: 115px;
font-size: 17px;
background-color: white;
border-radius: 9px;
color: rgb(32, 32, 32);
}
.slider-bar:hover {
background-color: rgb(32, 32, 32);
color: white;
}
.btn-info:hover {
background-color: rgb(142, 218, 49);
}
/* js表单验证需要用到的样式 */
.error {
border: 1px solid #FF3300;
background: #FFF2E5;
font-size: 10px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
padding: 0 10px;
}
.success {
border: 1px solid #01BE00;
background: #E6FEE4;
font-size: 10px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
padding: 0 10px;
}
/* 导航栏样式 */
.num {
padding-top: 0px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
background-color: orangered;
border-radius: 50%;
color: white;
}
.navbar-brand {
background-image: url(../img/shoplogo.png);
background-repeat: no-repeat;
background-position: -2px -147px;
width: 320px;
height: 40px;
}
.btn-sm {
height: 32px;
width: 40px;
border-radius: 0px;
background-color: rgb(250, 79, 23);
}
.btn-sm:hover {
background-color: rgb(220, 66, 19);
}
.form-control-sm {
border-radius: 0px;
}
.popover-content {
width: 160px;
}
.popover-content a {
cursor: pointer;
}
.border-orange {
border-radius: 0;
border-top: 3px solid orangered;
}
.orange :hover {
cursor: pointer;
color: orangered !important;
}
.nav-item {
font-size: 18px;
font-weight: bold;
}
.nav-item a:hover {
color: orangered !important;
}
/* 轮播图样式 */
.carousel-indicators {
margin-bottom: 10px;
}
.carousel-indicators li {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: white !important;
opacity: 1;
margin-left: 8px;
}
.carousel-indicators .active {
background-color: red !important;
}
.content .col-3 {
cursor: pointer;
}
/* 页尾样式 */
.fuwu1 {
padding: 19px;
background: url(../img/base.png) no-repeat -10px -234px;
}
.fuwu2 {
padding: 19px;
background: url(../img/base.png) no-repeat -73px -234px;
}
.fuwu3 {
padding: 19px;
background: url(../img/base.png) no-repeat -179px -234px;
}
.footer a {
font-size: 12px;
}
三、链接
链接：https://pan.baidu.com/s/1VtaAMts5TnKk8CJtaL750Q
提取码：LDL6
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/9b3c5f1b21.html
相关推荐
-
2024年01月微软更新Bug 已解决 ！Explorer.EXE 提示：Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。
（上图为Windows 11，Windows 10可能少目录，但操作一样！） 第1步.【WIN键+R键】，【打开regedit】； 第2步.找到注册表路径：【HKEY_CLASSE…
-
c#之反射详解
总目录 文章目录 总目录 一、反射是什么？ 1、C#编译运行过程 2、反射与元数据 3、反射的优缺点 二、反射的使用 1、反射相关的类和命名空间 1、System.Type类的应用…
-
微软Office正版镜像下载
下载微软原版镜像文件：（以下镜像均为二合一镜像即包含32位64位版安装时系统自动选择） Office2021中文版的离线安装包下载地址合集： 一、专业增强版(强烈推荐)：http:…
-
kernel data inpage error蓝屏解决方案
如果遇到电脑蓝屏 kernel data inpage error，该如何解决？这个问题主要是更新失败或者第三方软件冲突导致的。下面就来看看小编准备的几个解决办法。 ker…
-
基于C#制作的锁屏小工具，点击图片内容解锁
自己制作的一个无厘头电脑锁屏工具被同事发现了，纷纷要求给他们量身定制安排一套 一、开发步骤 1.1 创建项目 1.2 窗体设置 1.3 键盘钩子事件 1.4 解锁按钮设置 一、开发…
-
【图形学】探秘图形学奥秘：DDA与Bresenham算法的解密与实战
⏰诗赋清音：云生高巅梦远游， 星光点缀碧海愁。 山川深邃情难晤， 剑气凌云志自修。 目录 🌌1. 初识模式识别 🌌2. 开发环境的使用及基本图形生成…
-
微软Power Platform平台低代码
微软Power Platform平台 从我目前的了解的情况来看，资料来源于百度，csdn,掘金，简书，知乎等国内的资料相对于比较少或者说power platform 这个平台的系列…
-
IDEA连接MySQL数据库并执行SQL语句使用数据
文章目录 一、IDEA连接MySQL数据库 （一）首先新建普通Java项目 （二）连接数据库 1、点击右侧DataBase 2、点击加号，找到MySQL，添加数据库 3、输入用户名…
-
软件测试|好用的pycharm插件推荐（二）—— JSON Parser
简介 PyCharm是一款强大的Python集成开发环境（IDE），它提供了许多插件来增强开发体验。其中一个非常有用的插件是”JSON Parser”，它允…
-
Django的web框架Django Rest
文章目录 Django Rest_Framework 1. DRF介绍 2.DRF特点 3.环境安装与配置 （1）DRF需要以下依赖 （2）创建django项目 4.序列化器的使用…
