1.百度網盤的目錄的切換
流程：建好相應的html two.html放在one.html目錄下 運行one.html 將百度網盤的圖片 圖標 放在img的目錄下即可（該圖都有一個例子做示範 ，只爲實現效果，非常簡單！！！！）
baidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/百度.png" width="100%">
<p>
<a href="one/one.html">
<img src="img/文件夾.png" width="60px">one
</a>
<a href="one/one.html">
<img src="img/文件夾.png" width="60px">two
</a>
</p>
<p>
</p>
</body>
</html>
one.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../img/百度.png">
<p>
<a href="../baidu.html">
<img src="../img/箭頭.png" width="25px">
</a>
</p>
<p>
<a href="two/two.html">
<img src="../img/文件夾.png">1
<img src="../img/文件夾.png">2
<img src="../img/文件夾.png">3
</a>
</p>
</body>
</html>
two.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../../img/百度.png">
<p>
<a href="../../baidu.html">
<img src="../../img/箭頭.png" width="25px">
</a>
</p>
<p>
<img src="../../img/文件夾.png">11
<img src="../../img/文件夾.png">22
<img src="../../img/文件夾.png">33
</p>
</body>
</html>
效果圖
2.表格的製作
所用的方法
流程：複製即可使用 方法用對即可
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h3>前端技術階段劃分</h3>
<table border="1px" cellspacing="0">
<col width="100px">
<tr align="center"><!-- 和下面的align的方法是一樣的-->
<td></td>
<td width="200px" align="center">初級</td>
<td width="200px" align="center">中級</td>
<td width="200px" align="center">高級</td>
<td width="200px" align="center">專級</td>
</tr>
<tr>
<td width="200px" align="center">標準</td>
<td width="200px" align="center">被產品懟的說不出話</td>
<td width="200px" align="center">跟產品互懟不相上下</td>
<td width="200px" align="center">懟的產品沒話說</td>
<td width="200px" align="center">直接將其懟辭職</td>
</tr>
<tr>
<td width="200px" align="center">用戶</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="200px" align="center">用戶A</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="200px" align="center">用戶B</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="200px" align="center">用戶c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
3.個人簡歷表格
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr height="40px">
<td colspan="7">個人簡歷</td>
</tr>
<tr height="40px" align="center">
<td>姓名</td>
<td></td>
<td>性別</td>
<td></td>
<td>年齡</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr height="40px" align="center">
<td>學歷</td>
<td></td>
<td>籍貫</td>
<td colspan="3"></td>
</tr>
<tr height="40px" align="center">
<td>電話</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr height="40px" align="center">
<td>畢業院校</td>
<td colspan="5"></td>
</tr>
<tr height="40px" align="center">
<td>求職意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
效果圖
補充關於嵌套。。。。。。。。
