补充css

This commit is contained in:
yumaojun03 2025-07-20 17:26:00 +08:00
parent 066b9f7ad2
commit 15f32e0e30
7 changed files with 154 additions and 3 deletions

3
skills/html/README.md Normal file
View File

@ -0,0 +1,3 @@
# HTML
vscode 插件: open in browser

BIN
skills/html/images/1.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

BIN
skills/html/images/2.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

39
skills/html/index.css Normal file
View File

@ -0,0 +1,39 @@
/* p {
color: blue;
} */
/* . class */
.red {
color: red;
}
/* # 表示这是一个id选择器 */
#input01 {
width: 400px;
}
/* ul>li:first-child {
font-weight: 600;
} */
ul li:hover {
color: red;
font-size: 20px;
font-weight: 600;
}
img {
width: 220px;
height: 220px;
object-fit: cover; /* 裁剪成正方形 */
border-radius: 4px; /* 可选:圆角 */
margin: 10px;
}
.img-warppter {
height: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}

109
skills/html/index.html Normal file
View File

@ -0,0 +1,109 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./index.css" />
<!-- <style>
p {
color: blue;
}
</style> -->
</head>
<body>
<h1 id="title01">HTML 语法介绍</h1>
<p class="red">段落</p>
<p>段落</p>
<span class="red">文字A</span>
<br />
<span class="red">文字B</span>
<br />
<form action="demo_form.php" method="get">
First name: <input id="input01" type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
</form>
<iframe
src="https://www.baidu.com"
style="width: 800px; height: 400"
></iframe>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<div style="width: 400px; height: 400; background-color: aqua">
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<br />
<p>这是一个段落</p>
</div>
<hr />
<div style="width: 400px; height: 400; background-color: aqua">
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<br />
<p>这是一个段落</p>
</div>
<span>span1</span>
<span>span2</span>
<br />
<ul id="list_menu" class="ul_class">
<li id="coffee">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<div>
<li>绿茶</li>
<li>红茶</li>
</div>
</ul>
<div class="img-warppter">
<img src="./images/1.jpeg" alt="" />
<img src="./images/2.jpeg" alt="" />
<img src="./images/1.jpeg" alt="" />
</div>
<script>
document.getElementById("title01").style.color = "red";
</script>
</body>
</html>

View File

@ -42,8 +42,8 @@
<mxCell id="15" style="edgeStyle=none;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="8"> <mxCell id="15" style="edgeStyle=none;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="8">
<mxGeometry relative="1" as="geometry"/> <mxGeometry relative="1" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="11" value="excutor(&lt;div&gt;aysnc executor)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> <mxCell id="11" value="excutor(&lt;div&gt;aysnc executor&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;event pool)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="590" y="270" width="120" height="290" as="geometry"/> <mxGeometry x="591" y="270" width="120" height="290" as="geometry"/>
</mxCell> </mxCell>
<mxCell id="12" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.017;entryY=0.31;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="7" target="11"> <mxCell id="12" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.017;entryY=0.31;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="7" target="11">
<mxGeometry relative="1" as="geometry"/> <mxGeometry relative="1" as="geometry"/>

View File

@ -46,7 +46,7 @@ var p1 = new Promise(testApiCall)
// 异步等待 // 异步等待
// 同步编程的方式,来实现异步代码 // 同步编程的方式,来实现异步代码
var async_await = async () => { var async_await = async () => {
try { try {
const resp = await p1 const resp = await p1