landaiqing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing
2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
Html-practice/01-表格练习.html Normal file
View File

@@ -0,0 +1,262 @@
<!-- 作者:landaiqing
时间:2023.3.2-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习1</title>
<style>
body{
font-family: 仿宋
/* font-family:"Microsoft Yahei"; */
}
#main {
width: 800px;
height: 1000px;
margin: auto;
/* display:flex; */
align-items:center;
/* background-color: aliceblue; */
border: 1px solid black;
}
#all{
/* background-color: aquamarine; */
width: 700px;
height: 1000px;
margin: auto;
display:flex;
align-items:center;
}
.top {
/* background-color: aqua; */
width: 230px;
height: 50px;
top: 0;
left: 0;
right: 0;
/* bottom: 0; */
margin: auto;
position: absolute;
}
.info{
/* background-color: aqua; */
width: 600px;
height:20px;
/* bottom: 0; */
text-align: center;
top: 30px;
left: 0;
right: 0;
/* bottom: 0; */
margin: auto;
position: absolute;
display:flex;
align-items:center;
}
table {
border-collapse: collapse;
border: 1px solid #000;
/* table-layout: fixed; */
width: 100%;
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
}
.tables{
top: 50px;
/* top: 50px;
left: 350px;
right: 0;
bottom: 0; */
margin:0, auto;
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<div id="all">
<div class="top">
<font size="6">健康检查登记表</font>
</div>
<div class="info">
<h4>体检时间 &nbsp &nbsp&nbsp&nbsp年 &nbsp&nbsp月 &nbsp&nbsp日 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp体检编号(20 &nbsp&nbsp年) &nbsp&nbsp号</h4>
</div>
<div class="tables">
<table border="1">
<tr>
<th style="width: 50px;height: 30px;">姓名</th>
<th style="width: 80px;height: 30px;"></th>
<th style="width: 60px">性别</th>
<th style="width: 60px;height: 30px;"></th>
<th>年龄</th>
<th style="width: 50px;height: 30px;"></th>
<th>婚否</th>
<th style="width: 70px;height: 30px;"></th>
<th>籍贯</th>
<th style="width: 50px;height: 30px;"></th>
<td style="width: 104px;text-align: center;" rowspan="5">相<br><br>片<br><br><br><br><span style="font-size: 5px;">医院骑缝章</span></td>
</tr>
<tr>
<th style="width: 50px;height: 30px;">住址</th>
<th colspan="3"></th>
<!-- <th style="width: 120px;height: 30px;" ></th> -->
<th style="width: 80px;height: 30px;">所属单位</th>
<!-- <th style="width: 80px;height: 30px;"></th> -->
<th colspan="5"></th>
</tr>
<tr>
<th colspan="4" style="width: 50px;height: 30px; text-align: left;">既往史及家族史</th>
<th colspan="6" style="width: 50px;height: 30px;text-align: left;">家庭住址</th>
</tr>
<tr>
<th colspan="10" style="width: 50px;height: 30px;text-align: left;">身份证号码</th>
</tr>
<tr>
<td rowspan="24" style="font-size: 35px;text-align: center;">体<br>格<br>检<br>查</td>
<th style="height: 20px;text-align: left;" colspan="9">既往病史:</th>
<tr>
<th rowspan="9" style="width: 20px;">内<br>科</th>
<td colspan="2" style="width: 70px;">身高&nbsp&nbsp&nbsp&nbspcm</td>
<td colspan="2" style="width: 90px;">体重&nbsp&nbsp&nbsp&nbsp&nbspkg</td>
<td colspan="3" style="width: 110px;">心率&nbsp&nbsp&nbsp&nbsp次/分</td>
<td colspan="3" style="width: 80px;">血压&nbsp&nbsp&nbsp&nbspmmHg</td>
</tr>
<tr>
<td colspan="1">发育</td>
<td colspan="3"></td>
<td colspan="1">营养</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="10">头颈部&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp甲状腺&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp淋巴腺</td>
</tr>
<tr>
<td colspan="1">胸部</td>
<td colspan="8"></td>
</tr>
<tr>
<td colspan="2">心脏,血管</td>
<td colspan="5"></td>
<th colspan="2" rowspan="5" style="text-align: left;">医生意见:<br><br><br><br>签名:</th>
</tr>
<tr>
<td colspan="2">肺</td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="2">腹部</td>
<td colspan="5">脾肝</td>
</tr>
<tr>
<td colspan="2">神经系统</td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="2">其他</td>
<td colspan="5"></td>
</tr>
<tr>
<th rowspan="9">五<br>官<br>科</th>
<tr>
<th rowspan="3">视<br>力</th>
<tr>
<td colspan="2">裸<br>视</td>
<td colspan="2">左<br>右</td>
<td colspan="2">沙<br>眼</td>
<th colspan="2" rowspan="7" style="text-align: left;">医师意见:<br><br><br><br><br><br><br><br><br>签名:</th>
</tr>
<tr>
<td>矫<br>正<br>视<br>力</td>
<td colspan="1">左<br>右</td>
<td colspan="2">分<br>辨<br>力</td>
<td colspan="2" style="text-align: center;">正常<br>色音<br>色弱</td>
</tr>
</tr>
<tr>
<th rowspan="2">耳</th>
<tr>
<td>听<br>力</td>
<td colspan="1">左<br>右</td>
<td colspan="2">耳<br>疾</td>
<td colspan="2"></td>
</tr>
</tr>
<tr>
<th rowspan="2">鼻</th>
<tr>
<td colspan="2"></td>
<td colspan="2">喉</td>
<td colspan="5"></td>
</tr>
</tr>
<tr>
<td style="text-align: center;">口腔</td>
<td colspan="2"></td>
<td colspan="2">齿</td>
<td colspan="5"></td>
</tr>
</tr>
<tr>
<th rowspan="5">外<br>科</th>
<tr>
<td colspan="1" style="font-size: 10px;">脊柱和四肢</td>
<td colspan="6"></td>
<th colspan="2" rowspan="4" style="text-align: left;">医师意见:<br><br><br><br>签名:</th>
</tr>
<tr>
<td colspan="1" style="font-size: 10px;">肛门和外生殖器官</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="1" style="font-size: 10px;">皮肤疾患</td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="1" style="font-size: 10px;">其他</td>
<td colspan="6"></td>
</tr>
</tr>
</tr>
<tr>
<th>实<br>验<br>室<br>检<br>查</th>
<td colspan="10"></td>
</tr>
<tr>
<th>X<br>光</th>
<td colspan="10"></td>
</tr>
<tr>
<th>心<br>电<br>图</th>
<td colspan="10"></td>
</tr>
<tr>
<th>结<br><br>论</th>
<td colspan="10"><br>
<br>
<br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp年&nbsp&nbsp月&nbsp&nbsp日&nbsp&nbsp&nbsp&nbsp&nbsp医务主管签名:
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

134
Html-practice/02-表格练习.html Normal file
View File

@@ -0,0 +1,134 @@
<!-- 作者:landaiqing
时间:2023.3.2
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习2</title>
<style>
body{
font-family: 仿宋
}
#main{
width: 600px;
height: 650px;
margin: auto;
display:flex;
align-items:center;
/* background-color: aliceblue; */
border: 1px solid black;
}
#all{
/* background-color: aquamarine; */
width: 500px;
height: 650px;
margin: auto;
display:flex;
align-items:center;
}
.top {
/* background-color: aqua; */
width: 230px;
height: 50px;
top: 10px;
left: 0;
right: 0;
/* bottom: 0; */
margin: auto;
position: absolute;
text-align: center;
}
table {
border-collapse: collapse;
border: 1px solid #19ab98;
/* table-layout: fixed; */
width: 100%;
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
}
.tables{
top: 50px;
/* top: 50px;
left: 350px;
right: 0;
bottom: 0; */
margin:0, auto;
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<div id="all">
<div class="top">
<font size="6">个&nbsp人&nbsp简&nbsp历</font>
</div>
<div class="tables">
<table border="1">
<tr>
<th style="width: 80px;">姓名</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">性别</th>
<th style="width: 100px;height: 40px;"></th>
<td rowspan="5" style="width: 125px;"></td>
</tr>
<tr>
<th style="width: 80px;">出生年月</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">身高</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">籍贯</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">民族</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">政治面貌</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">毕业院校</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">学历</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">专业</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">联系电话</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">电子邮件</th>
<th style="width: 100px;height: 40px;" colspan="2"></th>
</tr>
<tr>
<th style="width: 80px;height: 100px;">具备技能</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
<tr>
<th style="width: 80px;height: 100px;">个人评价</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
<tr>
<th style="width: 80px;height: 50px;">爱好特长</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
<tr>
<th style="width: 80px;height: 50px;">实习经历</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

333
Html-practice/03-表格练习.html Normal file
View File

@@ -0,0 +1,333 @@
<!-- 作者:landaiqing
时间:2023.3.3
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习3</title>
<style>
body{
font-family: 楷体
}
#main {
width: 600px;
height: 750px;
margin: auto;
display:flex;
align-items:center;
/* background-color: aliceblue; */
border: 1px solid black;
}
#all{
/* background-color: aquamarine; */
width: 500px;
height: 700px;
margin: auto;
display:flex;
align-items:center;
}
.top {
/* background-color: aqua; */
width: 250px;
height: 70px;
top: 0;
left: 0;
right: 0;
/* bottom: 0; */
margin: auto;
position: absolute;
text-align: center;
}
table {
border-collapse: collapse;
border: 1px solid #ff0000;
top: 1px;
width: 100%;
margin:0, auto;
position: absolute;
}
.tables{
/* background-color: gray; */
height: 600px;
width: 500px;
top: 100px;
margin:0, auto;
position: absolute;
border: 2px solid red;
}
.table_2{
margin:0, auto;
position: absolute;
top: 52px;
text-align: left;
}
.table_3{
margin:0, auto;
position: absolute;
top: 209px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 166.6px;
}
.table_4{
margin:0, auto;
position: absolute;
top: 209px;
left: 166.6px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 166.6px;
}
.table_5{
margin:0, auto;
position: absolute;
top: 209px;
left: 333.2px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 167px;
}
.table_6{
margin:0, auto;
position: absolute;
top: 300px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 210px;
}
.table_7{
margin:0, auto;
position: absolute;
top: 300px;
left: 210px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 140px;
}
.table_8{
margin:0, auto;
position: absolute;
top: 300px;
left: 350px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 150px;
}
.table_9{
margin:0, auto;
position: absolute;
top: 450px;
text-align: center;
color: red;
border: 1.5px solid red;
height: 149px;
}
</style>
</head>
<body>
<div id="main">
<div id="all">
<div class="top">
<font size="6"><h4 style="color: red;">账簿使用登记表<h4></font>
</div>
<div class="tables">
<table border="1" class="table_1">
<tr>
<th style="width: 130px; color: red; font-size: 20px;">单位名称</th>
<th style="width: 363px;height: 50px;">呼伦贝尔安泰基电有限责任公司东海拉尔发电厂</th>
</tr>
</table>
<table border="1" class="table_2">
<tr>
<td rowspan="5" style="width: 40px;text-align: center;color: red;font-size: 20px;">本<br><br>账<br><br>簿</td>
<tr>
<th style="width: 87.5px;text-align: center;color: red; height: 30px;" >名称</th>
<th>银行存款</th>
</tr>
<tr>
<th style="text-align: center;color: red;height: 30px;">景次</th>
<th style="color: red;">第<span style="color: black;">&nbsp&nbsp二&nbsp&nbsp</span>景</th>
</tr>
<tr>
<th style="text-align: center;color: red;height: 30px;">页数</th>
<th style="color: red;">第<span style="color: black;">&nbsp0012&nbsp</span>号至第<span style="color: black;">&nbsp0126&nbsp</span>号共计<span style="color: black;">&nbsp&nbsp115&nbsp&nbsp</span>页</th>
</tr>
<tr>
<th style="text-align: center;color: red;">使用起<br>始日期</th>
<th style="color: red;">自&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">1</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">1</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp起<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">2019</span>&nbsp&nbsp&nbsp&nbsp年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp月&nbsp&nbsp&nbsp&nbsp&nbsp日<br>至&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">12</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">31</span>&nbsp&nbsp&nbsp&nbsp&nbsp止</th>
</tr>
</tr>
</table>
<table border="1" class="table_3">
<tr>
<th style="width: 166.6px;" colspan="2">单 位 负 责</th>
<tr>
<th style="width: 110px;">姓 &nbsp名</th>
<th>盖章</th>
</tr>
<tr>
<th style="height: 45px;"></th>
<th></th>
</tr>
</tr>
</table>
<table border="1" class="table_4">
<tr>
<th style="width: 166.6px;" colspan="2">主 管 会 计</th>
<tr>
<th style="width: 110px;">姓 &nbsp名</th>
<th>盖 章</th>
</tr>
<tr>
<th style="height: 45px;"></th>
<th></th>
</tr>
</tr>
</table>
<table border="1" class="table_5">
<tr>
<th style="width: 166.6px;" colspan="2">记 &nbsp&nbsp&nbsp账</th>
<tr>
<th style="width: 110px;">姓 &nbsp名</th>
<th>盖 章</th>
</tr>
<tr>
<th style="height: 45px;"></th>
<th></th>
</tr>
</tr>
</table>
<table border="1" class="table_6">
<tr>
<td rowspan="6" style="width: 30px;">签<br>管<br>人<br>员<br>楼<br>交<br>记<br>录</td>
</tr>
<tr>
<th style="height: 40px;width: 40px;">职别</th>
<th>姓 名</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>
<table border="1" class="table_7">
<tr>
<th colspan="4">楼 &nbsp&nbsp管</th>
</tr>
<tr>
<th style="width: 35px;">年</th>
<th>月</th>
<th>日</th>
<th>盖章</th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 25px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
<table border="1" class="table_8">
<tr>
<th colspan="4">交 &nbsp&nbsp出</th>
</tr>
<tr>
<th style="width: 35px;">年</th>
<th>月</th>
<th>日</th>
<th>盖章</th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 25px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
<table border="1" class="table_9">
<tr>
<td style="width: 30px;">备<br><br><br>注</td>
<th style="width: 265px;"></th>
<td style="width: 30px;">单<br><br>位<br><br>公<br><br>章</td>
<th></th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

2710
Html-practice/04-HTML练习-开源中国首页.html Normal file
View File

File diff suppressed because it is too large Load Diff

195
Html-practice/05-felx布局练习.html Normal file
View File

@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局练习</title>
</head>
<style>
.main{
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
}
.exercise-1{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.exercise-2{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
align-content: space-around;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.exercise-3{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
justify-content: space-between;
}
.exercise-4{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
justify-content: space-between;
}
.exercise-5{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
justify-content: space-between;
}
.exercise-6{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
justify-content: space-between;
}
.exercise-7{
width: 500px;
height: 500px;
background-color: blue;
display: flex;
justify-content: space-between;
}
</style>
<body>
<div class="main">
<div class="exercise-1">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
<hr style="width: 100%;">
<div class="exercise-2">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
<hr style="width: 100%;">
<div class="exercise-3">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;align-self: flex-end;">
</div>
</div>
<hr style="width: 100%;">
<div class="exercise-4">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;align-self: center;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;align-self: flex-end;">
</div>
</div>
<hr style="width: 100%;">
<div class="exercise-5">
<div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
<div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
</div>
<hr style="width: 100%;">
<div class="exercise-6">
<div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
<div style="display: flex;align-content: center;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
<div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
</div>
<hr style="width: 100%;">
<div class="exercise-7">
<div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
<div style="display: flex;align-content: space-between;width: 150px;height: 500px;flex-wrap: wrap;">
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
<div style="width: 150px;height: 150px;background-color: aqua;">
</div>
</div>
</div>
</div>
</body>
</html>

3968
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/ChinaArea.xml Normal file
View File

File diff suppressed because it is too large Load Diff

7
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/css/index.css Normal file
View File

@@ -0,0 +1,7 @@
form {
text-align: center;
}
select {
width: 150px;
}

28
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./css/index.css" rel="stylesheet" type="text/css"/>
<script src="./js/index.js"></script>
<title>基于jQuery的AJAX实现三级联动菜单</title>
</head>
<body>
<div>
<form>
省份：
<select name="province" id="province" onchange="showCity()">
<option value="0">--请选择--</option>
</select>&nbsp;&nbsp; 城市：
<select name="city" id="city" onchange="showArea()">
<option value="0">--请选择--</option>
</select>&nbsp;&nbsp; 地区：
<select name="area" id="area">
<option value="0">--请选择--</option>
</select>
</form>
</div>
</body>
</html>

55
Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js Normal file
View File

@@ -0,0 +1,55 @@
var xmlDom = null;
$(function() {
showProvince();
});
function showProvince() {
//ajax去服务器把信息请求回来
//从中筛选省份信息并显示
$.get('./ChinaArea.xml', function(msg) {
xmlDom = msg;
//对服务器返回的xml信息处理
//需要从最大的XMLDocument结点获得province结点
//province是XMLDocunment的子节点
$(msg).find('province').each(function(k, v) {
//this代表每个province的dom对象
//获得省份的名称并显示给下拉列表
var nm = $(this).attr('province');
var id = $(this).attr('provinceID');
//给select追加option
$('#province').append('<option value="' + id + '">' + nm + '</option>');
});
}, 'xml');
}
//根据选择的省份选择显示城市
function showCity() {
//获取选取的省份的id信息
var twoPid = $('#province option:selected').val().substr(0, 2);
//清除旧的结点
$('#city').empty();
//获得选取省份下的城市信息
//限制条件，City标签，本身id前两位和省份id一致
//遍历City信息并显示到页面上
$(xmlDom).find('City[CityID^=' + twoPid + ']').each(function() {
var name = $(this).attr('City');
var id = $(this).attr('CityID');
$('#city').append('<option value="' + id + '">' + name + '</option>'); //追加
});
}
//显示区县的方法和上面的类似
function showArea() {
var fourPid = $('#city option:selected').val().substr(0, 4);
$('#area').empty();
$(xmlDom).find('Piecearea[PieceareaID^=' + fourPid + ']').each(function() {
var name = $(this).attr('Piecearea');
var id = $(this).attr('PieceareaID');
$('#area').append('<option value="' + id + '">' + name + '</option>');
});
}

BIN
Html-practice/imgs/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
Html-practice/imgs/手机 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 B

BIN
Html-practice/imgs/手机.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 B

BIN
Html-practice/imgs/搜索 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 771 B

BIN
Html-practice/imgs/搜索.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 763 B

67
Html-practice/jQuery/01-jQuery-表单验证.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/FormValidation.js"></script>
<link href="./css/FormValidation.css" rel="stylesheet" type="text/css"/>
<title>jQuery-表单验证</title>
</head>
<body>
<div class="main">
<form action="form">
<div class="container">
<div class="card">
<a class="singup">jQuery-表单验证</a>
<div class="inputBox">
<input type="text" required="required" class="Username">
<span class="info1">Username</span>
</div>
<div class="inputBox1">
<input type="text" required="required" class="Email">
<span class="info2">Email</span>
</div>
<div class="inputBox">
<input type="password" required="required" class="Password">
<span class="info3">Password</span>
</div>
<button class="enter">Enter</button>
</div>
</div>
</div>
</form>
</body>
<script>
$(function(){
$('.Username').blur(function () {
$('.Username').tooltip('userName');
})
$('.Email').blur(function () {
$('.Email').tooltip('email');
})
$('.Password').blur(function () {
$('.Password').tooltip('password');
})
})
</script>
</html>

116
Html-practice/jQuery/css/FormValidation.css Normal file
View File

@@ -0,0 +1,116 @@
.main{
display: flex;
justify-content: center;
align-items: center;
}
.singup {
color: #000;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
font-weight: bold;
font-size: x-large;
margin-top: 1.5em;
}
.card {
display: flex;
justify-content: center;
align-items: center;
min-height: 350px;
width: 300px;
flex-direction: column;
gap: 35px;
border-radius: 15px;
background: #e3e3e3;
box-shadow: 16px 16px 32px #c8c8c8,
-16px -16px 32px #fefefe;
border-radius: 8px;
}
.inputBox,
.inputBox1 {
position: relative;
width: 250px;
}
.inputBox input,
.inputBox1 input {
width: 100%;
padding: 10px;
outline: none;
border: none;
color: #000;
font-size: 1em;
background: transparent;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
transition: 0.1s;
border-bottom-left-radius: 8px;
}
.inputBox span,
.inputBox1 span {
margin-top: 5px;
position: absolute;
left: 0;
transform: translateY(-4px);
margin-left: 10px;
padding: 10px;
pointer-events: none;
font-size: 12px;
color: #000;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 3px;
border-radius: 8px;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
transform: translateX(113px) translateY(-15px);
font-size: 0.8em;
padding: 5px 10px;
background: #000;
letter-spacing: 0.2em;
color: #fff;
border: 2px;
}
.inputBox1 input:valid~span,
.inputBox1 input:focus~span {
transform: translateX(156px) translateY(-15px);
font-size: 0.8em;
padding: 5px 10px;
background: #000;
letter-spacing: 0.2em;
color: #fff;
border: 2px;
}
.inputBox input:valid,
.inputBox input:focus,
.inputBox1 input:valid,
.inputBox1 input:focus {
border: 2px solid #000;
border-radius: 8px;
}
.enter {
height: 45px;
width: 100px;
border-radius: 5px;
border: 2px solid #000;
cursor: pointer;
background-color: transparent;
transition: 0.5s;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 3em;
}
.enter:hover {
background-color: rgb(0, 0, 0);
color: white;
}

87
Html-practice/jQuery/js/FormValidation.js Normal file
View File

@@ -0,0 +1,87 @@
;(function ($) {
var methods = {
//用户名验证
userName : function() {
var success = "success";
var error = "Error";
var info = "UserName";
//这些方法里面的this指针已经被替换为了$(this)
var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
if (this.val()==''){
// $(".info1").css('color','#000');
$(".info1").show().html(info);
return;
}
else if (this.val().match(reg)) {
$(".info1").css('color','green');
// $(".info1").css('background','#fff');
$(".info1").show().html(success);
}
else {
$(".info1").css('color','red');
$(".info1").show().html(error);
}
},
// 密码验证
password : function( ) {
var success = "success";
var error = "Error";
var info = "Password";
var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;
if (this.val()==''){
// $(".info1").css('color','#000');
$(".info3").show().html(info);
return;
}
else if (this.val().match(reg)) {
$(".info3").css('color','green');
$(".info3").show().html(success);
}
else {
$(".info3").css('color','red');
$(".info3").show().html(error);
}
},
//邮箱验证
email : function( ) {
var success = "success";
var error = "Error";
var info = "Email";
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.val()==''){
// $(".info1").css('color','#000');
$(".info2").show().html(info);
return;
}
else if (this.val().match(reg)) {
$(".info2").css('color','green');
$(".info2").show().html(success);
}
else {
$(".info2").css('color','red');
$(".info2").show().html(error);
}
},
};
$.fn.tooltip = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})(jQuery);