一键搭建网站工具,网站设计的公司报价,上海百度公司,wordpress百度云下载文件一张网页带你了解中秋节的前世今生#x1f317;序言一、#x1f319;题材选取1. 诗词赏析2. 原型图抢先看3. 界面设计二、#x1f31b;编码阶段1. 项目目录结构2. html设计#xff08;1#xff09;nav结构设计#xff08;2#xff09;banner结构设计#xff08;3#… 一张网页带你了解中秋节的前世今生序言一、题材选取1. 诗词赏析2. 原型图抢先看3. 界面设计二、编码阶段1. 项目目录结构2. html设计1nav结构设计2banner结构设计3诗词背景设计4赏析设计3. css设计1nav样式美化2banner样式美化3背景及赏析样式美化三、结果展示四、结束语☪️彩蛋 One More Thing素材获取番外篇序言
中秋节是中国的传统节日之一是一个非常历史悠久的节日。同时各地也有各地的习俗祭月、赏月、观花灯、吃月饼等等。除此之外呢各地还有民间拜月、月光马儿、兔儿爷、舞龙灯等。
当然对于中秋来说有一首最为相关的诗就是《水调歌头》。
《水调歌头》是苏轼的中秋望月怀人之作此人运用形象描绘的收发勾勒出一种皓月当空、亲人潜力、孤高旷远的境界氛围。
那么借着2021年的来临之际周一以这首诗作为背景来写一张关于中秋明月的网页。一起来欣赏这一湾明月吧~
一、题材选取
1. 诗词赏析
首先我们先来赏析《水调歌头》这首诗。具体如下图 大家可以看到诗一共有 8 句。那接下来我们就以这八句诗加上对其的解析来进行设计稿设计。
2. 原型图抢先看
依据以上诗词我们从导航栏 nav 、 banner 、诗词背景和诗词赏析几个方面来进行原型设计。具体如下图 3. 界面设计
好了依据上面的原型图我们来设计最终的高保真界面。具体如下图 二、编码阶段
1. 项目目录结构
首先我们先来看项目的目录结构。具体如下图 2. html设计
1nav结构设计
对于导航栏来说我们先来看下其 html 结构。具体代码如下
div class nav!-- 左边logo --div classlefta hreflogo/a/div!-- 右边导航栏 --div classrightullidivp鉴赏/ppAppreciate/p/divdivi class iconfont icon-haofangtuo400iconfontshaixuanzhedie/i/div/lilidivp交流/ppCommunication/p/divdivi class iconfont icon-haofangtuo400iconfontshaixuanzhedie/i/div/lilidivp发现/ppDiscover/p/divdivi class iconfont icon-haofangtuo400iconfontshaixuanzhedie/i/div/lilidivp精选/ppChoice/p/divdivi class iconfont icon-haofangtuo400iconfontshaixuanzhedie/i/div/lilidivp关于/ppAbout/p/divdivi class iconfont icon-haofangtuo400iconfontshaixuanzhedie/i/div/li/ul/div
/div2banner结构设计
依据上面的设计图大家还可以看到有一个背景图。背景图其实周一内嵌了3张图并且用轮播的形式呈现。具体如下图所示 轮播图依据以上轮播图我们来对其进行结构设计。具体代码如下
!-- banner栏 --
div class bannerdiv class swiper-container :key bannerList.lengthul class swiper-wrapperli class swiper-slideimg src../img/home_banner_5.jpg altdiv classbanner_db/div/lili class swiper-slideimg src../img/home_banner_2.jpg altdiv classbanner_db/div/lili class swiper-slideimg src../img/home_banner_3.jpg altdiv classbanner_db/div/lili class swiper-slideimg src../img/home_banner_4.jpg altdiv classbanner_db/div/lili class swiper-slideimg src../img/home_banner_1.jpg altdiv classbanner_db/div/li/ul/div
/div3诗词背景设计
设计完背景之后我们来设计第一个模块诗词背景。具体代码如下
div class backgrounddiv class background_titlep01nbsp;nbsp;/pp诗词背景/p/divdiv class background_contentdiv class background_content_topimg src../img/background①.jpg altimg src../img/background②.jpg alt/divdiv class background_content_bottomp苏轼因为与革新派政见不同自请外放辗转在各地为官。他曾经要求调任到离弟弟苏辙较近的地方为官以求兄弟多多相聚但一直未能如愿。/ppspan熙宁九年苏轼时任密州知州此时与苏辙已七年未得团聚。/spanspan这年中秋夜皓月当空银辉遍地苏轼面对一轮明月心潮起伏于是趁酒兴正酣挥笔写下了这首千古名篇。/span/p/div/div
/div4赏析设计
接下来是第二个模块诗词赏析。具体代码如下
div class definitiondiv class definition_titlep02nbsp;nbsp;/pp诗词赏析/p/divdiv class definition_content!-- first sentence --div class definition_content_combinationdiv class verse_leftimg src../img/first_sentence.jpg alt/divdiv class verse_rightdiv class verseTopdiv class green_square词语注释/divdiv class green_sentencep把酒端起酒杯。把执、持。/p/div/divdiv class verseMiddlediv class green_square白话译文/divdiv class green_sentencep明月从什么时候开始有的呢我拿着酒杯遥问苍天。/p/div/divdiv class verseBottomdiv class green_square诗句鉴赏/divdiv class green_sentencep其问之痴迷、想之逸尘确实有一种类似的精、气、神贯注在里面。/p/div/div/div/div!-- second sentence --div class definition_content_combinationdiv class verse_right verse_right_reversediv class verseTop verseTopReversediv class green_square词语注释/divdiv class green_sentencep天上宫阙què指月中宫殿。阙古代城墙后的石台。/p/div/divdiv class verseMiddle verseMiddleReversediv class green_square白话译文/divdiv class green_sentencep不知道天上的宫殿今晚是哪一年。/p/div/divdiv class verseBottom verseBottomReversediv class green_square诗句鉴赏/divdiv class green_sentencep把对于明月的赞美与向往之情更推进了一层诗人想象那一定是一个好日子所以月才这样圆、这样亮。/p/div/div/divdiv class verse_leftimg src../img/second_sentence.jpg alt/div/div!-- third sentence --div class definition_content_combinationdiv class verse_leftimg src../img/third_sentence.jpg alt/divdiv class verse_rightdiv class verseTopdiv class green_square词语注释/divdiv class green_sentencep乘风驾着风凭借风力。归去回到天上去。/pp不胜shēng经不住承受不了。胜承担、承受。/p/div/divdiv class verseMiddlediv class green_square白话译文/divdiv class green_sentencep我想要乘御清风回到天上又恐怕在美玉砌成的楼宇受不住高耸九天的寒冷。/p/div/divdiv class verseBottomdiv class green_square诗句鉴赏/divdiv class green_sentencep这几句明写月宫的高寒暗示月光的皎洁把那种既向往天上又留恋人间的矛盾心理十分含蓄地写了出来。/p/div/div/div/div!-- forth sentence --div class definition_content_combinationdiv class verse_right verse_right_reversediv class verseTop verseTopReversediv class green_square词语注释/divdiv class green_sentencep弄清影意思是诗人在月光下起舞影子也随着舞动。弄玩弄欣赏。/pp何似何如哪里比得上。一说何时。/p/div/divdiv class verseMiddle verseMiddleReversediv class green_square白话译文/divdiv class green_sentencep翩翩起舞玩赏着月下清影哪里比得上在人世间/p/div/divdiv class verseBottom verseBottomReversediv class green_square诗句鉴赏/divdiv class green_sentencep他终于从幻觉回到现实在出世与入世的矛盾纠葛中入世思想最终占了上风。/p/div/div/divdiv class verse_leftimg src../img/fourth_sentence.jpg alt/div/div!-- fifth sentence --div class definition_content_combinationdiv class verse_leftimg src../img/fifth_sentence.jpg alt/divdiv class verse_rightdiv class verseTopdiv class green_square词语注释/divdiv class green_sentencep朱阁朱红的华丽楼阁。绮户 雕饰华丽的门窗。/p/div/divdiv class verseMiddlediv class green_square白话译文/divdiv class green_sentencep月儿转过朱红色的楼阁低低地挂在雕花的窗户上照着没有睡意的自己。/p/div/divdiv class verseBottomdiv class green_square诗句鉴赏/divdiv class green_sentencep这里既指自己怀念弟弟的深情又可以泛指那些中秋佳节因不能与亲人团圆以至难以入眠的一切离人。/p/div/div/div/div!-- sixth sentence --div class definition_content_combinationdiv class verse_right verse_right_reversediv class verseTop verseTopReversediv class green_square词语注释/divdiv class green_sentencep何事为什么。/p/div/divdiv class verseMiddle verseMiddleReversediv class green_square白话译文/divdiv class green_sentencep明月不该对人们有什么怨恨吧为什么偏在人们离别时才圆呢/p/div/divdiv class verseBottom verseBottomReversediv class green_square诗句鉴赏/divdiv class green_sentencep相形之下更加重了离人的愁苦了。这是埋怨明月故意与人为难。/p/div/div/divdiv class verse_leftimg src../img/sixth_sentence.jpg alt/div/div!-- seventh sentence --div class definition_content_combinationdiv class verse_leftimg src../img/seventh_sentence.jpg alt/divdiv class verse_rightdiv class verseTopdiv class green_square词语注释/divdiv class green_sentencep此事指人的“欢”“合” 和月的“晴”“圆”。/p/div/divdiv class verseMiddlediv class green_square白话译文/divdiv class green_sentencep人有悲欢离合的变迁月有阴晴圆缺的转换这种事自古来难以周全。/p/div/divdiv class verseBottomdiv class green_square诗句鉴赏/divdiv class green_sentencep强调对人事的达观同时寄托对未来的希望。/p/div/div/div/div!-- eighth sentence --div class definition_content_combinationdiv class verse_right verse_right_reversediv class verseTop verseTopReversediv class green_square词语注释/divdiv class green_sentencep但只。共一起欣赏。婵娟本意指妇女姿态美好的样子这里形容月亮。/p/div/divdiv class verseMiddle verseMiddleReversediv class green_square白话译文/divdiv class green_sentencep只希望这世上所有人的亲人能平安健康即便相隔千里也能共享这美好的月光。/p/div/divdiv class verseBottom verseBottomReversediv class green_square诗句鉴赏/divdiv class green_sentencep这两句并非一般的自慰和共勉而是表现了作者处理时间、空间以及人生这样一些重大问题所持的态度充分显示出词人精神境界的丰富博大。/p/div/div/divdiv class verse_leftimg src../img/eighth_sentence.jpg alt/div/div/div
/div3. css设计
好了上面的内容搭建完以后我们要来对其样式进行美化。让它呈现出高保真图片里面的效果。
1nav样式美化
首先我们能先来对导航栏 nav 进行一个美化。具体如下
/*导航栏*/
html,body {background: #f6f5f3;
}#main {display: flex;justify-content: center;
}.nav {width:100%;background: #80a1a2;height:60px;position: fixed;z-index: 4;top: 0;display: flex;justify-content: space-around;align-items: center;flex-wrap: nowrap;box-shadow: 0 7px 30px rgba(0,0,0,.15), 0 5px 10px rgba(0,0,0,.12);}.nav .left {color: #fff;font-size: 14px;
}.nav .left a {color: #e6f0f2;font-size: 18px;line-height:70px;
}.nav .left a:hover {color: #cfe4ec;
}.nav .right ul{display: flex;
}.nav .right ul li {margin-left: 60px;color: #e6f0f2;display: flex;align-items: center;cursor: pointer;font-family: microsoft yahei;
}.nav .right ul li:hover{color: #cfe4ec;
}.nav .right ul li p:nth-child(1){font-weight: 550;
}.nav .right ul li p:nth-child(2){font-size: 14px;font-weight: 200;
}.nav .right ul li div:nth-child(1){display: flex;flex-direction: column;justify-content: center;align-items: center;
}.nav .right ul li div:nth-child(2) i{color: #e6f0f2 !important;font-weight: bold;
}2banner样式美化
现在我们来对 banner 进行样式优化。具体代码如下
/*banner栏*/
.banner{width: 100%;margin-top: 60px;display: flex;justify-content: center;
}.banner .swiper-container .swiper-wrapper .swiper-slide img{width: 100%;max-height: 600px;
}.banner .swiper-container .swiper-wrapper .banner_db{position: absolute;bottom: 0;width: 100%;left: 0;height: 34px;background: url(../img/Irregular.png) no-repeat center bottom;background-size: 100% 100%;z-index: 3;
}同时呢在上面我们可以了解到这一块内容我们要做的是一个轮播同时我们使用的是 swiper 来进行处理。因此接下来我们来对其动作进行一个描述。具体代码如下
var swiper new Swiper(.swiper-container, {pagination: {el: .swiper-pagination,clickable: true,renderBullet: function (index, className) {return span class className (index 1) /span;},},
});3背景及赏析样式美化
好了到这里我们完成了整个网页的 50% 左右。那现在我们来下面的两部分进行美化。
首先是诗词背景样式的美化具体代码如下
/*body*/
.bright_body .background,
.bright_body .definition{/* background-color: #000000; */width: 80%;margin: 0 auto;display: flex;flex-direction: column;align-items: center;/* margin-bottom: 300px; */}.bright_body .background .background_title,
.bright_body .definition .definition_title{width: 190px;height: 55px;border-radius: 10px;background-color:#2a4b5e;display: flex;justify-content: center;align-items: center;margin: 0 0 70px 0;padding: 0 6px;font-size: 22px;font-weight: 600;
}.bright_body .background .background_title,
.bright_body .definition .definition_title{margin-top: 70px;
}.bright_body .background .background_title p:nth-child(1),
.bright_body .definition .definition_title p:nth-child(1){/* width: 32%; *//* height: 70%; */color: #c8dce5;/* background-color: #d5f5e1; */text-align: center;/* line-height:31.5px; *//* border-radius: 1px; */
}.bright_body .background .background_title p:nth-child(2),
.bright_body .definition .definition_title p:nth-child(2){/* width: 80%; */color: #c8dce5;text-align: center;
}.bright_body .background .background_content,
.bright_body .definition .definition_content{width: 80%;display: flex;flex-direction: column;justify-content: space-around;
}.bright_body .background .background_content .background_content_top{width: 100%;display: flex;flex-direction: row;justify-content: space-around;
}.bright_body .background .background_content .background_content_top img{width: 45%;
}.bright_body .background .background_content .background_content_bottom{display: flex;flex-direction: row;justify-content: space-around;
}.bright_body .background .background_content .background_content_bottom p{width: 45%;margin: 8px 40px;font-size: 18px;line-height: 30px;font-family: microsoft yahei;text-indent: 2em;
}.bright_body .definition .definition_content .definition_content_combination{margin: 30px 0;display: flex;
}.bright_body .definition .definition_content .definition_content_combination .verse_left{width: 50%;display: flex;align-items: center;
}.bright_body .definition .definition_content .definition_content_combination .verse_left img{width: 100%;border-radius: 1px;
}.bright_body .definition .definition_content .definition_content_combination .verse_right{width: 50%;display: flex;flex-direction: column;padding: 20px 10px 20px 40px;
}.bright_body .definition .definition_content .definition_content_combination .verse_right_reverse{width: 50%;display: flex;flex-direction: column;align-items: flex-end;padding: 20px 40px 20px 10px;
}.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTop,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddle,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottom{display: flex;flex-direction: column;
}.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTop .green_square,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddle .green_square,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottom .green_square{width: 100px;height: 32px;background-color: #c8dce5;border-radius: 24px;display: flex;justify-content: center;align-items: center;color: #2a4b5e;font-weight: bold;
}.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTop .green_sentence,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddle .green_sentence,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottom .green_sentence{padding: 20px 20px;
}.bright_body .definition .definition_content .definition_content_combination .verse_right .verseTopReverse,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseMiddleReverse,
.bright_body .definition .definition_content .definition_content_combination .verse_right .verseBottomReverse{display:flex;align-items: flex-end;
}三、结果展示
到这里我们就基本完成了整张网页的绘制。现在我们用一张动图来看下实现效果 中秋明月结果演示四、结束语
好了到这里关于《水调歌头》的内容呈现就已经结束啦同时也提前祝大家中秋快乐呀~
☪️彩蛋 One More Thing
素材获取
微信搜索 星期一研究室 并关注回复关键词 中秋明月 获取资料~
番外篇 关注公众号星期一研究室第一时间关注优质文章更多精选专栏待你解锁~如果这篇文章对你有用记得留个脚印jio再走哦~以上就是本文的全部内容我们下期见
