补充css
This commit is contained in:
parent
066b9f7ad2
commit
15f32e0e30
3
skills/html/README.md
Normal file
3
skills/html/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# HTML
|
||||
|
||||
vscode 插件: open in browser
|
BIN
skills/html/images/1.jpeg
Normal file
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
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
39
skills/html/index.css
Normal 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
109
skills/html/index.html
Normal 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>
|
@ -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">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="11" value="excutor(<div>aysnc executor)</div>" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="590" y="270" width="120" height="290" as="geometry"/>
|
||||
<mxCell id="11" value="excutor(<div>aysnc executor</div><div><br></div><div>event pool)</div>" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="591" y="270" width="120" height="290" as="geometry"/>
|
||||
</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">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
|
@ -46,7 +46,7 @@ var p1 = new Promise(testApiCall)
|
||||
|
||||
|
||||
// 异步等待
|
||||
// 一同步编程的方式,来实现异步代码
|
||||
// 以同步编程的方式,来实现异步代码
|
||||
var async_await = async () => {
|
||||
try {
|
||||
const resp = await p1
|
||||
|
Loading…
x
Reference in New Issue
Block a user