大学生HTML期末大作业——HTML+CSS+JavaScript传统文化（服装）

无·糖

于 2024-11-08 11:46:23 发布

阅读量1.8k

点赞数 49

分类专栏： Web前端期末大作业文章标签： html 课程设计 css javascript 大学生前端大作业

本文链接：https://blog.csdn.net/qq_58648235/article/details/135222905

版权

Web前端期末大作业专栏收录该内容

68 篇文章 18 订阅

订阅专栏

本文详细介绍了如何利用HTML5、CSS3和JS进行传统文化主题的网页设计，包括网站布局、功能实现、多媒体元素运用，以及学习方法和资源分享，旨在帮助学生和新手提升网页制作技能。

摘要由CSDN通过智能技术生成

HTML+CSS+JS【传统文化】网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计

💥 文章目录
一、🏁 网站题目
二、🚩 网站描述
三、🎌 网站介绍
四、🏴 网站效果
五、🏳️ 网站代码
六、🏳️‍🌈 如何学习进步
七、🏴‍☠️ 更多干货

💥 文章目录

一、🏁 网站题目

💪💪💪 传统文化（服装） 14页

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有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实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

在这里插入图片描述

五、🏳️ 网站代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<LINK rel=stylesheet type=text/css href="css/style.css">

</head>
<body><embed src='media/m01.mp3' loop=false aotostart=true mastersound hidden=true width=0 height=0></embed> 

<div class="head">
  <div class="title"><img src="images/logo.png" style="height:30px;">服饰</div>
  <center><div class="title_x"><i></i>中国服饰文化<i1></i1></div></center>
</div>

<div class="nav">
   <ul>
     <a href="index.html"><li class="on">网站首页</li></a>
     <a href="sub1.html"><li>主要影响</li></a>
     <a href="sub3.html"><li>历史沿革</li></a>
     <a href="sub2.html"><li>服装展示</li></a>
	 <a href="sub5.html"><li>服装分类</li></a>
     <a href="sub4.html"><li>给我留言</li></a>
   </ul>
</div>

<div class="banenr"><img src="images/banner.png" width="1200" height="531"></div>

<div class="bj">

<div class="cha">
   <div class="bt_wz">服装简介</div>
   <div class="cha_nr">服饰是人类特有的劳动成果，它既是物质文明的结晶，又具精神文明的含意。人类社会经过蒙昧、野蛮到文明时代，缓缓地行进了几十万年。我们的祖先在与猿猴相揖别以后，批着兽皮与树叶，在风雨中徘徊了难以计数的岁月，终于艰难地跨进了文明时代的门槛，懂得了遮身暖体，创造出一个物质文明。
<br><br>然而，追求美是人的天性，衣冠于人，如金装在佛，其作用不仅在遮身暖体，更具有美化的功能。几乎是从服饰起源的那天起，人们就已将其生活习俗、审美情趣、色彩爱好，以及种种文化心态、宗教观念，都沉淀于服饰之中，构筑成了服饰文化精神文明内涵。</div>
   <div class="cha_tp">
      <ul>
        <li><img src="images/img001.jpg"></li>
        <li><img src="images/img002.jpg"></li>
        <li><img src="images/img003.jpg"></li>
        <li><img src="images/img004.jpg"></li>

      </ul>
   </div>
 
   <div class="bt_wz">服装展示</div>
   <div id=demo style="overflow:hidden;width:1180px;color:#ffffff; margin-left:10px; ">
        <table border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
          <tr>
            <td valign=top id=demo1>
                <table width="1180"  padding-left:10px; cellspacing="5" cellpadding="0">
                        <tr>
                            <td><a href="sub2.html" >
                            	<img src="images/img005.jpg" width="300" height="235" style="padding-left:10px;"></a>
                            </td>
                            <td><a href="sub2.html" >
                            	<img src="images/img006.jpg" width="300" height="235" style="padding-left:10px;"></a>
                            </td>
                            <td ><a href="sub2.html" >
                            	<img src="images/img007.jpg" width="300" height="235" style="padding-left:10px;"></a>
                            </td>
                            <td><a href="sub2.html" >
                            	<img src="images/img008.jpg" width="300" height="235" style="padding-left:10px;"></a>
                            </td>
                            <td ><a href="sub2.html" >
                            	<img src="images/img009.jpg" width="300" height="235" style="padding-left:10px;"></a>
                            </td>
                        </tr>
              </table>
            </td>
            <td id=demo2 valign=top></td>
          </tr>
        </table>
  </div>
  <script>
        var speed=30
        demo2.innerHTML=demo1.innerHTML
        function Marquee(){
        if(demo2.offsetWidth-demo.scrollLeft<=0)
            demo.scrollLeft-=demo1.offsetWidth
        else{
            demo.scrollLeft++
            }
        }
        var MyMar=setInterval(Marquee,speed)
        demo.onmouseover=function() {clearInterval(MyMar)}
        demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>
   
</div>
   

</div>

<div class="footer">copyright© 2018-2019 xxxxxxxxx版权所有
</div>
<div class="footer"> XXX
	学号：xxxxxx 
	电话：xxxxxx </div>
</body> 
</html>