【web课程设计网页规划与设计】HTML+CSS+JS 我的学校期末网页制作

web网站建设

于 2022-10-14 11:57:20 发布

阅读量80

点赞数

分类专栏：网页设计与制作文章标签： html网页模版学生网页作业网页设计与制作 web期末大作业网站建设

本文链接：https://blog.csdn.net/qq_38512571/article/details/127317870

版权

网页设计与制作专栏收录该内容

1187 篇文章 97 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

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

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

三、🔗网站效果

▶️1.视频演示

X09XY 校园社团 6页

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>首页</title>
  <link rel="icon" href="images/logo.png" />
  <link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/style.css" />
  <script src="js/jquery-3.6.0.js"></script>
  <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>
  <script src="js/main.js"></script>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand hidden-xs hidden-sm" href="index.html">
          <img alt="Brand" class="logo_img" src="images/logo1.png" />
        </a>
        <a class="navbar-brand visible-xs" href="index.html">
          <img alt="Brand" class="logo_img" src="images/logo.png" />
        </a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <!-- 右边 -->
        <ul class="nav navbar-nav navbar-right">
          <li class="active">
            <a href="index.html">首页 <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="scenery.html">校园风景</a></li>
          <li><a href="thought.html">思想政治</a></li>
          <li><a href="learning.html">学术科技</a></li>
          <li><a href="culture.html">文化体育</a></li>
          <li><a href="#" id="op">意见提交</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 轮播 -->
  <div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/1.jpg" alt="..." />
      </div>
      <div class="item">
        <img src="images/2.jpg" alt="..." />
      </div>
      <div class="item">
        <img src="images/3.jpg" alt="..." />
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- 文字 -->
  <div class="container index_text">
    <h2 class="text-center">学校社团简介篇 | 新生攻略</h2>
    <p class="hidden-xs">亲爱的大一萌新们，欢迎你们加入中德大家庭，开启人生新篇章！作为中德新成员，你想更多的了解学校吗？小德将继续向你全方位介绍中德，让你快速认识中德，读懂中德！</p>
    <p class="hidden-xs">今天，为大家推出学校社团简介。</p>
  </div>
  <!-- 介绍 -->
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-xs-12 index">
        <div class="thumbnail">
          <a href="thought.html">
            <div class="img_0">
              <figcaption>
                <div>
                  <h2>思想政治</h2>
                  <p>为提升我校学生爱国主义思想，为政治教育培养开辟新道路</p>
                </div>
                <div></div>
              </figcaption>
            </div>
          </a>
          <div class="caption">
            <h3>思想政治类</h3>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-xs-12 index">
        <div class="thumbnail">
          <a href="learning.html">
            <div class="img_1">
              <figcaption>
                <div>
                  <h2>学术科技</h2>
                  <p>我校建立 信息科技协会、3D打印社、恋天航模社、启航机电社</p>
                </div>
                <div></div>
              </figcaption>
            </div>
          </a>
          <div class="caption">
            <h3>学术科技类</h3>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-xs-12 index">
        <div class="thumbnail">
          <a href="learning.html">
            <div class="img_2">
              <figcaption>
                <div>
                  <h2>文化体育类</h2>
                  <p>为充实校园文化生活，我校建立了涵盖了文化、艺术、体育等多个领</p>
                </div>
                <div></div>
              </figcaption>
            </div>
          </a>
          <div class="caption">
            <h3>文化体育类</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <div class="container-fluid footer">
    <p class="text-center">版权所有©2022 xxxxxxxx@qq.com</p>
  </div>
  <!-- 返回顶部 -->
  <a class="fh" href="#top">
    <span class="glyphicon glyphicon-eject"></span>
  </a>


  <!-- 意见提交 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">意见提交</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">您的联系方式:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">您的意见:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">提交</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

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

web网站建设

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web课程设计网页规划与设计】HTML+CSS+JS 我的学校期末网页制作

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫