首頁 探索 說明
登入
lovecoding
/
Vip0525
10
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

html

e 11 月之前
父節點
fa669213b1
當前提交
8f6b7de7e1
共有 3 個文件被更改，包括 233 次插入 和 2 次删除
統一視圖 顯示文件統計
  1. 160 0
      html/3.简历排版.html
  2. 68 0
      html/4.表单标签.html
  3. 5 2
      html/２.标签.html

+ 160 - 0
html/3.简历排版.html
查看文件 

@@ -0,0 +1,160 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div style="width: 800px;margin: 0 auto;">
 
+        <h1>个人简历</h1>
 
+        <!-- 个人信息 -->
 
+        <div>
 
+            <h3>个人信息</h3>
 
+            <p>
 
+                <span>姓       名：  韦城城</span>
 
+                <!-- 特殊符号 半格  -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>电      话：  186-5106-7589</span>
 
+            </p>
 
+            <p>
 
+                <span>姓       名：  韦城城</span>
 
+                <!-- 特殊符号 半格  -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>电      话：  186-5106-7589</span>
 
+            </p>
 
+            <p>
 
+                <span>姓       名：  韦城城</span>
 
+                <!-- 特殊符号 半格  -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>电      话：  186-5106-7589</span>
 
+            </p>
 
+        </div>
 
+        <!-- 求职意向 -->
 
+        <div>
 
+            <h3>求职意向</h3>
 
+            <p>
 
+                <span>工作性质：  全职</span>
 
+                &nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>工作地区：  北京</span>
 
+            </p>
 
+            <p>
 
+                <span>工作性质：  全职</span>
 
+                &nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>工作地区：  北京</span>
 
+            </p>
 
+            <p>
 
+                <span>工作性质：  全职</span>
 
+                &nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>工作地区：  北京</span>
 
+            </p>
 
+        </div>
 
+        <!-- 个人技能 -->
 
+        <div>
 
+            <h3>个人技能</h3>
 
+            <ul type="circle">
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+                <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器；</li>
 
+            </ul>
 
+        </div>
 
+        <!-- 工作经历 -->
 
+        <div>
 
+            <h3>个人经历</h3>
 
+            <div>
 
+                <p style="font-size: 24px;">北京巨作网络科技有限公司<span style="font-size: 16px;">(2017.09 - 至今）</span></p>
 
+                <p>工作描述：</p>
 
+                <ol>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                </ol>
 
+            </div>
 
+            <div>
 
+                <p style="font-size: 24px;">北京巨作网络科技有限公司<span style="font-size: 16px;">(2017.09 - 至今）</span></p>
 
+                <p>工作描述：</p>
 
+                <ol type="I">
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                    <li>根据产品需求进行项目开发和功能实现，以及性能优化</li>
 
+                </ol>
 
+            </div>
 
+        </div>
 
+        <!-- 项目介绍 -->
 
+        <div>
 
+            <h3>项目介绍</h3>
 
+            <div>
 
+                <h4>巨作网(PC端)</h4>
 
+                <p>- 简介：</p>
 
+                <!-- text-indent: 2em 首行缩进两字符 -->
 
+                <p style="text-indent: 2em;">巨作网是一家软装服务提供商，致力于提供一款软装解决方案，以装饰公司，设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库；为用户提供与家具工厂沟通、交易的途径；帮助家具企业传播品牌形象。</p>
 
+                <p>- 职责：</p>
 
+                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此项目采用vue-cli+webpack进行项目的底层搭建，ElementUI实现页面排版，使用vue-router实现页面之间的跳转，完成单页面开发，使用axios请求数据，通过vuex保持数据持久化及数据的传递与管理，负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现图片的懒加载效果，根据页面要求完成搜索、切换、筛选等功能，对Js代码优化，组件化，多页面应用，后期的代码维护和更新。</p>
 
+            </div>
 
+            <div>
 
+                <h4>巨作网(PC端)</h4>
 
+                <p>- 简介：</p>
 
+                <!-- text-indent: 2em 首行缩进两字符 -->
 
+                <p style="text-indent: 2em;">巨作网是一家软装服务提供商，致力于提供一款软装解决方案，以装饰公司，设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库；为用户提供与家具工厂沟通、交易的途径；帮助家具企业传播品牌形象。</p>
 
+                <p>- 职责：</p>
 
+                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此项目采用vue-cli+webpack进行项目的底层搭建，ElementUI实现页面排版，使用vue-router实现页面之间的跳转，完成单页面开发，使用axios请求数据，通过vuex保持数据持久化及数据的传递与管理，负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现图片的懒加载效果，根据页面要求完成搜索、切换、筛选等功能，对Js代码优化，组件化，多页面应用，后期的代码维护和更新。</p>
 
+            </div>
 
+            <div>
 
+                <h4>巨作网(PC端)</h4>
 
+                <p>- 简介：</p>
 
+                <!-- text-indent: 2em 首行缩进两字符 -->
 
+                <p style="text-indent: 2em;">巨作网是一家软装服务提供商，致力于提供一款软装解决方案，以装饰公司，设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库；为用户提供与家具工厂沟通、交易的途径；帮助家具企业传播品牌形象。</p>
 
+                <p>- 职责：</p>
 
+                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此项目采用vue-cli+webpack进行项目的底层搭建，ElementUI实现页面排版，使用vue-router实现页面之间的跳转，完成单页面开发，使用axios请求数据，通过vuex保持数据持久化及数据的传递与管理，负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现图片的懒加载效果，根据页面要求完成搜索、切换、筛选等功能，对Js代码优化，组件化，多页面应用，后期的代码维护和更新。</p>
 
+            </div>
 
+            <div>
 
+                <h4>巨作网(PC端)</h4>
 
+                <p>- 简介：</p>
 
+                <!-- text-indent: 2em 首行缩进两字符 -->
 
+                <p style="text-indent: 2em;">巨作网是一家软装服务提供商，致力于提供一款软装解决方案，以装饰公司，设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库；为用户提供与家具工厂沟通、交易的途径；帮助家具企业传播品牌形象。</p>
 
+                <p>- 职责：</p>
 
+                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此项目采用vue-cli+webpack进行项目的底层搭建，ElementUI实现页面排版，使用vue-router实现页面之间的跳转，完成单页面开发，使用axios请求数据，通过vuex保持数据持久化及数据的传递与管理，负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现图片的懒加载效果，根据页面要求完成搜索、切换、筛选等功能，对Js代码优化，组件化，多页面应用，后期的代码维护和更新。</p>
 
+            </div>
 
+            <div>
 
+                <h4>巨作网(PC端)</h4>
 
+                <p>- 简介：</p>
 
+                <!-- text-indent: 2em 首行缩进两字符 -->
 
+                <p style="text-indent: 2em;">巨作网是一家软装服务提供商，致力于提供一款软装解决方案，以装饰公司，设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库；为用户提供与家具工厂沟通、交易的途径；帮助家具企业传播品牌形象。</p>
 
+                <p>- 职责：</p>
 
+                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此项目采用vue-cli+webpack进行项目的底层搭建，ElementUI实现页面排版，使用vue-router实现页面之间的跳转，完成单页面开发，使用axios请求数据，通过vuex保持数据持久化及数据的传递与管理，负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现图片的懒加载效果，根据页面要求完成搜索、切换、筛选等功能，对Js代码优化，组件化，多页面应用，后期的代码维护和更新。</p>
 
+            </div>
 
+        </div>
 
+        <!-- 个人介绍 -->
 
+        <div>
 
+            <h3>个人介绍</h3>
 
+            <ol type="A">
 
+                <li>性格稳重、谦虚真诚、责任心强，有良好的沟通能力和团队合作能力</li>
 
+                <li>性格稳重、谦虚真诚、责任心强，有良好的沟通能力和团队合作能力</li>
 
+                <li>性格稳重、谦虚真诚、责任心强，有良好的沟通能力和团队合作能力</li>
 
+            </ol>
 
+        </div>
 
+        <!-- 教育经历 -->
 
+        <div>
 
+            <h3>教育经历</h3>
 
+            <p>
 
+                <span>2012.09—2016.7</span>
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>阜阳信息工程学院</span>
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>计算机科学与技术</span>
 
+            </p>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 68 - 0
html/4.表单标签.html
查看文件 

@@ -0,0 +1,68 @@
 
+<!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>
 
+      /* input {
 
+            width: 300px;
 
+            height: 200px;
 
+        } */
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <!-- 
+        form 表单标签
 
+            属性：action 提交内容到后台
 
+            输入框：
 
+                input
 
+                    属性：placeholder提示信息
 
+                    type 类型
 
+                        1.text 文本类型
 
+                        2.password 密码
 
+                        3.submit 提交按钮
 
+                        4.reset 重置按钮
 
+                        5.button 自定义按钮 配合value属性使用
 
+                        6.radio 单选格式 需要设置相同的name属性值
 
+                        7.checkbox 多选格式 checked默认选择 禁止选择
 
+     -->
 
+    <form action="">
 
+      <input type="text" placeholder="请输入您的手机号" />
 
+      <input type="password" />
 
+      <input type="submit" />
 
+      <input type="reset" />
 
+      <input type="button" value="哈哈哈" />
 
+      <br /><br />
 
+      <input type="radio" name="aaa" />男 
+      <input type="radio" name="aaa" />女
 
+      <br /><br />
 
+      <input type="checkbox" />篮球
 
+       <input type="checkbox" disabled />足球
 
+      <input type="checkbox" checked />羽毛球
 
+       <input type="checkbox" />网球
 
+      <input type="checkbox" />排球
 
+      <!-- 
+            button 按钮标签
 
+         -->
 
+      <button>登录</button>
 
+      <!-- 
+            下拉框
 
+                select 与 option 搭配使用
 
+                option中value的值是绑定数据进行联调
 
+          -->
 
+      <select>
 
+        <option value="1">小学</option>
 
+        <option value="2">初中</option>
 
+        <option value="3">高中</option>
 
+      </select>
 
+      <!-- 文本域
 
+            textarea 
+                rows 行
 
+                cols 列
 
+                maxlength 最大输入长度
 
+        -->
 
+      <textarea rows="20" cols="30" maxlength="10"></textarea>
 
+    </form>
 
+  </body>
 
+</html>

+ 5 - 2
html/２.标签.html
查看文件 

@@ -32,7 +32,9 @@
 
                 换行：块级元素 设置宽高生效
 
                 换行：块级元素 设置宽高生效
 
                 不换行:行内元素 设置宽高无效
 
                 不换行:行内元素 设置宽高无效
 
                 行内块元素：可以设置宽高 也可以一行展示
 
                 行内块元素：可以设置宽高 也可以一行展示
 
-            3.按照是否闭合区分：
 
+            3.按照是否闭合区分：闭合标签 空标签
 
+            闭合标签：由开始标签和结束标签组成 中间允许嵌套内容的标签
 
+            空标签：由开始标签组成且自动闭合的标签
 
             4.H5新特性（暂时不讲）
 
             4.H5新特性（暂时不讲）
 
      -->
 
      -->
 
     <!-- 
     <!-- 
@@ -70,6 +72,7 @@
 
               b.# 跳回顶部
 
               b.# 跳回顶部
 
               c."" 空字符串 刷新页面
 
               c."" 空字符串 刷新页面
 
         3.行内块元素
 
         3.行内块元素
 
+        input 输入框
 
         图片标签
 
         图片标签
 
           img
 
           img
 
             属性：
 
             属性：
 
@@ -80,7 +83,7 @@
 
             2.alt：当图片无法展示时  所显示的替换文字
 
             2.alt：当图片无法展示时  所显示的替换文字
 
       -->
 
       -->
 
     <div>
 
     <div>
 
-      <img src="../images/img01.gif" alt="圣诞老人">
 
+      <img src="../images/img01.gif" alt="圣诞老人"/>
 
       <img src="../images/img01.gif" alt="圣诞老人" style="width: 400px;height: 400px;">
 
       <img src="../images/img01.gif" alt="圣诞老人" style="width: 400px;height: 400px;">
 
       <img src="../images/img01.gif" alt="圣诞老人">
 
       <img src="../images/img01.gif" alt="圣诞老人">
 
       <img src="https://ts1.cn.mm.bing.net/th/id/R-C.9de53f9726576696b318a8d95c0946cb?rik=sWB3V9KSxHbThw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f95%2f9995_1.jpg&ehk=GcPUjJED69TBvg9XxQr2klzDzfRsQWhAfLKlIAUWHJQ%3d&risl=&pid=ImgRaw&r=0" alt="">
 
       <img src="https://ts1.cn.mm.bing.net/th/id/R-C.9de53f9726576696b318a8d95c0946cb?rik=sWB3V9KSxHbThw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f95%2f9995_1.jpg&ehk=GcPUjJED69TBvg9XxQr2klzDzfRsQWhAfLKlIAUWHJQ%3d&risl=&pid=ImgRaw&r=0" alt="">