HTML+CSS+JS 网页设计实例静态响应式前端网页模板(一键复制)③

耀南.

已于 2024-05-24 16:43:58 修改

阅读量1k

点赞数 26

分类专栏：静态网页响应式设计前端模板前端大学生期末作业静态网页/小程序/毕设项目精品文章标签：前端 html css javascript

于 2024-05-24 10:40:37 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/139168337

版权

前端大学生期末作业静态网页/小程序/毕设项目精品同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

静态网页响应式设计前端模板

7 篇文章 0 订阅

订阅专栏

简介：前端领域创作者。扫码或搜索添加文末微信「耀南」：🍗 回复 ”网站模板“，免费送网站模板！

欢迎点赞 👍 收藏 ⭐留言 📝 私信📄

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

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

❤ 【小程序模板/PC登录页模板/GPT开源/ 分布式架构系统】

❤ 【web前端静态网页设计/小程序前端成品项目——🔥🔥移动成品项目精品实战案例】

一、网页效果🌌

二、内容简介🧩

通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。

接下来我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。

三、网站介绍📚

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

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、前端介绍🔗：

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。

五、目录结构📂

六、代码💒

<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>Foanimal</title>

  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

  <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Righteous&display=swap" rel="stylesheet"> -->
  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="css/responsive.css" rel="stylesheet" />
</head>

<body>
  <div class="hero_area ">
    <!-- header section strats -->
    <header class="header_section">
      <div class="container-fluid">
        <nav class="navbar navbar-expand-lg custom_nav-container">
          <a class="navbar-brand" href="index.html">
            <img src="images/logo.png" alt="" />
          </a>
          <div class="" id="">
            <div class="User_option">
              <form class="form-inline my-2  mb-3 mb-lg-0">
                <input type="search" placeholder="Search" />
                <button class="btn   my-sm-0 nav_search-btn" type="submit"></button>
              </form>
            </div>

            <div class="custom_menu-btn">
              <button onclick="openNav()">
                <span class="s-1"> </span>
                <span class="s-2"> </span>
                <span class="s-3"> </span>
              </button>
            </div>
            <div id="myNav" class="overlay">
              <div class="overlay-content">
                <a href="index.html">Home</a>
                <a href="about.html">About</a>
                <a href="donate.html">Donate</a>
                <a href="contact.html">Contact</a>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
    <!-- end header section -->

    <!-- slider section -->
    <section class="slider_section">
      <button class="plus_btn">
        <img src="images/plus.png" alt="" />
      </button>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 col-lg-7">
            <div class="img-box">
              <img src="images/slider-img.png" alt="" />
            </div>
          </div>
          <div class="col-md-6 col-lg-5">
            <div class="detail-box">
              <h1>
                Save Forest <br />
                <span>
                  Save Life
                </span>
              </h1>
              <div class="btn-box">
                <a href="" class="btn-1">
                  Donate Now
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- end slider section -->
  </div>

  <!-- animal section -->

  <section class="animal_section layout_padding">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="detail-box">
            <div class="heading_container">
              <h2>
                Save Animals
              </h2>
            </div>
            <p>
              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like
            </p>
            <div class="btn-box">
              <a href="" class="btn-1">
                Donate Now
              </a>
              <a href="" class="btn-2">
                Read More
              </a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="img-box">
            <img src="images/animal-img.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end animal section -->




  <!-- forest section -->

  <section class="forest_section layout_padding-bottom">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="img-box">
            <img src="images/forest-img.png" alt="" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="detail-box">
            <div class="heading_container">
              <h2>
                Save Forest
              </h2>
            </div>
            <p>
              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like
            </p>
            <div class="btn-box">
              <a href="" class="btn-1">
                Donate Now
              </a>
              <a href="" class="btn-2">
                Read More
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end forest section -->


  <!-- about section -->

  <section class="about_section layout_padding2-bottom">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10 col-lg-9 mx-auto">
          <div class="detail-box">
            <div class="heading_container">
              <h2>
                About Forest
              </h2>
            </div>
            <p>
              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like </p>
            <div class="btn-box">
              <a href="" class="btn-2">
                Donate Now
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="img-box">
      <img src="images/about-img.jpg" alt="">
    </div>
  </section>


  <!-- end about section -->




  <!-- client section -->

  <section class="client_section ">
    <button class="plus_btn">
      <img src="images/plus.png" alt="" />
    </button>
    <div class="container">
      <div class="heading_container">
        <h2>
          What says Donators
        </h2>
      </div>
      <div class="box">
        <div class="img-box">
          <img src="images/client.png" alt="" />
        </div>
        <div class="detail-box">
          <h6>
            Carry Mork
          </h6>
          <h6 class="profession">
            Business
          </h6>
          <p>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like </p>
        </div>
      </div>
    </div>
  </section>

  <!-- end client section -->

  <!-- contact section -->

  <section class="contact_section layout_padding">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-5 col-lg-4 offset-md-1">
          <div class="form_container">
            <div class="heading_container">
              <h2>
                Request A Call back
              </h2>
            </div>
            <form action="">
              <div>
                <input type="text" placeholder="Full Name " />
              </div>
              <div>
                <input type="email" placeholder="Email" />
              </div>
              <div>
                <input type="text" placeholder="Phone number" />
              </div>
              <div>
                <input type="text" class="message-box" placeholder="Message" />
              </div>
              <div class="d-flex ">
                <button>
                  SEND
                </button>
              </div>
            </form>
          </div>
        </div>
        <div class="col-md-6 col-lg-7 px-0">
          <div class="map_container">
            <div class="map">
              <div id="googleMap"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end contact section -->



  <!-- subscribe section -->

  <section class="subscribe_section layout_padding-bottom">
    <div class="container">
      <div class="heading_container">
        <h2>
          Subscribe Our Newsletter
        </h2>
        <p>
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at
        </p>
      </div>
      <div class="row">
        <div class="col-md-7 mx-auto">
          <div class="subscribe_form ">
            <form action="">
              <input type="email" placeholder="">
              <button>
                subscribe
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end subscribe section -->




  <!-- info section -->

  <section class="info_section  layout_padding2">
    <div class="footer_img fi1">
      <img src="images/footer-animal1.png" alt="">
    </div>
    <div class="footer_img fi2">
      <img src="images/footer-animal2.png" alt="">
    </div>
    <div class="container">
      <div class="social_container">
        <div class="social_box">
          <a href="">
            <img src="images/fb.png" alt="">
          </a>
          <a href="">
            <img src="images/twitter.png" alt="">
          </a>
          <a href="">
            <img src="images/linkedin.png" alt="">
          </a>
          <a href="">
            <img src="images/instagram.png" alt="">
          </a>
          <a href="">
            <img src="images/youtube.png" alt="">
          </a>
        </div>
      </div>
      <div class="contact_items">
        <a href="">
          <div class="item ">
            <div class="img-box ">
              <img src="images/location.png" alt="">
            </div>
            <div class="detail-box">
              <p>
                Location
              </p>
            </div>
          </div>
        </a>
        <a href="">
          <div class="item ">
            <div class="img-box ">
              <img src="images/call.png" alt="">
            </div>
            <div class="detail-box">
              <p>
                Call +01 1234567890
              </p>
            </div>
          </div>
        </a>
        <a href="">
          <div class="item ">
            <div class="img-box ">
              <img src="images/mail.png" alt="">
            </div>
            <div class="detail-box">
              <p>
                demo@gmail.com
              </p>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="info_container ">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-lg-3 ">
            <h6>
              About
            </h6>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority havThere are many variations of passages of Lorem Ipsum available, but the majority hav </p>
          </div>
          <div class="col-md-6 col-lg-3">
            <h6>
              Useful Link
            </h6>
            <div class="info_link-box">
              <ul>
                <li class="active">
                  <a href="index.html">
                    Home
                  </a>
                </li>
                <li>
                  <a href="about.html">
                    About
                  </a>
                </li>
                <li>
                  <a href="donate.html">
                    Donate
                  </a>
                </li>
                <li>
                  <a href="contact.html">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-6 col-lg-3 text-center">
            <h6>
              Forest
            </h6>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority havThere are many variations of passages of Lorem Ipsum available, but the majority hav
            </p>
          </div>
          <div class="col-md-6 col-lg-3 text-center">
            <h6>
              Animals
            </h6>
            <p>
              There are many variations of passages of Lorem Ipsum available, but the majority havThere are many variations of passages of Lorem Ipsum available, but the majority hav </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end info section -->


  <!-- footer section -->
  <section class="container-fluid footer_section ">
    <p>
      &copy; <span id="displayDate"></span> All Rights Reserved. Design by
      <a href="#">网站模板大全</a>
    </p>
  </section>
  <!-- end  footer section -->

  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>
  <!-- Google Map -->
  <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> -->
  <!-- End Google Map -->


</body>

</html>

由于代码篇幅过长已上传到专栏源码里点击自行下载即可~

不明白的可以留言随时在~

结束啦🙇‍：

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等!

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