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 Blame History Unescape Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{
"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
}
Reference in New Issue View Git Blame Copy Permalink