、LoadHTMLGlob多級(jí)目錄

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

	func (engine *Engine) LoadHTMLGlob(pattern string)

LoadHTMLGlob有1個(gè)參數(shù)，可以使用通配符，"template1/*"表示template1目錄下的所有文件

當(dāng)模板目錄template1結(jié)構(gòu)如下：

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

那么需要注意的是，每個(gè)index.html都要有{{define "..."}}......{{end}}，將html包裹起來(lái)，

可以理解為給index.html起個(gè)別名，用于區(qū)分不同文件夾下相同名字文件的別名。

因?yàn)閏.HTML(http.StatusOK, "index2", nil)中的index2就是所定義的別名

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

......：是html內(nèi)容

2、模板傳參

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

其中g(shù)in.H是map[string]interface{}的別名，

c.HTML有3個(gè)參數(shù)，

	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".

作用是渲染模板文件，將響應(yīng)頭的Content-Type設(shè)置為 "text/html"

code int：響應(yīng)碼，可以寫(xiě)成http.StatusOK這樣的常量，也可以直接寫(xiě)成200，因?yàn)閔ttp.StatusOK的常量值就是200，當(dāng)然有可以寫(xiě)成相匹配的響應(yīng)碼，這里只是以正常響應(yīng)的200舉例

name string：這里就是模板名，默認(rèn)是文件名，如果使用{{define "..."}}......{{end}}進(jìn)行了定義，那么就可以寫(xiě)成別名。

obj interface{}：這里就是傳入模板的對(duì)象，類(lèi)型是空接口類(lèi)型，也就是說(shuō)，可以傳入任意類(lèi)型的值，模板都是可以接受的，在func admin(c *gin.Context)示例中，傳入了gin.H這樣的map類(lèi)型，那么就可以在模板文件中進(jìn)行使用。

示例代碼：

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)
}

模板文件：

執(zhí)行結(jié)果：

shenlan-ui (UI根目錄)
|--src (核心樣式代碼)
| |--shenlan-ui.css (UI的主樣式文件)
| |--common.css (公共樣式文件)
| |--reset.css (CSS-Reset文件)
| |--layout.css (組件文件：圖標(biāo)樣式)
| |--... (其他組件文件)
|
|--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
*/
/* 去掉所有元素的內(nèi)外邊距 */
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;
}
/* 統(tǒng)一全局字體 */
body {
font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif
}
/* 列表元素去掉默認(rèn)的列表樣式 */
ol, ul {
list-style: none;
}
/* Table元素的邊框折疊 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 去掉默認(rèn)的下劃線 */
a{
text-decoration: none;
}
/* 去掉input自帶的邊緣效果和背景顏色 */
input{
outline: none;
background: none;
}

/src/common.css

1 區(qū)分屏幕寬度的方式

/* 屏幕寬度小于340px時(shí)的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度在340px至410px時(shí)的樣式 */
@media (min-width: 340px) and (max-width: 410px){ /* 樣式2 */ }
/* 屏幕寬度大于410px時(shí)的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }

精簡(jiǎn)樣式:

/* 屏幕寬度在340px至410px時(shí)的樣式 */
/* 樣式2 */
/* 屏幕寬度小于340px時(shí)的樣式 */
@media (max-width: 340px){ /* 樣式1 */ }
/* 屏幕寬度大于410px時(shí)的樣式 */
@media (min-width: 410px){ /* 樣式3 */ }

這樣屏幕適配的框架就完成了

2 元素尺寸的指定

/* 屏幕寬度在340px至410px時(shí)，基準(zhǔn)尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時(shí)，基準(zhǔn)尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時(shí)，基準(zhǔn)尺寸使用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時(shí)，基準(zhǔn)尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小于340px時(shí)，基準(zhǔn)尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大于410px時(shí)，基準(zhǔn)尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}

src/shenlan-ui.css

目前, 我們只有/src/reset.css和/src/common.css這兩個(gè)文件, 所以集成的時(shí)候只需要把這兩個(gè)文件引入即可。

過(guò)去幾年中，CSS已經(jīng)取得了長(zhǎng)足的進(jìn)步。在過(guò)去，您可能會(huì)使用CSS來(lái)創(chuàng)建依賴(lài)于HTML表格和CSS浮動(dòng)作為其布局系統(tǒng)的簡(jiǎn)單外觀的Web應(yīng)用程序。而現(xiàn)在，您可以設(shè)計(jì)復(fù)雜的交互式用戶(hù)界面，具有優(yōu)雅的設(shè)計(jì)。

盡管CSS變得越來(lái)越先進(jìn)，但為大型Web應(yīng)用程序從頭編寫(xiě)CSS樣式可能會(huì)耗費(fèi)時(shí)間。這也可能導(dǎo)致樣式重復(fù)、CSS文件變長(zhǎng)、跨瀏覽器兼容性錯(cuò)誤，以及通常更復(fù)雜的代碼庫(kù)。

為了解決這一挑戰(zhàn)，CSS框架應(yīng)運(yùn)而生。CSS框架引入了一種方法，使開(kāi)發(fā)人員可以采用一組預(yù)定義和標(biāo)準(zhǔn)化的CSS樣式和組件，以創(chuàng)建一致、吸引人且響應(yīng)靈活的用戶(hù)界面。

但是由于有這么多的CSS框架可供選擇，決定適合您的應(yīng)用程序的正確框架可能會(huì)很困難。您需要進(jìn)行適當(dāng)?shù)谋容^，考慮每個(gè)CSS框架的整體特性，以便選擇最適合您需求的選項(xiàng)。

在本文中，我們將探討CSS框架是什么，它們的優(yōu)點(diǎn)和局限性，以及如何開(kāi)始使用它們。我們還將介紹2024年及以后您應(yīng)該了解的最顯著和最常用的CSS框架。

最后，您將對(duì)CSS框架的工作原理有很好的了解，并知道如何選擇符合項(xiàng)目需求的框架。讓我們開(kāi)始吧。

（本文內(nèi)容參考：java567.com）