「网页设计」课程实验大作业

已于 2024-01-03 00:11:06 修改
阅读量484 收藏 8
点赞数 10
文章标签： 课程设计
于 2024-01-02 10:13:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79602950/article/details/135334428
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <title>舞蹈世界</title>
    <style type="text/css">
      .body{
        width: 100%;
        height: 100%;
        border: 1px solid black;
        background-image: url(../../img/Camera_XHS_17041242475935c6724d2-e746-3976-8767-5.jpg) ;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .opus{
        width: 1300px;
        height: 500px;
        border: 1px solid gray;

      }
      .opus1{
        width: 500px;
        height: 400px;
        float: left;
      }
      .opus2{
        width: 600px;
        height: 400px;
        float: right;
      }

      .opus1-1{
        width: 1300px;
        height: 500px;
        border: 1px solid gray;
      }
      .opus1-2{
        width: 1300px;
        height: 450px;
        border: 1px solid gray;
        
      }

      .foot{
        width: 1300px;
        height: 700px;
        border: 1px solid gray;
      }
    </style>

</head>
<body>
    <div class="body container-fluid p-4  text-white">
       <!--页眉-->
        <p style="font-size: 36px">欢迎光临舞蹈世界，<span style="font-size: 24px">我们将一起探索舞蹈的魅力</span></p>
        <hr>

        <!--导航栏-->
          <nav class="navbar navbar-expand-sm  justify-content-center navbar-dark">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a>
                  <input type="button" value="首页">
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="">作品介绍</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                 <a class="nav-link" href="#">舞蹈内涵</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="#">舞蹈力量</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="#">舞蹈故事</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="#">舞蹈种类</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="#">舞蹈风韵</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|</a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="#">舞蹈精神</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">|   </a>
             </li>
              <li class="nav-item">
                <a class="nav-link" href="#">舞蹈鉴赏</a>
              </li>
              <li class="nav-link"href="#">
                <span>
                  <input type="text">
                </span>
              </li>
            </ul>
            <div class="photo">
              <a class="navbar-brand"href="#">
                <img src="../../img/OIP-C.jpg" style="width:30px;"class="round-pill">
              </a>
            </div>
        </nav>
        <hr>
        
              <!--文字排版-->
        <div class="row">
            <div class="col-sm">
                <img src="../../img/Camera_XHS_17041202562990302a301ksjrper1hdt010paz.jpg" width="300px" height="300px">
                <p style="font-size: large; color:white;" >爵士舞（Jazz Dance），爵士舞是一种充满活力与创造性的个人即兴表演。 是一种急促又富动感的节奏型舞蹈，是属于一种外放性的舞蹈。</p>
            </div>
            <div class="col-sm">
                <img src="../../img/Camera_XHS_17041202805901000g0082ktnebl6j401g5nrq.jpg"  width="300px" height="300px">
                <p  style="font-size: large; color: white;" >斗牛舞是表达斗牛场上斗牛士挥动斗篷勇猛与猛牛搏斗的舞蹈。斗牛舞采用西班牙歌曲，鲜明的强弱节奏和雄壮有力的旋律，烘托出斗牛场上激奋的情绪。</p>
            </div>
            <div class="col-sm">
                <img src="../../img/Camera_XHS_17041202936711040g00830pdcgs8m40005oii.jpg"  width="300px" height="300px">
                <p style="font-size: large; color:white;">古典舞曾一度被一些人称作“戏曲舞蹈”。它本身就是介于戏曲与舞蹈之间的混合物，流传下来的舞蹈动作大多保存在戏曲舞蹈中</p>
            </div>
            <div class="col-sm">
                <img src="../../img/Camera_XHS_17041203507931000g0082c8heou6h801043iv.jpg"  width="300px" height="300px">
                <p style="font-size: large; color: white;">芭蕾舞是一种欧洲古典舞蹈，芭蕾舞最重要的一个特征即女演员表演时以脚尖点地，故又称脚尖舞。芭蕾舞是用音乐、舞蹈手法来表演戏剧情节。</p>
            </div>
            
        </div>
        <hr>

        <!--作品介绍-->
        <hr>
        <nav class="navbar navbar-expand-sm  justify-content-center navbar-dark">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a>
                <input type="button" value="作品介绍">
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
               <a class="nav-link" href="#">舞蹈内涵</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈力量</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈故事</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈种类</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈风韵</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈精神</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|   </a>
           </li>
           <li class="nav-item">
            <a class="nav-link" href="#">舞蹈鉴赏</a>
          </li>
            <li class="nav-link"href="#">
              <span>
                <input type="text">
              </span>
            </li>
          </ul>
          <div class="photo">
            <a class="navbar-brand"href="#">
              <img src="../../img/OIP-C.jpg" style="width:30px;"class="round-pill">
            </a>
          </div>
      </nav>
      <hr>
        <div class="container-fluid  p-4  text-white">
          <P style="font-size:36px;color: white;align-items: center;">作品介绍</P>
          <p style="font-size:24px;color: white;align-items: center;">Top10世界经典</p>
        </div>
        
        <div class="opus container-fluid">
          <div class="opus1">
            <img src="../../img/0e2442a7d933c895cd5963e8d11373f082020079.jpg" width="500px" height="400px">
          </div>
          <div class="opus2">
            <p style="font-size: 20px;color: white;">玛莎·葛兰姆（Martha Graham，1894年5月11日~1991年4月1日），又译为马莎·格雷厄姆，美国舞蹈家和编舞家，也是现代舞蹈史上最早的创始人之一。
              1910年，玛莎·葛兰姆受到露斯圣丹尼斯的表演启发了对舞蹈的兴趣，随后前往萧恩舞团正式学习舞蹈，并成立了自己的“玛莎葛兰姆”舞团。玛莎·葛兰姆被称为现代舞之母，她还独创了葛兰姆式舞蹈技法，对后来的现代舞发展影响深远。
              生前玛莎·葛兰姆被称为美国“国宝”。靠着自己独特的收缩与放松技术，玛莎·葛兰姆和她的舞蹈团风靡整个美国，甚至是欧洲的许多国家。
              玛莎·葛兰姆的作品多以美国人文或是希腊古典神话为主题，有《原始的神秘》、《给世界的信》、《阿帕拉契山脉之春》、《夜旅》等
            </p>
          </div>
        </div><br><br>

        <div  class="opus1-1 container-fluid">
          <div class="row">
            <div class="col-sm-6">
              <img src="../../img/b64543a98226cffc1e17ef7b3b4f5d90f603728dbcee-bkimg-process,v_1,rw_1,rh_1,maxl_400,pad_1.webp" width="500px" height="400px">
            </div>
            <div class="col-sm-6">
              <p style="font-size: 20px;color: white;">迈克尔·杰克逊是舞蹈界的传奇人物，他不仅是一位杰出的舞者，也是一位非凡的音乐家和歌手。他的舞蹈风格独特而多才多艺，在舞台上展现出了令人难以置信的活力和热情。
                杰克逊的舞蹈生涯始于70年代末，当时他是与兄弟组合The Jackson 5合作的主唱。随着时间的推移，他逐渐发展出了自己的舞蹈风格，并开始在世界各地的巡演中展示他的才华。
                杰克逊的舞蹈风格融合了许多不同的元素，包括爵士舞、踢踏舞、流行舞和街舞。他的舞蹈动作精细而精确，令人难以置信的敏捷和灵活。他的舞蹈技巧和表演才华被誉为是舞蹈史上最伟大的之一。</p>
            </div>
          </div>
        </div><br><br>
        
        <div class="opus1-2 container-fluid" >
          <div class="row">
            <div class="col-sm-6">
              <img src="../../img/8601a18b87d6277fbe7ff1ea28381f30e824fcf7.jpg" width="500px" height="400px">
            </div>
            <div class="col-sm-6">
              <p style="font-size: 20px;color: white;">约瑟芬·贝克（Josephine Baker，1906—1975），生于美国圣路易斯，是美国黑人舞蹈家、歌唱家。以其性感大胆的舞蹈和柔美歌声曾红遍法国，也是世界上第一个“黑人超级女明星”。
                大作家海明威也被她的惊人美貌倾倒，称赞她“是全世界最漂亮的女人”。她被昵称为“黑人维纳斯”或“黑珍珠”，在英语国家并有美名“克里奥尔女神”。
                在法国，她的法文名字为“La Baker”。</p>
            </div>
          </div>
        </div><br><br>


        <!--详情页面-->
        <hr>
        <nav class="navbar navbar-expand-sm  justify-content-center navbar-dark">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a>
                <input type="button" value="作品介绍">
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
               <a class="nav-link" href="#">舞蹈内涵</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈力量</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈故事</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈种类</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈风韵</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|</a>
           </li>
            <li class="nav-item">
              <a class="nav-link" href="#">舞蹈精神</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">|   </a>
           </li>
           <li class="nav-item">
            <a class="nav-link" href="#">舞蹈鉴赏</a>
          </li>
            <li class="nav-link"href="#">
              <span>
                <input type="text">
              </span>
            </li>
          </ul>
          <div class="photo">
            <a class="navbar-brand"href="#">
              <img src="../../img/OIP-C.jpg" style="width:30px;"class="round-pill">
            </a>
          </div>
      </nav>
      <hr>
        <div class="container-fluid  p-4  text-white">
          <P style="font-size:36px;color: white;align-items: center;">舞蹈鉴赏</P>
          <p style="font-size:24px;color: white;align-items: center;">Top10让身心放松</p>
        </div>
      <div class="foot container-fluid">
        <div class="row">
          <div class="col-sm-3">
            <img src="../../img/Camera_XHS_17041661243751000g0082477q2k6fc0004a6k.jpg"width="300px" height="700px">
          </div>
          <div class="col-sm-5">
            <p style="font-size: 36px;">舞蹈</p>
            <hr>
            <br><br>
            <p style="font-size: 20px;">2024-01-02</p>
            <hr>
            <br><br>
            <p style="font-size: 20px;">舞蹈在乐韵中绽放</p>
            <hr>
          </div>
          <div class="col-sm-3">
            <h4>
              1. 热爱从不降温<br>
              2. 踮起脚尖是心跳是呼吸<br>
              3. 跳舞真的可以让人自信<br>
              4. 低头是舞蹈鞋抬头是光<br>
              5. 我抬起脚尖抬眼是整个世界<br>
              6. 永远热爱舞蹈也永远享受生活<br>
              7. 所有指尖的延伸都是你的方向<br>
              8. 世间一切美好都值得我踮起脚尖<br>
              9. 每一双舞鞋都是一段较长的记忆<br>
              10. 要站在自己热爱的世界里闪闪发光<br>
            </h4>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

 

 

 

 

 

原型图

 

 

说明文档 

DZY--小小的世界
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web网页设计作业 - java期末课程设计图书管理系统
01-11
课程实验论文 题目：图书管理系统 课 程 名 称 Web应用开发 1. 大作业技术说明 mysql数据库，mven,css, 2. 小组分工说明 无 3. 功能展示 首页： 首页是图书馆的登录页面。 二级页面： (图为‘借阅管理’...
web前端课程实验+期末大作业(vue)
08-02
实验代码 解压缩后 用ide将整个文件打开 用浏览器打开即可运行
网页设计——课程实验大作业
m0_74924408的博客
01-02 371
电影网页。
网页设计html期末大作业
weixin_43474701的博客
02-17 6279
底部有两个导航按钮，中间有音频可以播放，每个页面都可以返回首页。网页左侧有一排按钮，点击可以显示不同的内容。
大数据大作业（课程设计）
onlywishes的博客
06-20 9798
本课题为信息爬取字数及可视化，首先使用Python编程爬取了凤凰网门户网站新闻栏目22/7/26—7/28三天内的新闻信息，其次，将爬取的新闻整合为一个文件，然后使用Python编程对文件进行分词处理并且可以获取词云，接下来将该文件上传至hadoop平台，利用MapReduce框架编程完成了字数统计，接着就是利用Python编程对字数统计文件中的词频由高到低进行排序，得到出现频次排名前5、前10、前20、前50的词语，最后根据排好序的词语利用Echarts平台分别完成4种可视化效果网页。
Web前端期末大作业---新农村建设网页设计
热门推荐
前端小白在前进的博客
12-30 1万+
该网页设计主要是从宣传新农村建设出发，涉及到新农村建设的旅游观光、示范乡镇、生态环保、现代农业、人文精神，总共设计了六个页面，主要使用的布局方式是flex布局，运用到了form表单、table表格等最基础的html内容。 该网页设计非常适合大学的期末作业，适合html+css+js初学者，希望可以帮助到大家。
网页编程课程大作业实验报告HTML5 、CSS5 、JavaScript
weixin_47659667的博客
04-12 9311
EditPlus做的简陋网页
2023年网页设计期末大作业-计算机实验室预约管理网站（含设计报告、附源码下载链接）
weixin_43474701的博客
03-01 368
这是一个网页设计期末课设，主要由html和css制作。比较简单时候初学者学习使用，做的是一个计算机实验室预约管理网站，色彩搭配合理，样式美观，功能齐全，具体如下： 登录页面: 这是首页界面： 主要信息有学生信息、实验室预约、联系管理员、取消预约、查看可借阅教室、释放教室，实验室公告、超时记录等等,右上角可以退出登录 每个按钮鼠标放上去均有放大效果这是实验室预约功能，可以选择教室和预约时间和日期，非常方便！ 这里是联系管理员，里面有值班老师的联系方式 这里是可借阅教室： 这里是通知页面 主页代码如下：
HTML期末作业课程设计期末大作业——电影网页制作
HTML网页设计
07-27 855
网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
web前端网页设计期末课程大作业：旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript
网页设计与制作
05-24 696
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
web网页设计期末课程大作业 我的美丽家乡盐城 HTML+CSS+JavaScript
网页设计与制作
12-18 292
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
家居网-网页课程设计（JS + CSS + HTMl ）+ 设计报告
07-09
网页 设计的是 家具网类型 有五个页面分别实现的功能是 1.首页 （下拉框+轮播图+获取图片更新） 2. 产品展示（图片放大+倒计时）、 3. 关于我们（定时跳转+图片定时变换） 4. 联系我们（复选框+文本域） 5. 登录/...
基于python的网络爬虫爬取天气数据及可视化分析python大作业，课程设计报告
06-13
基于python的网络爬虫爬取天气数据及可视化分析 python程序设计报告 源代码+csv文件+设计报告...python期末简单大作业（自己写的，重复率低） 利用python爬取了网站上的城市天气，并用利用可视化展示，有参考文献有目录
基于web的唐诗宋词网页设计
03-11
压缩包资源：源码、实验报告
JavaEE大作业之班级通讯录系统(前端HTML+后端JavaEE实现)PS:也可选网络留言板、图书借阅系统、寝室管理系统
程序员象漂亮的博客
06-11 837
题目一：班级通讯录【我们选这个】 实现一个B/S结构的电子通讯录，其中的每条记录至少包含学号、姓名、性别、班级、手机号、QQ号、微信号，需要实现如下功能： （1）默认情况下在网页上显示所有记录。 （2）能够在文本框输入完整姓名精确匹配到记录，或者输入部分姓名进行模糊查询（SQL语句里用到like关键词，加分项）。 （3）能够按照班级对查询结果进行过滤（可以把数据库中所有出现的班级放到一个下拉列表中）。
战略规划之五看三定方法论.pptx
06-14
战略规划之五看三定方法论.pptx
cutcamera1718339848103.png
06-14
cutcamera1718339848103.png
小游戏的java程序开发
最新发布
06-14
小游戏的java程序开发
web网页设计期末课程大作业
12-04
以下是关于web网页设计期末课程大作业的介绍： 这个大作业是一个学生个人主页网页设计题材，使用HTML+CSS进行布局制作。它是一个静态网站，主要使用HTML DIV+CSS JS等来完成页面的排版设计。常用的网页设计软件有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值