项目实训5-博客标签、归档页面。关于我的页面

最新推荐文章于 2023-09-01 16:30:22 发布
最新推荐文章于 2023-09-01 16:30:22 发布
阅读量174 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianyikang/article/details/118469380
版权

1、创建标签页面tags.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui teal header">标签</h3>
          </div>
          <div class="right aligned column">
            共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${#arrays.length(tags)}"> 14 </h2> 个
          </div>
        </div>
      </div>

      <div class="ui attached segment m-padded-tb-large">
        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}"  class="ui basic left pointing large label m-margin-tb-tiny" th:classappend="${tag.id==activeTagId} ? 'teal'" th:each="tag : ${tags}">
          <span th:text="${tag.name}">方法论</span> <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
        </a>
      </div>

      <div class="ui top attached teal segment">
        <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
          <div class="ui middle aligned mobile reversed stackable grid" >
            <div class="eleven wide column">
              <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">你真的理解什么是财富自由吗?</a></h3>
              <p class="m-text" th:text="|${blog.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
              <div class="ui grid">
                <div class="row">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}"  alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}" >李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> <span th:text="${blog.views}">2342</span>
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
                  </div>
                </div>
                <div class="row">
                  <div class="column">
                    <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui  basic left pointing label m-padded-mini m-text-thin" th:classappend="${tag.id==activeTagId} ? 'teal'" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="five wide column">
              <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
              </a>
            </div>

          </div>
        </div>

      </div>

      <!--footer-->
      <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <a href="#" th:href="@{'/tags/'+${activeTagId}(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
          </div>
          <div class="right aligned column">
            <a href="#" th:href="@{'/tags/'+${activeTagId}(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>
            <a href="#" class="item m-text-thin">QQ：865729312</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
    </div>

  </footer>
  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
</body>
</html>

运行效果
在这里插入图片描述
7、创建归档页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>归档</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big" style="height: 800px!important;">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached padded segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui teal header">归档</h3>
          </div>
          <div class="right aligned column">
            共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"> 114 </h2> 篇博客
          </div>
        </div>
      </div>

      <th:block th:each="item : ${archiveMap}">
      <h3 class="ui center aligned header" th:text="${item.key}">2017</h3>
      <div class="ui fluid vertical menu">
        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${item.value}">
          <span>
            <i class="mini teal circle icon"></i><span th:text="${blog.title}">关于刻意练习的清单</span>
            <div class="ui teal basic left pointing label m-padded-mini " th:text="${#dates.format(blog.updateTime,'MMMdd')}">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini " th:text="${blog.flag}">原创</div>
        </a>
        <!--/*-->
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <!--*/-->
      </div>
      </th:block>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>
            <a href="#" class="item m-text-thin">QQ：865729312</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
    </div>

  </footer>
  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->
  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
</body>
</html>

运行效果
在这里插入图片描述
3、创建关于我的页面（about.html）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head  th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container m-padded-tb-big animated fadeIn">
    <div class="ui container">

      <div class="ui stackable grid">
        <div class="eleven wide column">
          <div class="ui segment">
            <img src="https://unsplash.it/800/600?image=1005" alt="" class="ui rounded image">
          </div>
        </div>
        <div class="five wide column">
          <div class="ui top attached segment">
            <div class="ui header">关于我</div>
          </div>
          <div class="ui attached segment">
            <p class="m-text">李仁密，一个独立开发者，折腾在 0 和 1 世界的大叔；一个终身学习者，誓将学习无限循环. 希望结识可以共同成长的小伙伴.</p>
            <p class="m-text">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法...</p>
          </div>
          <div class="ui attached segment">
            <div class="ui orange basic left pointing label">编程</div>
            <div class="ui orange basic left pointing label">写作</div>
            <div class="ui orange basic left pointing label">思考</div>
            <div class="ui orange basic left pointing label">运动</div>
          </div>
          <div class="ui attached segment">
            <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">Node</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">React</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">RN</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">MYSQL</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">...</div>
          </div>
          <div class="ui bottom attached segment">
            <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
            <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
            <a href="#" class="ui qq circular icon button" data-content="865729312" data-position="bottom center"><i class="qq icon"></i></a>
          </div>

          <div class="ui wechat-qr flowing popup transition hidden">
            <img src="../static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 110px">
          </div>
          </div>
      </div>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>
            <a href="#" class="item m-text-thin">QQ：865729312</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
    </div>

  </footer>
  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.wechat').popup({
      popup : $('.wechat-qr'),
      position: 'bottom center'
    });
    $('.qq').popup();

  </script>
</body>
</html>
星灵梦境
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
我的主页静态页面
06-22
网上找了好久静态页面，做后台。很难找，现在资源都加密了。
个人博客【关于我的页面】---学习06
uoprewqsnh的博客
06-06 902
文章目录一、思维导图二、个人博客1、创建关于我的页面（about.html）2、导航栏3、运行查看效果4、中间部分5、底部部分6、运行查看效果7、给微信添加二维码、添加QQ号码8、运行查看效果 一、思维导图 二、个人博客 1、创建关于我的页面（about.html） 2、导航栏 <!--导航--> <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" > <div
48 - 个人博客项目-19 - 用户中心(关于我) && 首页关于我
最新发布
m0_58250910的博客
09-01 86
【代码】48 - 个人博客项目-19 - 用户中心(关于我) && 首页关于我。
SpringBoot--个人博客--6.页面设计与开发--归档页
weixin_41988224的博客
02-11 288
6.1 笔记 <!--1--> <span> <i class="mini teal circle icon"></i>关于可以练习的清单 <div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div> </sp...
博客系统（页面设计）
Xian meng在努力呐-的博客
12-05 2237
1. 前端只是大致掌握，大致了解常用属性的使用 2. 基本能够看懂前端代码就行 3. 一行一行就使用弹性布局：`display:flex;` 4. 行内元素的限制 -> 转为块级元素 ：`display:block;` 5. 博客系统前端页面设计复盘！
吉林大学软件学院企业实训h5-纯前端模拟饿了么页面
08-01
吉林大学软件学院企业实训h5 实验主要内容是在采用vue大前端框架下，进行对“饿了么”app的页面模拟功能，主要采用的方法：利用脚手架工具搭建，对组件进行组合嵌套，element以及mintui的现成开源组件的复用，并且...
国开flash动画制作实训1-5
06-17
flash动画制作实训1-5已按题目要求做好，下载后解压，里面是5个压缩包，对应实训1-5，fla文件与swf文件在压缩包里。内容包括： 实训1：颜色和渐变应用 实训2：文字的使用 实训3：元件和库应用 实训4：引导层和遮罩层...
JavaScript暑期实训项目--基于VUE的游乐园管理网站.zip
07-08
JavaScript暑期实训项目--基于VUE的游乐园管理网站JavaScript暑期实训项目--基于VUE的游乐园管理网站JavaScript暑期实训项目--基于VUE的游乐园管理网站JavaScript暑期实训项目--基于VUE的游乐园管理网站JavaScript...
单片机应用技能实训教案-项目8.doc
11-15
单片机应用技能实训教案-项目8.doc
单片机应用技能实训教案-项目9.doc
11-15
单片机应用技能实训教案-项目9.doc
个人博客HTML界面
01-24
一个HTML的个人博客界面，只有首页界面。包含css和HTML
blog:包含我的博客页面和源的存储库。 而已
05-31
博客 这是一个包含我博客页面和来源的存储库。 而已。 可以在上访问博客，并在访问源。
漂亮的个人博客界面
11-01
简单的修改下就可以做个人的blog了，这个挺不错的
实训-个人博客（博客关于我页面）
qq_46302173的博客
07-01 646
1，创建AboutShowController package net.zl.myblog.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; /** * 关于我展示 */ @Controller public class AboutShowController { @GetMapping("/about")
关于我们页面
jiepp的博客
09-22 7214
关于我们页面 网页展示： 编辑器制作效果展示： 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {padding: 0;...
关于微信“我”的页面的布局
weixin_62622254的博客
12-24 1952
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" .
个人站——关于我页面设计
Muchen灬
08-10 5243
项目目标： 步骤一：引入BootStrapCDN及wow.js/animate.css并创建基本布局 首先我们需要引入bootStrap的CDN <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dis...
网易云“我的页面”——Web学习day9
weixin_44453019的博客
10-28 681
点击item播放音乐 这里设置data-mid={{item.id}}传到list.js里点击事件里，利用打印找到结构，用参数res将mid传给play页面。 数据走play的时候必定调用onload方法，同时赋值给options， 最直接写options.mid可拿到 “我的”页面实现 页面顶部设置块，放用户头像和基础个人信息。 open-data 用于展示微信开放的数据。 type 的合法值 值 说明 最低版本 groupName 拉取群名称 1.4.0 userNickName
Django(二)精美博客搭建(10)实现关于我页及文章详情页上一篇/下一篇bug解决
Mikasa的博客
06-29 431
本章主要讲述 【关于我】 页面的具体实现，以及之前咱们遗留的 【文章详情页上一篇/下一篇跳转bug的解决】
web实训项目宠物知识页面
05-23
宠物知识页面是一个非常好的web实训项目，可以用来提高学生的前端开发技能和数据处理能力。以下是一个简单的宠物知识页面的设计思路： 1. 页面布局设计 页面应该采用响应式设计，适应不同屏幕大小和设备类型。页面...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值