diff --git a/H5Study.WebApp/H5Study.WebApp.csproj b/H5Study.WebApp/H5Study.WebApp.csproj
new file mode 100644
index 0000000..c78c9c7
--- /dev/null
+++ b/H5Study.WebApp/H5Study.WebApp.csproj
@@ -0,0 +1,9 @@
+
+
+
+ net6.0
+ enable
+ enable
+
+
+
diff --git a/H5Study.WebApp/Program.cs b/H5Study.WebApp/Program.cs
new file mode 100644
index 0000000..173dae0
--- /dev/null
+++ b/H5Study.WebApp/Program.cs
@@ -0,0 +1,18 @@
+namespace H5Study.WebApp
+{
+ public class Program
+ {
+ public static void Main(string[] args)
+ {
+ var builder = WebApplication.CreateBuilder(args);
+ var app = builder.Build();
+
+ app.UseDefaultFiles();
+ app.UseStaticFiles();
+
+ app.MapGet("/", () => "Hello World!");
+
+ app.Run();
+ }
+ }
+}
\ No newline at end of file
diff --git a/H5Study.WebApp/Properties/launchSettings.json b/H5Study.WebApp/Properties/launchSettings.json
new file mode 100644
index 0000000..bd73fac
--- /dev/null
+++ b/H5Study.WebApp/Properties/launchSettings.json
@@ -0,0 +1,29 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:42979",
+ "sslPort": 0
+ }
+ },
+ "profiles": {
+ "WebApp": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "http://localhost:5155",
+ "launchUrl": "Index.html",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ }
+ }
+}
diff --git a/H5Study.WebApp/appsettings.Development.json b/H5Study.WebApp/appsettings.Development.json
new file mode 100644
index 0000000..0c208ae
--- /dev/null
+++ b/H5Study.WebApp/appsettings.Development.json
@@ -0,0 +1,8 @@
+{
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ }
+}
diff --git a/H5Study.WebApp/appsettings.json b/H5Study.WebApp/appsettings.json
new file mode 100644
index 0000000..10f68b8
--- /dev/null
+++ b/H5Study.WebApp/appsettings.json
@@ -0,0 +1,9 @@
+{
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*"
+}
diff --git a/H5Study.WebApp/wwwroot/CssStudy/Index.html b/H5Study.WebApp/wwwroot/CssStudy/Index.html
new file mode 100644
index 0000000..52f7105
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/Index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ CSS 学习
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/CssStudy/flex布局/.editorconfig b/H5Study.WebApp/wwwroot/CssStudy/flex布局/.editorconfig
new file mode 100644
index 0000000..b9c127d
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/flex布局/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/CssStudy/flex布局/index.html b/H5Study.WebApp/wwwroot/CssStudy/flex布局/index.html
new file mode 100644
index 0000000..800faf6
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/flex布局/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ 垂直剧中
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/01.宽高已知.单行居中.html b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/01.宽高已知.单行居中.html
new file mode 100644
index 0000000..e6494b9
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/01.宽高已知.单行居中.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+ 垂直居中-宽高已知-设置行高与高度相等
+
+
+
+
+
+
+
+
垂直居中:设置行高与高度相等
+
只适用于单行文本
+
+
+
+
+
+
+ 垂直与水平居中
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/Index.html b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/Index.html
new file mode 100644
index 0000000..9146184
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/Index.html
@@ -0,0 +1,159 @@
+
+
+
+
+
+
+
+ 垂直居中-目录
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/InfoBox.html b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/InfoBox.html
new file mode 100644
index 0000000..ad903ba
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/InfoBox.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ 信息框
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/css/box.css b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/css/box.css
new file mode 100644
index 0000000..6680cf6
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/CssStudy/垂直居中汇总/css/box.css
@@ -0,0 +1,165 @@
+/* 信息框样式 */
+
+/* #region 实现方式一 */
+/* 实现方式一:外层无边框等设置,框形由 "内上的左、上、右边框"、"内中的左与右边框"及 "内下的左、右、下边框" 组成 */
+.info-box {
+ --info-box-main-color:#6f42c1;
+ --info-box-text-color:#ffffff;
+ --info-box-body-bgcolor:#afa1c9;
+ --info-box-footer-bgcolor:#a78adc;
+
+ margin: 10px;
+ padding: 0;
+
+ font-size: 16px;
+ font-weight: bold;
+ color: var(--info-box-text-color);
+}
+
+.info-box .info-box-item {
+ box-sizing: border-box;
+ padding: 10px;
+}
+
+.info-box .info-box-header {
+ height: 50px;
+ line-height: 28px;
+ background-color: var(--info-box-main-color);
+
+ border-top: 2px solid var(--info-box-main-color);
+ border-left: 2px solid var(--info-box-main-color);
+ border-right: 2px solid var(--info-box-main-color);
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.info-box .info-box-body {
+ min-height: 200px;;
+ background-color: var(--info-box-body-bgcolor);
+
+ border-left: 2px solid var(--info-box-main-color);
+ border-right: 2px solid var(--info-box-main-color);
+}
+
+.info-box .info-box-footer {
+ height: 40px;
+ line-height: 18px;
+
+ background-color: var(--info-box-footer-bgcolor);
+ border-bottom: 2px solid var(--info-box-main-color);
+ border-left: 2px solid var(--info-box-main-color);
+ border-right: 2px solid var(--info-box-main-color);
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+/* #endregion */
+
+/* #region 实现方式二 */
+/* 实现方式二:框形由 外层边框形成,内上、内中、内下配合各相应角的形状 */
+.msg {
+ --msg-text-color:#ffffff;
+ --msg-main-color: green;
+ --msg-body-bgcolor:rgba(154, 176, 154, 0.726);
+ --msg-footer-bgcolor: rgb(98, 145, 98);
+
+ margin: 10px;
+ padding: 0;
+
+ /* 外层必须背景颜色且与连框颜色相同,否则四角稍内会有月牙形"漏洞" */
+ background-color: var(--msg-main-color);
+
+ border: 2px solid var(--msg-main-color);
+ border-radius: 10px;
+}
+
+.msg .msg-item {
+ color: var(--msg-text-color);
+ font-weight: bold;
+ padding-left: 10px;
+ padding-right: 10px;
+ box-sizing: border-box;
+}
+
+.msg .msg-header {
+ height: 50px;
+ line-height: 48px;
+ background-color: var(--msg-main-color);
+
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+
+ border-bottom: 2px solid var(--msg-main-color);
+}
+
+.msg .msg-body {
+ height: 200px;
+ background-color: var(--msg-body-bgcolor);
+
+ padding: 10px;
+}
+
+.msg .msg-footer {
+ height: 39px;
+ line-height: 38px;
+
+ background-color: var(--msg-footer-bgcolor);
+
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+/* #endregion */
+
+/* #region 默认信息框 */
+/* 默认信息框:基于"实现方式二" */
+.default-info {
+ --default-info-text-color:#000000;
+ --default-info-main-color: rgb(206, 212, 218);
+ --default-info-body-bgcolor:rgb(248, 249, 250);
+ --default-info-footer-bgcolor: rgb(233, 236, 239);
+
+ margin: 10px;
+ padding: 0;
+ /* 外层必须背景颜色且与连框颜色相同,否则四角稍内会有月牙形"漏洞" */
+ background-color: var(--default-info-main-color);
+
+ border: 2px solid var(--default-info-main-color);
+ border-radius: 10px;
+}
+
+.default-info-item {
+ color: var(--default-info-text-color);
+ font-weight: bold;
+
+ padding-left: 10px;
+ padding-right: 10px;
+
+ box-sizing: border-box;
+}
+
+.default-info-header {
+ height: 50px;
+ line-height: 50px;
+ background-color: var(--default-info-main-color);
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ border-bottom: 2px solid var(--default-info-main-color);
+}
+
+.default-info-body {
+ min-height: 200px;
+ background-color: var(--default-info-body-bgcolor);
+
+ padding: 10px;
+}
+
+.default-info-footer {
+ height: 40px;
+ line-height: 38px;
+ background-color: var(--default-info-footer-bgcolor);
+
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+
+ /* border-bottom: 2px solid (206, 212, 218); */
+}
+/* #endregion*/
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/H5Study/Index.html b/H5Study.WebApp/wwwroot/H5Study/Index.html
new file mode 100644
index 0000000..aa95ce3
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/H5Study/Index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ H5学习
+
+
+
+
+ H5学习
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/Import.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/Import.html
new file mode 100644
index 0000000..8b7b2fd
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/Import.html
@@ -0,0 +1,13 @@
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/ImportIframe.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/ImportIframe.html
new file mode 100644
index 0000000..85d5620
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/ImportIframe.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ 使用 iframe
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/Index.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/Index.html
new file mode 100644
index 0000000..5864895
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/Index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ 主页面
+
+
+
+
+
+
+ 经比较,使用js或jQuery库最方便!
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseIframe.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseIframe.html
new file mode 100644
index 0000000..08bb845
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseIframe.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ 使用 iframe
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseJquery.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseJquery.html
new file mode 100644
index 0000000..5a47fc3
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseJquery.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ 使用jQuery
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseJs.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseJs.html
new file mode 100644
index 0000000..f040d7d
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseJs.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ 使用js
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseLink.html b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseLink.html
new file mode 100644
index 0000000..5013314
--- /dev/null
+++ b/H5Study.WebApp/wwwroot/Html中引用html文件方法/UseLink.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ 使用 import
+
+
+
+
+
+
+
+
+ 使用Link.Import 内容区
+
+
+
+