feat: 添加项目
parent
c540d30fcd
commit
07a7b685a0
@ -0,0 +1,9 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net6.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
</Project>
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft.AspNetCore": "Warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"Logging": {
|
||||
"LogLevel": {
|
||||
"Default": "Information",
|
||||
"Microsoft.AspNetCore": "Warning"
|
||||
}
|
||||
},
|
||||
"AllowedHosts": "*"
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CH">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS 学习</title>
|
||||
<style>
|
||||
.container {
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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
|
||||
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>垂直剧中</title>
|
||||
<style>
|
||||
.outer{
|
||||
/* width: 850px; */
|
||||
/* height: 800px; */
|
||||
background-color: purple;
|
||||
text-align: center;
|
||||
/* vertical-align: middle; */
|
||||
/* box-sizing: border-box; */
|
||||
/* padding: 10px; */
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inner{
|
||||
width: 50px;
|
||||
/* height: 50px; */
|
||||
/* margin: 10px; */
|
||||
background-color: cadetblue;
|
||||
/* line-height: 50px; */
|
||||
/* box-sizing: border-box; */
|
||||
|
||||
/* flex-grow: 1; */
|
||||
}
|
||||
|
||||
.inner1 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
.inner2 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
.inner3 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
.inner4 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
.inner5 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
.inner6 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
.inner7 {
|
||||
/* height: 80px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner inner1">1</div>
|
||||
<div class="inner inner2">2</div>
|
||||
<div class="inner inner3">3</div>
|
||||
<div class="inner inner4">4</div>
|
||||
<div class="inner inner5">5</div>
|
||||
<div class="inner inner6">6</div>
|
||||
<div class="inner inner7">7</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<link rel="stylesheet" href="./css/box.css">
|
||||
<title>垂直居中-宽高已知-设置行高与高度相等</title>
|
||||
<style>
|
||||
.outer {
|
||||
height: 350px;
|
||||
background-color: purple;
|
||||
|
||||
margin: 10px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
background-color: skyblue;
|
||||
|
||||
border: 1px solid seagreen;
|
||||
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 信息框：解说 -->
|
||||
<div class="default-info ">
|
||||
<div class="default-info-item default-info-header">
|
||||
垂直居中-宽高已知-设置行高与高度相等
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
<p>垂直居中：设置行高与高度相等</p>
|
||||
<p>只适用于单行文本</p>
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
注意：行高要去掉 "边框与内边距", 如果存在的话
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<span class="inner">
|
||||
垂直与水平居中
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<link rel="stylesheet" href="./css/box.css">
|
||||
<title>垂直居中-目录</title>
|
||||
<style>
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
font-size: 20px;
|
||||
|
||||
border: 1px solid rebeccapurple;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.outer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 信息框：解说 -->
|
||||
<div class="default-info ">
|
||||
<div class="default-info-item default-info-header">
|
||||
垂直居中方法-目录
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
<ul class="outer">
|
||||
<li>
|
||||
<a href="https://blog.csdn.net/Ed7zgeE9X/article/details/123143498" target="_blank">11种垂直居中方法</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./01.宽高已知.单行居中.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
目录
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>信息框</title>
|
||||
<link rel="stylesheet" href="./css/box.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="info-box">
|
||||
<div class="info-box-item info-box-header">
|
||||
信息框标题
|
||||
</div>
|
||||
<div class="info-box-item info-box-body">
|
||||
信息框内容
|
||||
</div>
|
||||
<div class="info-box-item info-box-footer">
|
||||
信息框页脚
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-item msg-header">
|
||||
信息框标题
|
||||
</div>
|
||||
<div class="msg-item msg-body">
|
||||
信息框内容
|
||||
</div>
|
||||
<div class="msg-item msg-footer">
|
||||
信息框页脚
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default-info">
|
||||
<div class="default-info-item default-info-header">
|
||||
信息框标题
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
信息框内容
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
信息框页脚
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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*/
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>H5学习</title>
|
||||
<style>
|
||||
.container {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
H5学习
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,13 @@
|
||||
<!-- 此示例是html片断 -->
|
||||
<link rel="stylesheet" href="./css/Import.css">
|
||||
<div class="import-box">
|
||||
<h2>引入html文件</h2>
|
||||
<a href="#" onclick="window.top.location='./Index.html';">首页</a>
|
||||
<a href="#" onclick="window.top.location='./UseIframe.html';">使用 iframe</a>
|
||||
<a href="#" onclick="window.top.location='./UseObject.html';">使用 object</a>
|
||||
<a href="#" onclick="window.top.location='./UseLink.html';">使用 link</a>
|
||||
<a href="#">使用 bootstrap 等框架</a>
|
||||
<a href="#" onclick="window.top.location='./UseJs.html';">使用 js</a>
|
||||
<a href="#" onclick="window.top.location='./UseJquery.html';">使用 jquery</a>
|
||||
<a href="#">使用 动态网页技术</a>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>使用 iframe</title>
|
||||
</head>
|
||||
<body class="iframe-body">
|
||||
<link rel="stylesheet" href="css/Import.css">
|
||||
<div class="import-box">
|
||||
<h2>引入html文件</h2>
|
||||
<a href="#" onclick="window.top.location='./Index.html';">首页</a>
|
||||
<a href="#" onclick="window.top.location='./UseIframe.html';">使用 iframe</a>
|
||||
<a href="#" onclick="window.top.location='./UseObject.html';">使用 object</a>
|
||||
<a href="#" onclick="window.top.location='./UseLink.html';">使用 link</a>
|
||||
<a href="#">使用 bootstrap 等框架</a>
|
||||
<a href="#" onclick="window.top.location='./UseJs.html';">使用 js</a>
|
||||
<a href="#" onclick="window.top.location='./UseJquery.html';">使用 jquery</a>
|
||||
<a href="#">使用 动态网页技术</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>使用 iframe</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<iframe
|
||||
name="content_frame"
|
||||
src="ImportIframe.html" >
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>iframe 内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>使用jQuery</title>
|
||||
<link rel="stylesheet" href="./css/app.css">
|
||||
<script src="./jquery/jquery-3.6.4.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".import-box").load("./Import.html");
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<div class="import-box">
|
||||
加载中......
|
||||
</div>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>主页内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>使用js</title>
|
||||
<link rel="stylesheet" href="./css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<div class="import-box">
|
||||
加载中......
|
||||
</div>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>主页内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
fetch("./Import.html")
|
||||
.then(response=> response.text())
|
||||
.then(text=> document.getElementsByClassName("import-box")[0].innerHTML = text);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>使用 import</title>
|
||||
<link rel="stylesheet" href="./css/app.css">
|
||||
<link rel="stylesheet" href="./css/Import.css">
|
||||
<link rel="import" href="./Import.html" id="menu"></head>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<div class="import-box">
|
||||
<h2>加载失败了</h2>
|
||||
<a href="#" onclick="window.top.location='./Index.html';">首页</a>
|
||||
<a href="#" onclick="window.top.location='./UseIframe.html';">使用 iframe</a>
|
||||
<a href="#" onclick="window.top.location='./UseObject.html';">使用 object</a>
|
||||
<a href="#" onclick="window.top.location='./UseLink.html';">使用 link</a>
|
||||
<a href="#">使用 bootstrap 等框架</a>
|
||||
<a href="#" onclick="window.top.location='./UseJs.html';">使用 js</a>
|
||||
<a href="#" onclick="window.top.location='./UseJquery.html';">使用 jquery</a>
|
||||
<a href="#">使用 动态网页技术</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>使用Link.Import 内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<title>使用 Object</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu">
|
||||
<object
|
||||
type="text/x-scriptlet"
|
||||
data="./ImportIframe.html" >
|
||||
</object>
|
||||
</div>
|
||||
<div class="context">
|
||||
<span>使用 Object 内容区</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
body.iframe-body
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.import-box {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.import-box h2 {
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.import-box a {
|
||||
margin: 0 20px;
|
||||
padding: 5px 5px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
margin: 15px auto;
|
||||
padding: 15px;
|
||||
min-height: 400px;
|
||||
background-color: #aca8a8;
|
||||
border: 1px solid rebeccapurple;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-right: 10px;
|
||||
padding: 11px;
|
||||
width: 250px;
|
||||
background-color: #5ccb8c;
|
||||
border: 2px solid rebeccapurple;
|
||||
border-radius: 15px;
|
||||
|
||||
/*便于计算*/
|
||||
background-origin: border-box;
|
||||
}
|
||||
|
||||
iframe {
|
||||
overflow-clip-margin: content-box !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
object {
|
||||
overflow-clip-margin: content-box !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.context {
|
||||
width: calc(100% - 200px);
|
||||
padding: 10px;
|
||||
background-color: #7b96cf;
|
||||
border: 2px solid rebeccapurple;
|
||||
border-radius: 15px;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
|
||||
/*便于计算*/
|
||||
background-origin: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content:flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<link rel="stylesheet" href="./css/box.css">
|
||||
<title>垂直居中-目录</title>
|
||||
<style>
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
font-size: 20px;
|
||||
|
||||
border: 1px solid rebeccapurple;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.outer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 信息框：解说 -->
|
||||
<div class="default-info ">
|
||||
<div class="default-info-item default-info-header">
|
||||
垂直居中方法-目录
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
<ul class="outer">
|
||||
<li>
|
||||
<a href="https://blog.csdn.net/Ed7zgeE9X/article/details/123143498" target="_blank">11种垂直居中方法</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./垂直居中.宽高已知.1.行高与高度相等.html" target="_blank">宽高已知-单行</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
目录
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>信息框</title>
|
||||
<link rel="stylesheet" href="./css/box.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="info-box">
|
||||
<div class="info-box-item info-box-header">
|
||||
信息框标题
|
||||
</div>
|
||||
<div class="info-box-item info-box-body">
|
||||
信息框内容
|
||||
</div>
|
||||
<div class="info-box-item info-box-footer">
|
||||
信息框页脚
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-item msg-header">
|
||||
信息框标题
|
||||
</div>
|
||||
<div class="msg-item msg-body">
|
||||
信息框内容
|
||||
</div>
|
||||
<div class="msg-item msg-footer">
|
||||
信息框页脚
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="default-info">
|
||||
<div class="default-info-item default-info-header">
|
||||
信息框标题
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
信息框内容
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
信息框页脚
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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*/
|
||||
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<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.0">
|
||||
<link rel="stylesheet" href="./css/box.css">
|
||||
<title>垂直居中-宽高已知-设置行高与高度相等</title>
|
||||
<style>
|
||||
.outer {
|
||||
height: 350px;
|
||||
background-color: purple;
|
||||
|
||||
margin: 10px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
background-color: skyblue;
|
||||
|
||||
border: 1px solid seagreen;
|
||||
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 信息框：解说 -->
|
||||
<div class="default-info ">
|
||||
<div class="default-info-item default-info-header">
|
||||
垂直居中-宽高已知-设置行高与高度相等
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
<p>垂直居中：设置行高与高度相等</p>
|
||||
<p>只适用于单行文本</p>
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
注意：行高要去掉 "边框与内边距", 如果存在的话
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<span class="inner">
|
||||
垂直与水平居中
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Loading…
Reference in New Issue