css+html复习小模块

最新推荐文章于 2024-09-17 09:12:39 发布

ZXR__

最新推荐文章于 2024-09-17 09:12:39 发布

阅读量72

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/ZXR__/article/details/120637200

版权

本文档展示了如何使用HTML、CSS和JavaScript来构建网页布局，并通过JavaScript实现页面切换功能。头部和底部通过iframe进行引入，同时包含了一个固定定位的功能栏，提供了返回顶部和其他咨询方式的交互。

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

项目模块利用css+html+js实现

主要利用html和css实现页面的渲染布局，利用js实现一些简单的交互

下面是效果图

页面html代码如下

主要功能是利用js实现六个页面切换

利用iframe标签实现页头和页尾的引入

<!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, height=device-height, initial-scale=1.0, user-scalable=yes" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>
<style></style>

<body>
  <!-- 头部引入 -->
  <div class="header">
    <iframe src="./header.html" frameborder="0" width="100%" height="261px"></iframe>
  </div>
  <!-- content写自己的模块代码 -->
  <div class="content">
    <iframe src="./about.html" frameborder="0" width="100%" height="2900px"></iframe>
  </div>
  <!-- 底部引入 -->
  <div class="footer">
    <iframe src="./footer.html" frameborder="0" width="100%" height="508px"></iframe>
  </div>
  <!-- 固定定位功能栏 -->
  <div class="fixed_menu">
    <a class="back_top" href="#" style="display: none">
      <img src="./images/ChinesePicture/come_top.png" alt="" />
      <p>回到顶部</p>
    </a>
    <a href="#">
      <img src="./images/ChinesePicture/kuhu1.png" alt="" />
      <p>在线咨询</p>
    </a>
    <a href="#">
      <img src="./images/ChinesePicture/kuhu2.png" alt="" />
      <p>QQ咨询</p>
    </a>
    <a href="#">
      <img src="./images/ChinesePicture/kuhu3.png" alt="" />
      <p>电话咨询</p>
    </a>
    <a href="#">
      <img src="./images/ChinesePicture/kuhu4.png" alt="" />
      <p>官方微信</p>
    </a>
  </div>
</body>
<!-- 固定定位功能栏 -->
<script src="./js/fixedmenu.js"></script>

</html>

继续努力，每天进步一点点！！！