fengchuanyu 10 months ago
parent
commit
37fb32d165
3 changed files with 142 additions and 14 deletions
  1. 1 1
      2_css/12_浮动.html
  2. 21 13
      2_css/13_解决浮动问题.html
  3. 120 0
      2_css/练习11_个人简历table版.html

+ 1 - 1
2_css/12_浮动.html

@@ -8,7 +8,7 @@
         div{
             width: 100px;
             height: 100px;
-            float: left;
+            float: right;
         }
         .box1{
             background-color: blue;

+ 21 - 13
2_css/13_解决浮动问题.html

@@ -5,31 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
-        .box1{
-            border:1px solid black;
-            /* border-width: 1px;
-            border-style: solid;
-            border-color: black; */
+        .box{
+            border: 2px solid black;
             width: 300px;
-            height: 300px;
+            /* height: 300px; */
+            margin: 0 auto;
         }
-        .box2,.box3{
+        .box2{
             width: 100px;
             height: 100px;
-        }
-        .box2{
-            background-color: red;
+            border:2px solid blue;
         }
         .box3{
-            background-color: blue;
+            width: 100px;
+            height: 100px;
+            border:2px solid red;
+        }
+        .box2,.box3{
+            float: left;
+        }
+        p{
+            clear: both;
         }
+        /* span{
+            clear: both;
+        } */
     </style>
 </head>
 <body>
-    <div class="box1">
+    <div class="box">
         <div class="box2"></div>
         <div class="box3"></div>
-        <span>hello</span>
+        <!-- <span>hello</span> -->
+         <!-- <p>hello</p> -->
     </div>
 </body>
 </html>

+ 120 - 0
2_css/练习11_个人简历table版.html

@@ -0,0 +1,120 @@
+<!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 img{
+            width: 150px;
+        }
+        table{
+            border-collapse: collapse;
+            width: 1000px;
+            margin: 0 auto;
+        }
+        th,td{
+            border:1px solid #666;
+            padding: 10px;
+        }
+        th{
+            background-color: #007bff;
+            color: #fff;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+    <table>
+        <tbody>
+            <tr>
+                <td rowspan="5" width="150">
+                    <img src="./img/img3.png" alt="图片">
+                </td>
+                <th>个人信息</th>
+                <th>详情</th>
+            </tr>
+            <tr>
+                <td>姓名</td>
+                <td>[你的姓名]</td>
+            </tr>
+            <tr>
+                <td>联系方式</td>
+                <td>[你的电话或邮箱]</td>
+            </tr>
+            <tr>
+                <td>出生日期</td>
+                <td>[你的出生日期]</td>
+            </tr>
+            <tr>
+                <td>现居地址</td>
+                <td>[你的现居地址]</td>
+            </tr>
+            <tr>
+                <th height="150">个人简介</th>
+                <td colspan="2">具备丰富的前端开发经验,熟练掌握 HTML、CSS 和 JavaScript 等技术,对新技术充满热情,善于学习和解决问题。在工作中注重团队协作,能够高效完成任务。</td>
+            </tr>
+            <tr>
+                <th>教育背景</th>
+                <td colspan="2" style="padding: 20px;">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td width="400">[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            <tr>
+                                <td>[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            <tr>
+                                <td>[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            <tr>
+                                <td>[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+            <tr>
+                <th>工作经历</th>
+                <td colspan="2">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td width="400">[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            <tr>
+                                <td>[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            <tr>
+                                <td>[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            <tr>
+                                <td>[毕业院校 1]</td>
+                                <td>[专业名称 1] ([入学时间 1] - [毕业时间 1])</td>
+                            </tr>
+                            
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+            <tr>
+                <th>技能</th>
+                <td colspan="2">
+                    <ul>
+                        <li>熟练掌握 HTML5 和 CSS3 布局与样式设计,能够构建响应式和自适应网页。</li>
+                        <li>精通 JavaScript 编程,包括 ES6 及相关框架,如 Vue.js、React 等。</li>
+                    </ul>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+</html>