web中秋主题网站网页设计课程时的大作业技术栈：HTML5、CSS/CSS3、BootStrap、LayUI分享给需要的同学

共70个文件

png：44个

css：5个

html：3个

html

课程资源

bootstrap

需积分: 1 177 浏览量 2024-09-02 15:37:58 上传评论收藏 16.33MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

cxbbc2ewwe.zip （70个子文件）

LICENSE 1KB

dist

music

亲子群星 - 水调歌头明月几时有 (节目).mp3 1.29MB

青春事件 - 月夜杜甫 (节目).mp3 500KB

亲子群星 - 嫦娥（唐）李商隐 (节目).mp3 367KB

font

iconfont.ttf 45KB

iconfont.woff2 25KB

iconfont.svg 299KB

iconfont.eot 46KB

iconfont.woff 30KB

layui.js 284KB

bootstrap.bundle.min.js 76KB

css

bootstrap.min.css 160KB

layui.css 78KB

畅游中秋.css 2KB

诗词中秋.css 2KB

花好月圆.css 3KB

html

花好月圆.html 6KB

诗词中秋.html 13KB

畅游中秋.html 25KB

images

放孔明灯.png 123KB

水晶月饼.png 112KB

中秋天象.png 253KB

玩花灯.png 83KB

桂花糕.png 107KB

莲蓉月饼.png 137KB

侧图1.jfif 114KB

鲜肉月饼.png 150KB

大闸蟹.png 148KB

像形月饼1.png 142KB

豆沙月饼.png 119KB

ź.png 141KB

提灯笼.png 115KB

冰皮月饼.png 112KB

杂粮月饼.png 124KB

侧图2.jfif 132KB

番薯.png 112KB

团圆馍.png 141KB

田螺.png 127KB

猜谜.png 146KB

水中月.gif 287KB

鲜花月饼.png 115KB

兔儿爷.png 109KB

椰奶月饼.png 142KB

杜甫.webp 76KB

导航图.png 522KB

柚.png 113KB

嫦娥.webp 39KB

南瓜.png 115KB

月饼.png 103KB

桂花酒.png 119KB

树中秋.png 131KB

果蔬月饼.png 99KB

海味月饼.png 116KB

云腿月饼.png 124KB

祭月.png 104KB

听香.png 38KB

五仁月饼.png 134KB

糍粑.png 119KB

舞火龙.png 133KB

纳凉月饼.png 143KB

观潮.png 99KB

1.gif 887KB

孔明灯1.png 15KB

巧克力月饼.png 107KB

保健月饼.png 141KB

茶叶月饼.png 87KB

芝麻月饼.png 140KB

赏月.png 66KB

芋头.png 108KB

video

中秋节的由来.mp4 7.03MB

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>畅游中秋</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/畅游中秋.css"> <link rel="stylesheet" href="../css/layui.css"> <script src="../js/bootstrap.bundle.min.js"></script> <script src="../js/layui.js"></script> <script> layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#lunbo1' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); carousel.render({ elem: '#lunbo2' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); }); layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#lunbo3' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); carousel.render({ elem: '#lunbo4' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); }); </script> </head> <body>  <div style="text-align: center;"> <span style="height: 100%;display: inline-block;vertical-align: middle;"></span> <img style="vertical-align: middle;" src="../images/导航图.png" alt="" class="img-fluid"> </div> <div class="container"> <nav> <ul class="nav1"> <li><a href="../html/花好月圆.html">花好月圆</a></li> <li><a href="../html/畅游中秋.html">畅游中秋</a></li> <li><a href="../html/诗词中秋.html">诗词中秋</a></li> </ul> </nav> </div>  <div class="container"> <div style="border: 5px #ffaa48 solid;border-radius: 30px;width: 92%;margin-left: 4%;"> <div style="text-align: center;height: 100px;font-size: 40px;font-family: '宋体';font-weight:bolder;"><br>节日习俗</div> <div style="width: 92%;margin-left: 4%;"> <div style="text-align: center;height: 50px;line-height: 50px;font-size: 30px;font-family: '宋体';">习俗活动</div> <div class="layui-carousel" id="lunbo1"> <div carousel-item> <div style="background-color: bisque;"> <div class="row"> <div class="col-md-3"><img src="../images/祭月.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">祭月</span></div></div> <div class="col-md-3"><img src="../images/赏月.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">赏月</span></div></div> <div class="col-md-3"><img src="../images/猜谜.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">猜谜</span></div></div> <div class="col-md-3"><img src="../images/树中秋.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">树中秋</span></div></div> </div> </div> <div style="background-color: bisque;"> <div class="row"> <div class="col-md-3"><img src="../images/舞火龙.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">舞火龙</span></div></div> <div class="col-md-3"><img src="../images/听香.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">听香</span></div></div> <div class="col-md-3"><img src="../images/孔明灯1.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">烧塔</span></div></div> <div class="col-md-3"><img src="../images/兔儿爷.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">兔儿爷</span></div></div> </div> </div> <div style="background-color: bisque;"> <div class="row"> <div class="col-md-3"><img src="../images/放孔明灯.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">放孔明灯</span></div></div> <div class="col-md-3"><img src="../images/观潮.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">观潮</span></div></div> <div class="col-md-3"><img src="../images/玩花灯.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">玩花灯</span></div></div> <div class="col-md-3"><img src="../images/提灯笼.png" alt="" style="width: 100%;border-top-right-radius: 30px;border-top-left-radius: 30px;"><div style="background-color: #e6b781;height: 40px;font-size: 20px;text-align: center;line-height: 40px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;"><span class="text-danger">提灯笼</span></div></div> </div> </div> </div> </div> </div> <br> <br> <div style="border: 3px #ffaa48 solid;width: 40%;margin-left: 30%;"></div>

评论收藏

内容反馈