朝阳美食网站（html+css+js+bootstrap）

在努力的前端小白

已于 2023-12-28 00:35:55 修改

阅读量166

点赞数 1

分类专栏： html项目文章标签： html css 美食

于 2023-07-07 15:08:46 首次发布

本文链接： https://blog.csdn.net/m0_57731044/article/details/131597102

版权

html项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

朝阳美食网站介绍一些朝阳美食，一个静态页面，登录页面可以进行登录，登陆之后才可以评论，7天轻松搞定，堪称入门级神作

开发工具：Visual Studio Code或者HBuilder

主页面：

部分代码：

index.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" />
    <script src="./src/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="./src/js/index.js"></script>
    <script
      src="./src/bootstrap/bootstrap.min.js"
      type="text/javascript"
    ></script>
    <script
      src="./src/assets/data/cookery-book.js"
      type="text/javascript"
    ></script>
    <link
      rel="stylesheet"
      href="./src/bootstrap/bootstrap.min.css"
      type="text/css"
    />
    <link rel="stylesheet" href="./src/css/index.css" type="text/css" />
    <link href="./src/assets/img/logo.ico" rel="icon" type="image/x-ico" />
    <title>朝阳美食</title>
  </head>
  <body>
    <div class="main-body">
      <div class="container-sm">
        <div class="row title-line">
          <div class="col-3">
            <img
              src="./src/assets/img/logo.png"
              class="rounded float-start img-logo"
              alt=""
            />
            <h1>朝阳美食</h1>
          </div>
          <div class="col-6">
            <nav class="nav nav-pills flex-column flex-sm-row">
              <a
                class="flex-sm-fill text-sm-center nav-link active"
                aria-current="page"
                href="#"
                >主页</a
              >
              <a class="flex-sm-fill text-sm-center nav-link" href="#">湘菜</a>
              <a class="flex-sm-fill text-sm-center nav-link" href="#">川菜</a>
              <a class="flex-sm-fill text-sm-center nav-link" href="#"
                >留言板</a
              >
            </nav>
          </div>
          <div
            class="col-3 text-center align-bottom status-line"
            id="login-status"
          ></div>
        </div>
        <iframe
          src="./html/main.html"
          id="the_iframe"
          class="the-iframe"
          ref="Frame"
        >
        </iframe>
      </div>
    </div>
  </body>
</html>