2021-06-23

最新推荐文章于 2024-09-11 20:31:47 发布
最新推荐文章于 2024-09-11 20:31:47 发布
阅读量194 收藏
点赞数
文章标签： css html javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52819136/article/details/118158759
版权

#Java课程设计“论坛系统”前端
##六个文件
error.html ；index.html;navigation.html;
profile.html;publish.html;question.html.

<!DOCTYPE HTML>  <!--网页出现错误时的网页-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>第一社区</title>
  <!--link是一种设置CSS样式的方式，叫做外部格式链接。rel="stylesheet" 定义一个外部加载的样式表-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!--mate标签-->
  <link rel="stylesheet" href="/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="/css/commun/bootstrap-theme.min.css"/>
  <link rel="stylesheet" href="/cssity.css"/>
  <script src="/js/jquery-3.6.0.min.js"></script> 
  <!--JavaScript知识：指定js文件的位置,不设置type就默认type=text/javascript-->
  <script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
   <!--div就是样式表中的定位技术，div的全称就是division，有时候我们也习惯叫图层，
    在html中，div有很多属性，正式这些属性组成才会形成美观的板块。-->
<div th:insert="~{navigation :: nav}"></div>   <!--此处为模板布局，th为Thymeleaf语法标签，th：insert为关键字-->
<div class="jumbotron" style="margin: 50px">  <!--重要的盒子用id，局部不重要的用class，样式选择器-->
  <h1>出错了！！！</h1>     <!--标题-->
  <p th:text="${message}"> 天气太热啦，要不然稍等一下再来试试</p>   <!--文本替换-->
  <p><a class="btn btn-primary btn-lg" href="/" role="button">回到主页</a></p> 
                           <!--此处“回到主页”为一个链接-->
</div>

</body>
</html>            



<!DOCTYPE HTML>  <!--实现分页功能-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>第一社区</title>
    <!--link是一种设置CSS样式的方式，叫做外部格式链接。rel="stylesheet" 定义一个外部加载的样式表-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="css/community.css"/>
    <script src="js/jquery-3.6.0.min.js"></script>
    <!--JavaScript知识：指定js文件的位置,不设置type就默认type=text/javascript-->
    <script src="js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div> <!--此处为模板布局-->
<div class="container-fluid main">           
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span>发现</h2>
            <hr>   <!--水平线标签-->
            <!--class标签表样式选择器-->
            <div class="media" th:each="question : ${pagination.questions}">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object img-rounded"
                            th:src="${question.user.avatarUrl}">
                    </a>     <!--图片链接-->
                </div>
                <div class="media-body">
                    <h4 class="media-heading" >
                        <a th:href="@{'/question/'+${question.id}}" th:text="${question.title}"></a>
                    </h4> <!--th:href:超链接请求后端接口-->
                    <span th:text="${question.description}"></span> <br> <!--从question中取值-->
                    <span class="text-desc"><span th:text="${question.commentCount}"></span> 个回复 • <span th:text="${question.viewCount}"></span> 次浏览 • <span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span></span>
                <!--span一般配合CSS修改网页中的一些局部信息。和div类似，但是div一般单独占用一行-->
                </div>
            </div>
            <nav aria-label="Page navigation">
                <ul class="pagination">      <!--ul定义无序列表，li表示一行-->
                    <li th:if="${pagination.showFirstPage}">
                        <a href="/?page=1" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>   
                <!--连接中特定的样式，判断一下 如果是第一页，就没有上一页-->
                        </a>
                    </li>
                    <li th:if="${pagination.showPrevious}">
                        <a th:href="@{/(page=${pagination.page-1})}" aria-label="Previous">
                            <span aria-hidden="true">&lt;</span>
                        </a>    
                    </li>
                    <li th:each="page : ${pagination.pages}" th:class="${pagination.page==page}?'active':''"><a th:href="@{/(page=${page})}" th:text="${page}"></a></li>
                    <li th:if="${pagination.showNext}">
                        <a th:href="@{/(page=${pagination.page+1})}" aria-label="Previous">
                            <span aria-hidden="true">&gt;</span>
                        </a>
                    </li>
                    <li th:if="${pagination.showEndPage}">
                        <a th:href="@{/(page=${pagination.totalPage})}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h3>热门话题</h3>
        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE HTML> <!--导航，登录，退登，发布，搜索，问题--> 
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="nav">   
    <nav class="navbar navbar-default">
        <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">第一社区</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">第一社区</a>  
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left">  <!--form表单的应用-->
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索问题"> <!--input标签，可在里面输入数据-->
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>  <!--botton按钮“搜索”-->
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li th:if="${session.user != null}">  <!--相当于boolean型-->
                        <a href="/publish">发布</a>
                    </li>        
                    <li class="dropdown" th:if="${session.user != null}">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <span th:text="${session.user.getName()}"></span>  <!--从session中取值-->
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="/profile/questions">我的问题</a></li>   
                            <li><a href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                    <li th:if="${session.user == null}">
                        <a href="https://gitee.com/oauth/authorize?client_id=8e24f0db9d637f4e6658dd3be86f14a395ea2267e4360579a4ec81b8ee390580&redirect_uri=http://localhost:8887/callback&response_type=code">登录</a>
                    </li>
                </ul>
            </div>

<!DOCTYPE HTML><!--查看我的问题和最新回复-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title th:text="${sectionName}"></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
  <link rel="stylesheet" href="/css/community.css"/>
  <script src="/js/jquery-3.6.0.min.js"></script>
  <script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div> <!--与3相联系-->
<div class="container-fluid main profile">
  <div class="row">
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
      <h2><span th:text="${sectionName}"></span></h2>
      <hr>

      <div class="media" th:each="question : ${pagination.questions}">
        <div class="media-left">
          <a href="#">
            <img class="media-object img-rounded"
                 th:src="${question.user.avatarUrl}">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" th:text="${question.title}"></h4>
          <span th:text="${question.description}"></span> <br>
          <span class="text-desc"><span th:text="${question.commentCount}"></span> 个回复 • <span th:text="${question.viewCount}"></span> 次浏览 • <span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span></span>
        </div>
      </div>
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li th:if="${pagination.showFirstPage}">
            <a th:href="@{'/profile/'+${section}(page=${1})}" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li th:if="${pagination.showPrevious}">
            <a th:href="@{'/profile/'+${section}(page=${pagination.page-1})}" aria-label="Previous">
              <span aria-hidden="true">&lt;</span>
            </a>
          </li>
          <li th:each="page : ${pagination.pages}" th:class="${pagination.page==page}?'active':''"><a th:href="@{'/profile/'+${section}(page=${page})}" th:text="${page}" }></a></li>
          <li th:if="${pagination.showNext}">
            <a th:href="@{'/profile/'+${section}(page=${pagination.page+1})}" aria-label="Previous">
              <span aria-hidden="true">&gt;</span>
            </a>
          </li>
          <li th:if="${pagination.showEndPage}">
            <a th:href="@{'/profile/'+${section}(page=${pagination.totalPage})}" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
      <div class="list-group section" style="margin-top: 15px">
        <a href="/profile/questions" th:class="${section=='questions'}?'active list-group-item':'list-group-item'">我的问题</a>
        <a href="/profile/replies" th:class="${section=='replies'}?'active list-group-item':'list-group-item'">
          最新回复
          <span class="badge">14</span>
        </a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

在这里插<!DOCTYPE HTML>  <!--发起问题，问题方面的东西-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布——第一社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/community.css"/>
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>发起</h2>
            <hr>
            <form action="/publish" method="post"> <!--form表单的应用-->
                <input type="hidden" name="id" th:value="${id}">
                <div class="form-group">
                    <label for="title">问题标题（简单扼要）</label>
                    <!--lable标签将input包括起来，这样的话，可以点击文字，直接将鼠标定位到输入框中-->
                    <input type="text" class="form-control" id="title" th:value="${title}" name="title" placeholder="问题标题……">
                </div>
                <div class="form-group">
                    <label for="description">问题补充（必填，请参照右侧提示）：</label>
                    <textarea name="description" class="form-control" th:text="${description}" id="description" cols="30" rows="10"></textarea>
                </div>
                <div class="form-group">
                    <label for="tag">添加标签</label>
                    <input type="text" class="form-control" id="tag" name="tag" th:value="${tag}" placeholder="输入标签，以逗号分隔">
                </div>
                <div class="container-fluid main ">
                    <div class="row">
                        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 ">
                            <div class="alert alert-danger col-lg-12 col-md-12 col-sm-12 col-xs-12" th:text="${error}" th:if="${error!=null}"></div>
                        </div>
                        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12"><button type="submit" class="btn btn-success btn-publish">发布</button></div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h3>问题发起指南</h3>
            ·问题标题：请用精简的语言描述您发布的问题，不超过25字 <br>
            ·问题补充：详细补充您的问题内容，并确保问题描述清晰直观，并提供一些相关的资料 <br>
            ·选择标签：选择一个或者多个合适的标签，用逗号隔开，每个标签不超过10个字 <br>
        </div>
    </div>
</div>
</body>
</html>入代码片

<!DOCTYPE HTML>  <!--作者，阅读数，发布时间等-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${question.title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/community.css"/>
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main profile">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h4><span th:text="${question.title}"></span></h4>
            <span class="text-desc">
                作者：<span th:text="${question.user.name}"></span>&nbsp; | &nbsp;
                <!--在nbsp前面加“&”后面加分号“；”时表示一个“空格”. NBSP是常用的编程和网页创建的行不打破空间上的程序或文档的空间。-->
                阅读数：<span th:text="${question.viewCount}"></span>&nbsp; | &nbsp;
                发布时间：<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
            </span>
            <hr>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:text="${question.description}"></div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <a th:href="@{'/publish/'+${question.id}}" class="community-menu" th:if="${session.user!=null && session.user.id==question.creator}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>发起人</h4>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-circle"
                                 th:src="${question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" >
                            <span th:text="${question.user.name}"></span>
                        </h5>
                    </div>
                </div>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>相关问题</h4>
            </div>
        </div>
    </div>
</div>
</body>
</html>
In_Linyi
关注
(学习笔记)Bootstrap实训二(简易公司官网首页面)
qq_56508310的博客
04-16 1130
效果图 代码部分 一、（body部分） <body> <!-- 导航条 --> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-he
bootstrap中外层div盒子的class设置为"container"和设置为"container-fluid"的区别
Java从入门到放弃
05-20 3万+
直接正文 一句话概括：在bootstrap中，规定了每一行都被分为了固定的12个栅栏，每一个栅栏都有自己的宽度。如果你的div用了container的样式，那么它的宽度最大也打不过12个栅栏一共的最大宽度。而，当你的div用了container-fluid的样式，它会无视12个栅栏的规定，根据屏幕自动适应自动填充。(当然，宽度要设置为width:100%)，下面用例子说明。 当&amp;l...
bootstrap中container和container-fluid区别
干掉熊猫我就是国宝
10-19 1449
‘container ’demo &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &am
bootstrap中container类和container-fluid类的区别
Hey firefly
03-26 6万+
container类和container-fluid类
自动驾驶如何重构汽车产业价值链[2021-06-23]（12页）.pdf
05-26
自动驾驶技术的崛起正在深刻地改变汽车产业的价值链，预示着一个全新的交通时代即将来临。到2035年，预计半数车辆将实现自动驾驶，这不仅将带来超过5000亿美元的市场规模，还能节省大约10%的社会总出行成本。...
中国智能家居产业链分析报告（2019）[2021-06-23]（65页）.pdf
05-26
《中国智能家居产业链分析报告（2019）》是一份深度剖析中国智能家居产业现状、发展和前景的研究报告。以下是对报告关键内容的详细说明： **智能家居行业概述** 智能家居定义为以住宅为基础，利用物联网技术、软件...
bootstrap3中container与container_fluid容器的区别
林中路
04-24 4万+
.container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是： .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 一开始，我以为所谓固定宽度是开发者可以设置该容器为固定宽度，所以我采用了如下布局样式：<b
bootstrap框架的.container 和container-fluid 类的区别
热门推荐
zhongmei121的专栏
06-02 7万+
.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。通过使用chrome浏览器实验html代码：得出以下结论：1、.container类的div左右两边有一个15px的padding（内边距），container-fluid类没有内边距2、.container类在屏幕宽度小于等于767px的时...
container 和container-fluid区别
lijianli_131300的博客
08-03 2251
摘自网络。 （1）container-fluid的width是100％，而container的width是用媒体查询获得的动态尺寸。两者样式肯定是不一样的。并且由于  padding的原因两者不可用嵌套，他们就是提供两种视觉风格。 （2）container-fluid和container 全部都是响应式的布局。只是container有1个98px的margin 存在 Container-fl...
thymeleaf - 常用标签
法国锄头雨
02-02 561
thymeleaf 标签用法 引入DTD： <html xmlns:th="http://www.thymeleaf.org">...</html> note： th 标签会覆盖html标签中的内容，包括th标签引用的类，也会覆盖原来的类 _______________________________________________________ 1) nav...
SpringBoot分页功能实现原理（非工具，主后端）
cchaos的博客
11-21 1217
效果图如下 1，创建实体类，分页信息类PaginationDTO和每页显示的数据的实体类QuestionDTO，在PaginationDTO中注入QuestionDTO以实现关联。 QuestionDTO类： @Data public class QuestionDTO { private Integer id; private String title; priv...
基于Spring boot的教学论坛系统的分页功能的实现，完善导航栏，搜索功能的实现，评论有关功能
iQibin的博客
06-17 326
课程设计
CSS —— 界面布局
m0_73557953的博客
09-10 1010
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 385
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
CSS 常用元素属性
最新发布
2301_79881188的博客
09-11 969
CSS 属性有很多, 可以参考文档。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 713
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
SELECT CONVERT(datetime, '2021-06-18', )
06-13
这不是一个完整的 SQL 语句，'2021-06-18' 后面需要指定日期的格式，比如 'yyyy-mm-dd'。如果你想将字符串 '2021-06-18' 转换为 datetime 类型，可以使用以下 SQL 语句： SELECT CONVERT(datetime, '2021-06-18', 23); 其中，23 表示输入的字符串格式为 'yyyy-mm-dd'。这个语句的执行结果将会是一个 datetime 类型的值，表示 2021 年 6 月 18 日。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值