、LoadHTMLGlob多级目录

	engine.LoadHTMLGlob("template1/**/*")

	func (engine *Engine) LoadHTMLGlob(pattern string)

LoadHTMLGlob有1个参数，可以使用通配符，"template1/*"表示template1目录下的所有文件

当模板目录template1结构如下：

	└─template1
    ├─admin
    │      index.html
    │
    ├─index
    │      index.html
    │
    └─users
            index.html

那么需要注意的是，每个index.html都要有{{define "..."}}......{{end}}，将html包裹起来，

可以理解为给index.html起个别名，用于区分不同文件夹下相同名字文件的别名。

因为c.HTML(http.StatusOK, "index2", nil)中的index2就是所定义的别名

define "..."：中的...就是别名

......：是html内容

2、模板传参

	func admin(c *gin.Context) {
		c.HTML(http.StatusOK, "admin_index", gin.H{
			"user": "admin",
			"pass": "123456",
		})
	}

其中gin.H是map[string]interface{}的别名，

c.HTML有3个参数，

	func (c *Context) HTML(code int, name string, obj interface{})

HTML renders the HTTP template specified by its file name. It also updates the HTTP code and sets the Content-Type as "text/html".

作用是渲染模板文件，将响应头的Content-Type设置为 "text/html"

code int：响应码，可以写成http.StatusOK这样的常量，也可以直接写成200，因为http.StatusOK的常量值就是200，当然有可以写成相匹配的响应码，这里只是以正常响应的200举例

name string：这里就是模板名，默认是文件名，如果使用{{define "..."}}......{{end}}进行了定义，那么就可以写成别名。

obj interface{}：这里就是传入模板的对象，类型是空接口类型，也就是说，可以传入任意类型的值，模板都是可以接受的，在func admin(c *gin.Context)示例中，传入了gin.H这样的map类型，那么就可以在模板文件中进行使用。

示例代码：

package main

import (
   "github.com/gin-gonic/gin"
   "net/http"
)

func main() {
   engine := gin.Default()
   engine.LoadHTMLGlob("template1/**/*")
   engine.GET("/admin", admin)
   engine.GET("/index", index)
   engine.GET("/users", users)
   _ = engine.Run("127.0.0.1:80")
}

func admin(c *gin.Context) {
   c.HTML(http.StatusOK, "admin_index", gin.H{
      "user": "admin",
      "pass": "123456",
   })
}
func index(c *gin.Context) {
   c.HTML(http.StatusOK, "index_index", nil)
}

func users(c *gin.Context) {
   c.HTML(http.StatusOK, "users_index", nil)
}

模板文件：

执行结果：

shenlan-ui (UI根目录)
|--src (核心样式代码)
| |--shenlan-ui.css (UI的主样式文件)
| |--common.css (公共样式文件)
| |--reset.css (CSS-Reset文件)
| |--layout.css (组件文件：图标样式)
| |--... (其他组件文件)
|
|--demo (演示文件目录)
|--layout.html (布局样式文件)
|--... (其他组件的样式文件)

rc/reset.css

/*
* @Author: xutao
* @Date: 2019-04-12 10:06:29
* @Last Modified by: xutao
* @Last Modified time: 2019-04-29 16:37:40
*/
/* 去掉所有元素的内外边距 */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, img, ul, li, form, label, input,
table, tbody, tfoot, thead, tr, th, td,
audio, video {
margin: 0;
padding: 0;
}
/* 统一全局字体 */
body {
font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif
}
/* 列表元素去掉默认的列表样式 */
ol, ul {
list-style: none;
}
/* Table元素的边框折叠 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去掉默认的下划线 */
a{
text-decoration: none;
}
/* 去掉input自带的边缘效果和背景颜色 */
input{
outline: none;
background: none;
}

/src/common.css

1 区分屏幕宽度的方式

/* 屏幕宽度小于340px时的样式 */
@media (max-width: 340px){ /* 样式1 */ }
/* 屏幕宽度在340px至410px时的样式 */
@media (min-width: 340px) and (max-width: 410px){ /* 样式2 */ }
/* 屏幕宽度大于410px时的样式 */
@media (min-width: 410px){ /* 样式3 */ }

精简样式:

/* 屏幕宽度在340px至410px时的样式 */
/* 样式2 */
/* 屏幕宽度小于340px时的样式 */
@media (max-width: 340px){ /* 样式1 */ }
/* 屏幕宽度大于410px时的样式 */
@media (min-width: 410px){ /* 样式3 */ }

这样屏幕适配的框架就完成了

2 元素尺寸的指定

/* 屏幕宽度在340px至410px时，基准尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕宽度小于340px时，基准尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕宽度大于410px时，基准尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

3 按比例划分屏幕

最终common.css样式

/*
* @Author: xutao
* @Date: 2019-06-20 22:16:01
* @Last Modified by: xutao
* @Last Modified time: 2019-06-20 23:03:17
*/

/* 屏幕宽度在340px至410px时，基准尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕宽度小于340px时，基准尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕宽度大于410px时，基准尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

src/shenlan-ui.css

目前, 我们只有/src/reset.css和/src/common.css这两个文件, 所以集成的时候只需要把这两个文件引入即可。

过去几年中，CSS已经取得了长足的进步。在过去，您可能会使用CSS来创建依赖于HTML表格和CSS浮动作为其布局系统的简单外观的Web应用程序。而现在，您可以设计复杂的交互式用户界面，具有优雅的设计。

尽管CSS变得越来越先进，但为大型Web应用程序从头编写CSS样式可能会耗费时间。这也可能导致样式重复、CSS文件变长、跨浏览器兼容性错误，以及通常更复杂的代码库。

为了解决这一挑战，CSS框架应运而生。CSS框架引入了一种方法，使开发人员可以采用一组预定义和标准化的CSS样式和组件，以创建一致、吸引人且响应灵活的用户界面。

但是由于有这么多的CSS框架可供选择，决定适合您的应用程序的正确框架可能会很困难。您需要进行适当的比较，考虑每个CSS框架的整体特性，以便选择最适合您需求的选项。

在本文中，我们将探讨CSS框架是什么，它们的优点和局限性，以及如何开始使用它们。我们还将介绍2024年及以后您应该了解的最显著和最常用的CSS框架。

最后，您将对CSS框架的工作原理有很好的了解，并知道如何选择符合项目需求的框架。让我们开始吧。

（本文内容参考：java567.com）