{ "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 }