Bootstrap
/
BootstapStudy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0bc5252708'
${ noResults }
BootstapStudy/BlazorStudy.BootstrapLatest/wwwroot/study/当flex布局遇到自动margin/使用html.ipynb

450 lines
14 KiB
Plaintext
Raw Normal View History Unescape Escape

feat: html文档中引用其它html文档
1 year ago
{
"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"在笔记本中使用 Hmtl\n",
"==========================="
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"> 特别注意：css里的样式，可能影响整个笔记本，比如说给html元素添加背景，整个笔记文档背景都变了！可以变相设置整个笔记文档了。"
]
},
{
"cell_type": "code",
"execution_count": 46,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
},
"vscode": {
"languageId": "polyglot-notebook"
}
},
"outputs": [
{
"data": {
"text/html": [
"<!DOCTYPE html>\r\n",
"<html lang=\"en\">\r\n",
"<head>\r\n",
" <meta charset=\"UTF-8\">\r\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n",
" <title>当flex布局遇到自动margin</title>\r\n",
" <link rel=\"stylesheet\" href=\"./index.css\">\r\n",
" <style>\r\n",
" /*#region*/\r\n",
" .container {\r\n",
" width: 800px;\r\n",
" min-height: 400px;\r\n",
" margin: 20px auto;\r\n",
"\r\n",
" background-color: rgb(132, 121, 110);\r\n",
"\r\n",
" display: flex;\r\n",
" }\r\n",
"\r\n",
" .item {\r\n",
" text-align: center;\r\n",
" font-size: 30px;\r\n",
" }\r\n",
"\r\n",
" /* 子项的宽高\r\n",
" 是精心设计过的，大小不一、有无设置不同，只有这样才能测试出各种情况。统一宽高的情况下，变得简单了却难以测试。\r\n",
" */\r\n",
"\r\n",
" /* 子项的文本内容\r\n",
" 也是精心设计过的，x便于观察基线(baseline)、g下部凸出、j是全高字符等，便于测试，否则aling-itme:baseline等测试不出来效果。\r\n",
" */\r\n",
" .item1 {\r\n",
" height: 150px;\r\n",
"\r\n",
" background-color: blueviolet;\r\n",
" }\r\n",
"\r\n",
" .item2 {\r\n",
" /* width: 200px;\r\n",
" height: 200px; */\r\n",
"\r\n",
" background-color: green;\r\n",
" }\r\n",
"\r\n",
" .item3 {\r\n",
" font-size: 100px;\r\n",
" width: 250px;\r\n",
" height: 150px;\r\n",
" background-color: skyblue;\r\n",
" }\r\n",
"\r\n",
" .item4 {\r\n",
" width: 200px;\r\n",
" height: 200px;\r\n",
"\r\n",
" background-color: coral;\r\n",
" }\r\n",
"\r\n",
" .item5 {\r\n",
" width: 200px;\r\n",
" height: 100px;\r\n",
" background-color: deeppink;\r\n",
" }\r\n",
"\r\n",
" .item6 {\r\n",
" background-color: forestgreen;\r\n",
" }\r\n",
"\r\n",
" .item7 {\r\n",
" width: 200px;\r\n",
" height: 120px;\r\n",
" background-color: saddlebrown;\r\n",
" }\r\n",
"\r\n",
" .item2::after,.item6::after {\r\n",
" content: \"无高\";\r\n",
" }\r\n",
"\r\n",
" .item1::after,.item4::after {\r\n",
" content: \"无宽\";\r\n",
" \r\n",
" }\r\n",
" /* #endregion */\r\n",
" </style>\r\n",
"</head>\r\n",
"<body>\r\n",
" <div class=\"container\">\r\n",
" <div class=\"item item1\">x</div>\r\n",
" <div class=\"item item2\">x</div>\r\n",
" <div class=\"item item3\">\r\n",
" xgj3\r\n",
" </div>\r\n",
" </div>\r\n",
"\r\n",
" <div class=\"container\">\r\n",
" <div class=\"item item1\">x</div>\r\n",
" <div class=\"item item2\">x</div>\r\n",
" <div class=\"item item3\">\r\n",
" xgj3\r\n",
" </div>\r\n",
"\r\n",
" <div class=\"item item4\">x</div>\r\n",
"\r\n",
" <div class=\"item item5\">\r\n",
" xgj5\r\n",
" </div>\r\n",
"\r\n",
" <div class=\"item item6\">x</div>\r\n",
"\r\n",
" <div class=\"item item7\">\r\n",
" xgj7\r\n",
" </div>\r\n",
" </div>\r\n",
" <script src=\"./index.js\"></script>\r\n",
" <script>\r\n",
" console.log('hello from JavaScript!');\r\n",
" </script>\r\n",
"</body>\r\n",
"</html>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"<!DOCTYPE html>\n",
"<html lang=\"en\">\n",
"<head>\n",
" <meta charset=\"UTF-8\">\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <title>当flex布局遇到自动margin</title>\n",
" <link rel=\"stylesheet\" href=\"./index.css\">\n",
" <style>\n",
" /*#region*/\n",
" .container {\n",
" width: 800px;\n",
" min-height: 400px;\n",
" margin: 20px auto;\n",
"\n",
" background-color: rgb(132, 121, 110);\n",
"\n",
" display: flex;\n",
" }\n",
"\n",
" .item {\n",
" text-align: center;\n",
" font-size: 30px;\n",
" }\n",
"\n",
" /* 子项的宽高\n",
" 是精心设计过的，大小不一、有无设置不同，只有这样才能测试出各种情况。统一宽高的情况下，变得简单了却难以测试。\n",
" */\n",
"\n",
" /* 子项的文本内容\n",
" 也是精心设计过的，x便于观察基线(baseline)、g下部凸出、j是全高字符等，便于测试，否则aling-itme:baseline等测试不出来效果。\n",
" */\n",
" .item1 {\n",
" height: 150px;\n",
"\n",
" background-color: blueviolet;\n",
" }\n",
"\n",
" .item2 {\n",
" /* width: 200px;\n",
" height: 200px; */\n",
"\n",
" background-color: green;\n",
" }\n",
"\n",
" .item3 {\n",
" font-size: 100px;\n",
" width: 250px;\n",
" height: 150px;\n",
" background-color: skyblue;\n",
" }\n",
"\n",
" .item4 {\n",
" width: 200px;\n",
" height: 200px;\n",
"\n",
" background-color: coral;\n",
" }\n",
"\n",
" .item5 {\n",
" width: 200px;\n",
" height: 100px;\n",
" background-color: deeppink;\n",
" }\n",
"\n",
" .item6 {\n",
" background-color: forestgreen;\n",
" }\n",
"\n",
" .item7 {\n",
" width: 200px;\n",
" height: 120px;\n",
" background-color: saddlebrown;\n",
" }\n",
"\n",
" .item2::after,.item6::after {\n",
" content: \"无高\";\n",
" }\n",
"\n",
" .item1::after,.item4::after {\n",
" content: \"无宽\";\n",
" \n",
" }\n",
" /* #endregion */\n",
" </style>\n",
"</head>\n",
"<body>\n",
" <div class=\"container\">\n",
" <div class=\"item item1\">x</div>\n",
" <div class=\"item item2\">x</div>\n",
" <div class=\"item item3\">\n",
" xgj3\n",
" </div>\n",
" </div>\n",
"\n",
" <div class=\"container\">\n",
" <div class=\"item item1\">x</div>\n",
" <div class=\"item item2\">x</div>\n",
" <div class=\"item item3\">\n",
" xgj3\n",
" </div>\n",
"\n",
" <div class=\"item item4\">x</div>\n",
"\n",
" <div class=\"item item5\">\n",
" xgj5\n",
" </div>\n",
"\n",
" <div class=\"item item6\">x</div>\n",
"\n",
" <div class=\"item item7\">\n",
" xgj7\n",
" </div>\n",
" </div>\n",
" <script src=\"./index.js\"></script>\n",
" <script>\n",
" console.log('hello from JavaScript!');\n",
" </script>\n",
"</body>\n",
"</html>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 测试下"
]
},
{
"cell_type": "code",
"execution_count": 64,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
},
"vscode": {
"languageId": "polyglot-notebook"
}
},
"outputs": [
{
"data": {
"text/html": [
"<!DOCTYPE html>\r\n",
"<html lang=\"en\">\r\n",
"<head>\r\n",
" <meta charset=\"UTF-8\">\r\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n",
" <title>当flex布局遇到自动margin</title>\r\n",
" <link rel=\"stylesheet\" href=\"./index.css\">\r\n",
" <style>\r\n",
" /* #region */\r\n",
" .container {\r\n",
" width: 800px;\r\n",
" min-height: 400px;\r\n",
" margin: 20px auto;\r\n",
"\r\n",
" background-color: rgb(132, 121, 110);\r\n",
"\r\n",
" display: flex;\r\n",
" }\r\n",
"\r\n",
" .item {\r\n",
" text-align: center;\r\n",
" font-size: 30px;\r\n",
" }\r\n",
"\r\n",
" /* 子项的宽高\r\n",
" 是精心设计过的，大小不一、有无设置不同，只有这样才能测试出各种情况。统一宽高的情况下，变得简单了却难以测试。\r\n",
" */\r\n",
"\r\n",
" /* 子项的文本内容\r\n",
" 也是精心设计过的，x便于观察基线(baseline)、g下部凸出、j是全高字符等，便于测试，否则aling-itme:baseline等测试不出来效果。\r\n",
" */\r\n",
" .item1 {\r\n",
" height: 150px;\r\n",
"\r\n",
" background-color: blueviolet;\r\n",
" }\r\n",
"\r\n",
" .item2 {\r\n",
" /* width: 200px;\r\n",
" height: 200px; */\r\n",
"\r\n",
" background-color: green;\r\n",
" }\r\n",
"\r\n",
" .item3 {\r\n",
" font-size: 100px;\r\n",
" width: 250px;\r\n",
" height: 150px;\r\n",
" background-color: skyblue;\r\n",
" }\r\n",
"\r\n",
" .item4 {\r\n",
" width: 200px;\r\n",
" height: 200px;\r\n",
"\r\n",
" background-color: coral;\r\n",
" }\r\n",
"\r\n",
" .item5 {\r\n",
" width: 200px;\r\n",
" height: 100px;\r\n",
" background-color: deeppink;\r\n",
" }\r\n",
"\r\n",
" .item6 {\r\n",
" background-color: forestgreen;\r\n",
" }\r\n",
"\r\n",
" .item7 {\r\n",
" width: 200px;\r\n",
" height: 120px;\r\n",
" background-color: saddlebrown;\r\n",
" }\r\n",
"\r\n",
" .item2::after,.item6::after {\r\n",
" content: \"无高\";\r\n",
" }\r\n",
"\r\n",
" .item1::after,.item4::after {\r\n",
" content: \"无宽\";\r\n",
" \r\n",
" }\r\n",
" /* #endregion */\r\n",
" </style>\r\n",
"</head>\r\n",
"<body>\r\n",
" <div class=\"container\">\r\n",
" <div class=\"item item1\">x</div>\r\n",
" <div class=\"item item2\">x</div>\r\n",
" <div class=\"item item3\">\r\n",
" xgj3\r\n",
" </div>\r\n",
" </div>\r\n",
"\r\n",
" <div class=\"container\">\r\n",
" <div class=\"item item1\">x</div>\r\n",
" <div class=\"item item2\">x</div>\r\n",
" <div class=\"item item3\">\r\n",
" xgj3\r\n",
" </div>\r\n",
"\r\n",
" <div class=\"item item4\">x</div>\r\n",
"\r\n",
" <div class=\"item item5\">\r\n",
" xgj5\r\n",
" </div>\r\n",
"\r\n",
" <div class=\"item item6\">x</div>\r\n",
"\r\n",
" <div class=\"item item7\">\r\n",
" xgj7\r\n",
" </div>\r\n",
" </div>\r\n",
" <script src=\"./index.js\"></script>\r\n",
"</body>\r\n",
"</html>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"#!import ./index.html"
]
}
],
"metadata": {
"language_info": {
"name": "python"
},
"orig_nbformat": 4
},
"nbformat": 4,
"nbformat_minor": 2
}