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

最新推荐文章于 2024-07-28 20:27:10 发布

旧城空忆

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量100

点赞数

分类专栏：网页设计文章标签： javascript 前端 css html5 html 课程设计

本文链接：https://blog.csdn.net/qq_3200628753/article/details/126218207

版权

网页设计专栏收录该内容

644 篇文章 8 订阅

订阅专栏

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

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

一、👨‍🎓网站题目

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

二、✍️网站描述

🏷️ 这个首页代码运用了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="http://www.w3.org/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>
      <!------------------ end nav--------------------------->
      <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>
        <!------------------ end left_nav--------------------------->
        
      </div>
      <!------------------ end left--------------------------->
      <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>
        <!------------------ end right_nav---------------------------> 
              <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>
      <!------------------ end Gallery_nav--------------------------->
      </div>
      <!------------------ end right--------------------------->
      <div class="clear"></div>
    </div>
    <!------------------ end main--------------------------->
    <div class="clear"></div>
    <div class="foot">
      <p>Copyright 2014 版权所有 </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;}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

旧城空忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端期末大作业《中华传统文化题材网页之丝绸之路》 html+css+javascript网页设计实例

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开
复制链接

扫一扫