1、引言
设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题。你想要解决的问题,在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
非物质文化遗产网页系统采用HTML,CSS技术来实现,符合所学知识体系,适用于常见的作业以及课程设计,需要获取更多的作品,请关注微信公众号:coding加油站,获取,如需更多资料,可在微信后台留言。欢迎大家来提问,交流学习。
2.1、作品简介方面
非物质文化遗产网页系统采用常规方式来实现,符合绝大部分的要求。代码配置有相关文档讲解,如需从代码中学到知识点,那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单,基本使用课堂中所学知识点来完成,只需要修改相关的介绍文字,一些图片,就可以改为自己独一无二的代码,网页作品下载后可使用任意编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)。
2.3、作品技术介绍
html网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面,部分采用了javascript来做校验。 使用html5,以及css3等相关技术完成技术的布局,在本作品中,会使用常见的布局,常见的浮动布局,flex布局都会有使用到哦。同时在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识,同时使用了一些js的相关知识。例如使用到了dom,和bom来获取浏览器的相关api,同时使用css对样式进行相关的美化,使得界面更加符合网页设计
3、作品演示
【coding加油站】HTML设计--非物质文化遗产网页设计
3.1、首页
相关代码:
<div class="main">
<div class="news center">
<div class="title clear">
<h2><span>新闻</span>动态<br><em>THE LATEST DEVELOPMENTS</em></h2>
<a href="">更多>></a>
</div>
<div class="news-lunbo clear">
<div class="box">
<ul>
<li class="curr"><img src="img/index/news1.png" alt=""></li>
<li><img src="img/index/news1.png" alt=""></li>
<li><img src="img/index/news1.png" alt=""></li>
<li><img src="img/index/news1.png" alt=""></li>
<li><img src="img/index/news1.png" alt=""></li>
<li><img src="img/index/news1.png" alt=""></li>
</ul>
<div class="pageN c">
<span>国家艺术基金华北片区</span>
<p class="clear">
<a class="cur">1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</p>
</div>
<div class="leftBtn"></div>
<div class="rightBtn"></div>
</div>
<!--news详情-->
<div class="newsDetail">
<div class="newsDetail-top">
<h2>国家艺术基金华北片区资助项目集中巡查监督工作顺利完成 </h2>
<p>国家艺术基金管理中心副主任王勇带领监督部、财务部工作人员,在山西省文化厅的配合下 赴太原对山西省河北省天津市内蒙古自....</p>
</div>
<ul>
<li><a href="">珍惜立项重实施</a></li>
<li><a href="">山西省文化厅所属部分事业单位2017年 </a></li>
<li><a href="">报名及笔试由山西省人事考试中</a></li>
<li><a href="">资格复审由各招聘单位负责,省文化厅指导监督</a></li>
<li><a href="">参加资格复审人员应提供笔试准考证、本人供笔试身份证</a></li>
<li><a href="">报名及笔试由山西省人事考试中</a></li>
</ul>
</div>
</div>
</div>
<!--文化传人-->
<div class="cultureC center">
<div class="title clear">
<h2><span>文化</span>传人<br><em>Intangible cultural heritage</em></h2>
<a href="">更多>></a>
</div>
<ul class="clear">
<li>
<div class="p-img">
<a href=""><img src="img/index/cultureC1.png" alt=""></a>
</div>
<h2>江碧峰</h2>
<p>木偶雕刻非遗传承人</p>
</li>
<li>
<div class="p-img">
<a href=""><img src="img/index/cultureC2.png" alt=""></a>
</div>
<h2>王峰</h2>
<p>彩色陶器非遗传承人</p>
</li>
<li>
<div class="p-img">
<a href=""><img src="img/index/cultureC3.png" alt=""></a>
</div>
<h2>张艺海</h2>
<p>木偶雕刻非遗传承人</p>
</li>
</ul>
</div>
<!--晋善晋美-->
<div class="cultureJ">
<div class="box">
<h2>晋善<span>晋美</span></h2>
<p>为您的文化项目提供服务于支持</p>
<a href="">查看详细 >></a>
</div>
<div class="lineL"></div>
<div class="lineR"></div>
</div>
<!--文化遗产-->
<div class="cultureY center">
<div class="title clear">
<h2><span>文化</span>遗产<br><em>Cultural heritage</em></h2>
<a href="">更多>></a>
</div>
<ul>
<li>
<div class="img1 img">
<img src="img/index/cultureY1.png" alt="">
<div class="shade">
<h2>山西民居砖雕艺术</h2>
<p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
<a href="">详细>></a>
</div>
</div>
</li>
<li>
<div class="img2 img">
<img src="img/index/cultureY2.png" alt="">
<div class="shade">
<h2>山西民居砖雕艺术</h2>
<p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
<a href="">详细>></a>
</div>
</div>
<div class="img2 img">
<img src="img/index/cultureY3.png" alt="">
<div class="shade">
<h2>山西民居砖雕艺术</h2>
<p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
<a href="">详细>></a>
</div>
</div>
</li>
<li>
<div class="img1 img">
<img src="img/index/cultureY4.png" alt="">
<div class="shade">
<h2>山西民居砖雕艺术</h2>
<p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
<a href="">详细>></a>
</div>
</div>
</li>
</ul>
</div>
<!--在线展示-->
<div class="show center">
<div class="title clear">
<h2><span>在线</span>展示<br><em>Online display</em></h2>
<a href="">更多>></a>
</div>
</div>
<div class="showCulture">
<div class="shade">
<div class="center clear">
<div class="video">
<img src="img/index/show1.png" alt="">
</div>
<div class="introduce">
<h3>文化山西</h3>
<p>没有大地相隔离的器物,也没有与人类相分离的器具,这就是在这个世界上为我们服务的生活 用品。若是因故离开了用途,器物便会失去生命。也就没有存在的意义。除非得以“发展”更加适合当今的现代人......</p>
<a href="">详细>></a>
</div>
</div>
</div>
</div>
<!--文化商城-->
<div class="cultureS center">
<div class="title clear">
<h2><span>在线</span>展示<br><em>Online display</em></h2>
<a href="">更多>></a>
</div>
<ul>
<li>
<div class="p-img">
<img src="img/index/cultureS1.png" alt="">
</div>
<p>木雕技艺</p>
</li>
<li>
<div class="p-img">
<img src="img/index/cultureS2.png" alt="">
</div>
<p>面食技艺</p>
</li>
<li>
<div class="p-img">
<img src="img/index/cultureS3.png" alt="">
</div>
<p>手绘技艺</p>
</li>
</ul>
</div>
</div>
3.2、文化遗产界面
相关代码:
<div class="main center clear">
<div class="mainL">
<h2>文化<i>精英</i>
<span>Cultural elite</span>
</h2>
<div class="tab">
<a href="">文化研究专家</a>
<a href="" class="cur">文化传承人</a>
<a href="">文化创意人</a>
</div>
</div>
<div class="mainR">
<div class="content">
<div class="title clear">
<h2>文化精英<span>Intangible Cultural Heritage</span></h2>
<p>当前位置:
<a href="index.html">网站首页</a>>
<a href="list_cultureJ.html">文化精英</a>>
<a href="">文化传承人</a>
</p>
</div>
<div class="immateriality">
<ul class="clear">
<li>
<div class="p-img">
<img src="img/cultureY/cultureY1.png" alt="">
</div>
<p>山西民居砖雕艺术</p>
</li>
<li>
<div class="p-img">
<img src="img/cultureY/cultureY2.png" alt="">
</div>
<p>山西彩陶艺术</p>
</li>
<li>
<div class="p-img">
<img src="img/cultureY/cultureY3.png" alt="">
</div>
<p>山西民居砖雕艺术</p>
</li>
<li>
<div class="p-img">
<img src="img/cultureY/cultureY4.png" alt="">
</div>
<p>山西彩陶艺术</p>
</li>
<li>
<div class="p-img">
<img src="img/cultureY/cultureY5.png" alt="">
</div>
<p>山西民居砖雕艺术</p>
</li>
<li>
<div class="p-img">
<img src="img/cultureY/cultureY6.png" alt="">
</div>
<p>山西彩陶艺术</p>
</li>
</ul>
</div>
<div class="btn">
<button>上一页</button>
<a>1</a>
<a class="cur">2</a>
<a>3</a>
<button>下一页</button>
</div>
</div>
</div>
</div>
总结
以上就是本次项目的全部内容,需要交流或者获取代码请关注微信公众号:coding加油站,获取
更多推荐
【HTML】HTML网页设计----非遗网页设计
发布评论