fengchuanyu 9 mēneši atpakaļ
vecāks
revīzija
a8683f4c9c
2 mainītis faili ar 126 papildinājumiem un 0 dzēšanām
  1. 77 0
      1_html/5_表格.html
  2. 49 0
      2_css/练习10_个人简历.html

+ 77 - 0
1_html/5_表格.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        table{
+            /* 去除单元格之间间隙 */
+            border-collapse: collapse;
+        }
+        td,th{
+            border:1px solid black
+        }
+    </style>
+</head>
+<body>
+    <!-- 最外层table -->
+    <table>
+        <!--内层表头 thead -->
+        <thead>
+            <!-- tr 代表行 -->
+            <tr>
+                <!-- th 和 td 代表列 -->
+                <th>编号</th>
+                <th>姓名</th>
+                <th>年龄</th>
+                <th>学校</th>
+                <th>性别</th>
+            </tr>
+        </thead>
+        <!-- 内层表身 tbody -->
+        <tbody>
+            <tr>
+                <td rowspan="3">1</td>
+                <td>张三</td>
+                <td>20</td>
+                <!-- <td>黑大</td>
+                <td>男</td> -->
+                <td colspan="2">黑大</td>
+            </tr>
+            <tr>
+                
+                <td>张三</td>
+                <th>20</th>
+                <td>黑大</td>
+                <td>男</td>
+            </tr>
+            <tr>
+               
+                <td>
+                    <div>123</div>
+                </td>
+                <td>
+                    <ul>
+                        <li>1</li>
+                    </ul>
+                </td>
+                <td>
+                    <img src="logo.png" alt="">
+                </td>
+                <td>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td>1</td>
+                                <td>2</td>
+                                <td>3</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+</html>

+ 49 - 0
2_css/练习10_个人简历.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .container{
+            width: 600px;
+            border:1px solid #666;
+            padding: 20px;
+            margin:0 auto;
+            /* box-shadow: 0 0 5px #666; */
+            /* box-shadow: 0 0 5px rgb(0, 0, 0); */
+            box-shadow: 0 0 5px rgba(0, 0, 0,0.5);
+            /* rgba a代表透明度 取值范围0-1, 0完全透明, 1完全不透明 */
+
+        }
+        .container ul{
+            padding-left: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>个人简历</h2>
+        <p>姓名:[你的姓名]</p>
+        <p>联系方式:[你的电话或邮箱]</p>
+        <h4>个人简介</h4>
+        <p>具备丰富的前端开发经验,熟练掌握 HTML、CSS 和 JavaScript 等技术,对新技术充满热情,善于学习和解决问题。</p>
+        <h4>教育背景</h4>
+        <ul>
+            <li>[毕业院校] - [专业名称]([毕业时间])</li>
+            <li>[相关课程或学位信息]</li>
+        </ul>
+        <h4>工作经历</h4>
+        <ul>
+            <li>[公司名称] - [职位名称]([入职时间]-[离职时间])</li>
+            <li>[工作职责和成就]</li>
+        </ul>
+        <h4>技能</h4>
+        <ul>
+            <li>HTML5 和 CSS3 布局与样式设计</li>
+            <li>JavaScript 编程,包括 ES6 及相关框架</li>
+            <li>熟悉版本控制工具,如 Git</li>
+        </ul>
+    </div>
+</body>
+</html>