1200字范文 > web前端期末大作业《中华传统文化题材网页之丝绸之路》 html+css+javascript网页设计实例

web前端期末大作业《中华传统文化题材网页之丝绸之路》 html+css+javascript网页设计实例

时间：2020-11-13 11:36:32

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码：【🗂️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于、两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货

一、👨‍🎓网站题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站、等网站的设计与制作。

二、✍️网站描述

🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到三级页面，有5-10个页面组成。页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。菜单美观、醒目，二级菜单可正常弹出与跳转。要有JS特效，如定时切换和手动切换图片轮播。页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。页面清爽、美观、大方，不雷同。。不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、🌐网站演示

五、⚙️ 网站代码

🧱HTML结构代码

<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>丝绸之路</title><link href="css/css.css" rel="stylesheet" media="screen" type="text/css" /><script src="js/jquery.min.js"></script><script src="js/jquery.flexslider-min.js"></script><script type="text/javascript">$(window).load(function() {$('.flexslider').flexslider();});</script><link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" /></head><body><div class="con"><div class="head"><div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div><div class="nav"><ul><li><a href="index.html">首页 </a></li><li><a href="html/gallery.html">丝绸展览 </a></li><li><a href="html/youzhi.html">优质丝绸 </a></li><li><a href="html/gezhong.html">各种丝绸 </a></li><li><a href="html/yangchan.html">养蚕艺术 </a></li><li><a href="html/liuyan.html">留言建议 </a></li></ul></div><div class="clear"></div><div class="clear"></div></div><div class="clear"></div><div class="main"><div class="left"><div class=" l1"><a href="#"><img src="images/sg.jpg" /></a></div><div class="search"><input class="s_input" /></div><div class="left_nav"><ul><li><a href="html/gezhong.html">各种丝绸 </a><span><a href="html/gezhong.html">23 </a></span></li><li><a href="html/gallery.html">丝绸展览 </a><span><a href="#">10 </a></span></li><li><a href="html/liuyan.html">留言建议 </a><span><a href="#">0 </a></span></li></ul></div></div><div class="right"><div class="dm"><div class="flexslider"><ul class="slides"><li><a href="#" > <img src="images/d1.jpg" width="900" /></a> </li><li> <a href="#" ><img src="images/d2.jpg" width="900" /></a> </li><li> <a href="#" ><img src="images/d3.jpg" width="900" /></a></li><li> <a href="#" ><img src="images/d4.jpg" width="900" /></a></li></ul></div></div><div class="right_nav"><h2>推荐阅读</h2><p>丝绸是中国古老文化的象征，中国古老的丝绸业为中华民族文化织绣了光辉的篇章，对促进世界人类文明的发展作出了不可磨灭的贡献。中国丝绸以其卓越的品质、精美的花色和丰富的文化内涵闻名于世。</p><p>几千年前，当丝绸沿着古丝绸之路传向欧洲，它所带去的，不仅仅是一件件华美的服饰、饰品，更是东方古老灿烂的文明，丝绸从那时起，几乎就成为了东方文明的传播者和象征。目前已知的最早丝织物，是出土于距今约4700年良诸文化的遗址。</p><p>中国是家蚕丝的发源地，养蚕，缫丝是中国古代在纤维利用上最重要的成就。早在新石器时代，中国已发明丝绸织造以及朱砂染色技术，此后随着织机的不断改进，印染技术的不断提高，丝织品种日益丰富，并形成了一个完整的染织工艺体系，使中国古代的丝绸染织技术领先于世界各国。</p><p></p><p></p></div> <div class="Gallery_nav pt20"><ul><h3>丝绸展览</h3><li><a href="#"><img src="images/zhanlan/1.jpg" /></a></li><li><a href="#"><img src="images/zhanlan/2.jpg" /></a></li><li><a href="#"><img src="images/zhanlan/3.jpg" /></a></li><li><a href="#"><img src="images/zhanlan/4.jpg" /></a></li></ul></div></div><div class="clear"></div></div><div class="clear"></div><div class="foot"><p>Copyright 版权所有 </p><p>All Rights Reserved</p></div></div></body></html>

💒CSS样式代码

/* Browser Resets */.flex-container a:active,.flexslider a:active {outline: none;}.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles*********************************/ .flexslider {width: 100%; margin: 0; padding: 0;}.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */.flexslider .slides img {}.flex-pauseplay span {text-transform: capitalize;}/* Clearfix for the .slides element */.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;}/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you* include js that eliminates this class on page load */.no-js .slides > li:first-child {display: block;}/* FlexSlider Default Theme*********************************/.flexslider {position: relative; margin-top:10px; padding-top:10px; margin-left:10px; zoom: 1;}.flexslider .slides {zoom: 1;}.flexslider .slides > li {position: relative;}/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */.flex-container {zoom: 1; position: relative;}/* Caption style *//* IE rgba() hack */.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}/* Direction Nav */.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top:150px; cursor: pointer; text-indent: -9999px;}.flex-direction-nav li a.next {background-position: -52px 0; right: -51px;}.flex-direction-nav li a.prev {background-position: 0 0; left: -60px;}.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}/* Control Nav */.flex-control-nav {width: 100%; position: absolute; bottom: -30px; *bottom: -0px;*bottom: -0px\9; text-align: center;}.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}.flex-control-nav li:first-child {margin: 0;}.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}.flex-control-nav li a:hover {background-position: 0 -13px;}.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}