简单的 thymeleaf 前端网页模板
2024-04-09 18:27:38
List列表展示
网页代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<from lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>用户列表</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><style type="text/css">.box {width: 800px;margin: 50px auto;border: 1px solid #DCDFE6;border-radius: 20px;padding: 20px;}.box:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}.box-title {text-align: center;}.box-table {margin-top: 20px;}.box-nav{text-align: center;}</style></head><body><!--创建一个表单--><input type="hidden" name="_method" value="delete"><div class="box"><div class="form-group"><table class="table table-bordered box-table"><tr><th>编号</th><th>商品名称</th><th>商品价格</th><th>品牌</th><th>状态</th><th>商铺</th><th>操作</th></tr><tr th:each="work : ${workorder}"><td th:text="${work.goodsid}"></td><td th:text="${work.goodsname}"></td><td th:text="${work.goodsprice}"></td><td th:text="${work.typename}"></td><td th:text="${work.status}"></td><td th:text="${work.goodsspname}"></td><td> <!--class="btn btn-sm btn-danger deleteBtn"--><!--1 给当前按钮绑定样式deleteBtn2 给按钮绑定自定义属性--><a th:href="@{/del(id=${work.goodsid})}">删除</a><a th:href="@{/edit(id=${work.goodsid})}">修改</a></td></tr></table></div><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></div></form></body>
</from>
</body>
</html>
效果图
编辑页面
网页代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>用户信息编辑</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><style type="text/css">.box-form {width: 500px;margin: 50px auto;border: 1px solid #DCDFE6;border-radius: 20px;padding: 20px;}.box-form:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}</style>
</head>
<body>
<div class="box-form"><h1>编辑用户信息</h1><form class="form-horizontal" th:action="'/update'" method="post"><input type="hidden" name="_method" value="put" /><div class="form-group"><label for="id" class="col-sm-2 control-label">订单编号</label><div class="col-sm-10"><input type="text" class="form-control" id="id" placeholder="订单编号" th:value="${cs.id}" name="id" ></div></div><div class="form-group"><label for="name" class="col-sm-2 control-label">订单名称</label><div class="col-sm-10"><input type="text" class="form-control" id="name" th:value="${cs.name}" placeholder="订单名称" name="name"></div></div><div class="form-group"><label for="money" class="col-sm-2 control-label">订单金额</label><div class="col-sm-10"><input type="text" class="form-control" id="money" th:value="${cs.money}" placeholder="订单金额" name="money"></div></div><div class="form-group"><label for="time" class="col-sm-2 control-label">创建时间</label><div class="col-sm-10"><input type="text" class="form-control" id="time" th:value="${cs.time}" placeholder="创建时间" name="time"></div></div><button type="submit" class="btn btn-default">新增</button></form>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
效果图展示
简单的 thymeleaf 前端网页模板相关推荐
- 【仿淘宝首页】前端网页模板，大学生前端作业分享，html5+css电商网站模板，包含js动效
直接上代码 <!doctype html> <html lang="en"><head><meta charset="UTF-8 ...
- 前端网页模板，积极向上保护动物类，有登陆页轮播图，大学前端作业分享
index.html <html lang="en"><head><meta charset="UTF-8"><tit ...
- Dynamics 365 for Sales: 门户网页模板的制作
博主在之前的两篇文章中分享了D365 门户的创建和简单的集成配置,那么今天我们来看看怎么简单的创建一个网页模板 -- Web Template.在D365 Portal解决方案中,页面之间的关系如下所 ...
- HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做
HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做 1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大 ...
- HTML期末大作业 : 个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- HTML期末大作业 : 个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品
HTML5期末大作业:个人相册网站设计--清新蓝色个人相册摄影图库(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页 ...
- HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 文章目录 HTML5期末大作业:仿英雄联盟网站设计- ...
- HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程 表格布局网页模板
HTML5+CSS大作业--简单的程序员个人博客(7页) 大学个人博客网页制作教程 表格布局网页模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家 ...
最新文章
- 编译器设计-解析类型
- 使用scrapy抓取股票代码
- SpringBoot整合springDataJpa实现图片上传和显示
- 字符串数组 和 字符串指针 的区别
- select 1 from 浅析
- 【李宏毅机器学习】Tips for Deep Learning（p14） 学习笔记
- bootstarp span标签文本居中_web前端入门到实战：文本图标对齐的几种解决方案
- 现在很多富人有钱了，就喜欢去付费学习
- Save as XPS in Office “12”
- Ubuntu上下载百度网盘资料
- 数据结构试卷（一）及答案
- ios刺客信条一直显示连接服务器,刺客信条本色iOS进不去怎么办
- win10安装nessus8.10
- win7 下点击鼠标右键无法新建文件夹
- Advanced Installer Architect创作工具
- ELI'S CURIOUS MIND
- 征服者蒙面侠c380更新升级_8月15日更新公告
- 2012年科技行业那些事：IT巨头加紧冲刺步伐
- 小米基于OpenStack搭建私有云平台技术架构大揭秘！
- 租用国外服务器应该注意哪些？
热门文章
- ZIPF分布、PARETO分布和幂律分布
- linux下r语言画图,linux命令行下使用R语言绘图实例讲解
- 基于pt100的温度测量系统设计 c语言程序 四臂电桥,基于PT100热电阻传感器的温度采集系统设计资料...
- 笔记本电脑怎么拆开后盖_联想笔记本电脑怎么拆开后盖_联想笔记本怎么拆
- Google Earth 嵌入Qt应用程序
- 袁亚湘院士上《开讲啦》变数学魔术啦！
- 计算机网络与信息安全公务员,计算机网络技术专业考公务员有些职位？
- 3GPP TS 23502-h20 中英文对照 | 4.15.6.2 NEF service operations information flow
- SHFileOperation 文件夹COPY
- 小学生C++编程启蒙