e hai 1 ano
pai
achega
4a5804566f
Modificáronse 4 ficheiros con 304 adicións e 2 borrados
  1. 51 0
      day2/demo2.html
  2. 162 0
      day2/demo3.html
  3. 89 0
      day2/复习.html
  4. 2 2
      day2/表单.html

+ 51 - 0
day2/demo2.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>案例2</title>
+    </head>
+    <body>
+        <div>
+            <h1>注册信息</h1>
+            <form>
+                <label>用户名:</label>
+                <input type="text" placeholder="请输入用户名">
+                <br>
+                <br>
+                <label>密码:</label>
+                <input type="password" placeholder="请输入密码">
+                <br><br>
+                <label>性别:</label>
+                <input type="radio" name="same">男
+                <input type="radio" name="same">女
+                <br><br>
+                <label>
+                    兴趣爱好:
+                </label>
+                <input type="checkbox">足球
+                <input type="checkbox">篮球
+                <input type="checkbox">排球
+                <input type="checkbox">游泳
+                <input type="checkbox">网球
+                <input type="checkbox">旅游
+                <input type="checkbox">绘画
+                <input type="checkbox">读书
+                <br><br>
+                <label>最高学历:</label>
+                <select>
+                    <option value="小学">小学</option>
+                    <option value="初中">初中</option>
+                    <option value="高中">高中</option>
+                    <option value="大学">大学</option>
+                </select>
+                <br><br>
+                <label>个人说明:</label>
+                <textarea cols="30" rows="10"></textarea>
+                <br><br>
+                <input type="reset">
+                <input type="button" value="注册">
+            </form>
+            <a href="">提示:注册成功之后请点击这里您将直接登陆系统!</a>
+        </div>
+    </body>
+</html>

+ 162 - 0
day2/demo3.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>简历</title>
+    </head>
+    <body>
+        <div>
+            <h1>个人简历</h1>
+            <!-- 个人信息内容 -->
+            <div>
+                <h3>个人信息</h3>
+                <span>姓&nbsp;&nbsp;名:&nbsp;&nbsp;韦城城</span>
+                <!-- 特殊符号
+                    &nbsp; 半格
+                -->
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>电&nbsp;&nbsp;话:&nbsp;&nbsp;186-5106-7589</span>
+                <br><br>
+                <span>性&nbsp;&nbsp;别:&nbsp;&nbsp;女</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>邮&nbsp;&nbsp;箱:&nbsp;&nbsp;wy754187089@163.com</span>
+                <br><br>
+                <span>年&nbsp;&nbsp;龄:&nbsp;&nbsp;25</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>学&nbsp;&nbsp;历:&nbsp;&nbsp;本科</span>
+            </div>
+            <!-- 求职意向内容 -->
+            <div>
+                <h3>求职意向</h3>
+                <span>工作性质:&nbsp;&nbsp;全职</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>工作地区:&nbsp;&nbsp;北京</span>
+                <br><br>
+                <span>期望职业:&nbsp;&nbsp;web前端</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                 <span>目前状况:&nbsp;&nbsp;目前处于离职状态,可立即上岗</span>
+                <br><br>
+                <span>期望薪资:&nbsp;&nbsp;面议</span>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>工作经验:&nbsp;&nbsp;三年</span>
+            </div>
+            <!-- 个人技能 -->
+            <div>
+                <h3>个人技能</h3>
+                <ul>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用Vue、React等主流框架以及全家桶开发项目,熟练使用Redux、Vuex、Dva等状态管模式;</li>
+                    <li>熟练使用多种UI框架、如Element-UI、iView、Vant、Ant-Design等,熟练使用ECharts、AmCharts等<br>可视化工具来对数据进行可视化处理;</li>
+                    <li>熟悉使用Ajax、Axios进行前后端交互,以及跨域处理和状态码的错误处理;</li>
+                    <li>了解 nodeJS,使用过Express、Egg、Koa构建项目,了解Mysql ;</li>
+                    <li>熟练使用npm yarn包管理工具,webpack构建工具打包压缩;</li>
+                    <li>熟悉使用git管理代码,配合团队开发;</li>
+                    <li>了解小程序开发技术,了解原生小程序以及Taro等框架;</li>
+                    <li>了解TypeScript、Nuxt等技术,充实自己的知识库;</li>
+                </ul>
+            </div>
+            <!-- 工作经历 -->
+            <div>
+                <h3>工作经历</h3>
+                <div>
+                    <b>北京巨作网络科技有限公司(2017.09 - 至今)</b>
+                    <p>工作描述:</p>
+                    <ul>
+                        <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                        <li>负责PC端、移动端页面的开发,实现平台所需要的页面制作和效果</li>
+                        <li>与后台进行数据交互,完成页面接口调用,实现数据更新和页面渲染</li>
+                        <li>配合业务需求封装公共组件,开发高效可复用的组件</li>
+                        <li>负责项目的后期维护及页面优化,提高用户体验</li>
+                    </ul>
+                </div>
+                <div>
+                    <b>北京巨作网络科技有限公司(2017.09 - 至今)</b>
+                    <p>工作描述:</p>
+                    <ul>
+                        <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                        <li>负责PC端、移动端页面的开发,实现平台所需要的页面制作和效果</li>
+                        <li>与后台进行数据交互,完成页面接口调用,实现数据更新和页面渲染</li>
+                        <li>配合业务需求封装公共组件,开发高效可复用的组件</li>
+                        <li>负责项目的后期维护及页面优化,提高用户体验</li>
+                    </ul>
+                </div>
+            </div>
+            <!-- 项目介绍 -->
+            <div>
+                <h3>项目介绍</h3>
+                <div>
+                    <h4>巨作网(PC端)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、<br> &nbsp; &nbsp; &nbsp; &nbsp;设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;<br> &nbsp; &nbsp; &nbsp; &nbsp;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;此项目采用vue-cli+webpack进行项目的底层搭建,ElementUI实现页面排版,使用<br> &nbsp; &nbsp; &nbsp; &nbsp;vue-router实现页面之间的跳转,完成单页面开发,使用axios请求数据,通过vuex保持数据<br> &nbsp; &nbsp; &nbsp; &nbsp;持久化及数据的传递与管理,负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现<br> &nbsp; &nbsp; &nbsp; &nbsp;图片的懒加载效果,根据页面要求完成搜索、切换、筛选等功能,对Js代码优化,组件化,多页面应用,<br> &nbsp; &nbsp; &nbsp; &nbsp;后期的代码维护和更新。
+                    </p>
+                </div>
+                <div>
+                    <h4>巨作网(M站)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、<br> &nbsp; &nbsp; &nbsp; &nbsp;设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;<br> &nbsp; &nbsp; &nbsp; &nbsp;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;此项目采用vue-cli+webpack进行项目的底层搭建,ElementUI实现页面排版,使用<br> &nbsp; &nbsp; &nbsp; &nbsp;vue-router实现页面之间的跳转,完成单页面开发,使用axios请求数据,通过vuex保持数据<br> &nbsp; &nbsp; &nbsp; &nbsp;持久化及数据的传递与管理,负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现<br> &nbsp; &nbsp; &nbsp; &nbsp;图片的懒加载效果,根据页面要求完成搜索、切换、筛选等功能,对Js代码优化,组件化,多页面应用,<br> &nbsp; &nbsp; &nbsp; &nbsp;后期的代码维护和更新。
+                    </p>
+                </div>
+                <div>
+                    <h4>巨作网(后台管理系统)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、<br> &nbsp; &nbsp; &nbsp; &nbsp;设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;<br> &nbsp; &nbsp; &nbsp; &nbsp;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;此项目采用vue-cli+webpack进行项目的底层搭建,ElementUI实现页面排版,使用<br> &nbsp; &nbsp; &nbsp; &nbsp;vue-router实现页面之间的跳转,完成单页面开发,使用axios请求数据,通过vuex保持数据<br> &nbsp; &nbsp; &nbsp; &nbsp;持久化及数据的传递与管理,负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现<br> &nbsp; &nbsp; &nbsp; &nbsp;图片的懒加载效果,根据页面要求完成搜索、切换、筛选等功能,对Js代码优化,组件化,多页面应用,<br> &nbsp; &nbsp; &nbsp; &nbsp;后期的代码维护和更新。
+                    </p>
+                </div>
+                <div>
+                    <h4> 我要遛遛网(PC端)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、<br> &nbsp; &nbsp; &nbsp; &nbsp;设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;<br> &nbsp; &nbsp; &nbsp; &nbsp;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;此项目采用vue-cli+webpack进行项目的底层搭建,ElementUI实现页面排版,使用<br> &nbsp; &nbsp; &nbsp; &nbsp;vue-router实现页面之间的跳转,完成单页面开发,使用axios请求数据,通过vuex保持数据<br> &nbsp; &nbsp; &nbsp; &nbsp;持久化及数据的传递与管理,负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现<br> &nbsp; &nbsp; &nbsp; &nbsp;图片的懒加载效果,根据页面要求完成搜索、切换、筛选等功能,对Js代码优化,组件化,多页面应用,<br> &nbsp; &nbsp; &nbsp; &nbsp;后期的代码维护和更新。
+                    </p>
+                </div>
+                <div>
+                    <h4>我要遛遛网(M站)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、<br> &nbsp; &nbsp; &nbsp; &nbsp;设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;<br> &nbsp; &nbsp; &nbsp; &nbsp;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp; &nbsp; &nbsp; &nbsp;此项目采用vue-cli+webpack进行项目的底层搭建,ElementUI实现页面排版,使用<br> &nbsp; &nbsp; &nbsp; &nbsp;vue-router实现页面之间的跳转,完成单页面开发,使用axios请求数据,通过vuex保持数据<br> &nbsp; &nbsp; &nbsp; &nbsp;持久化及数据的传递与管理,负责首页使用swiper插件实现轮播图效果及vue-lazyload插件实现<br> &nbsp; &nbsp; &nbsp; &nbsp;图片的懒加载效果,根据页面要求完成搜索、切换、筛选等功能,对Js代码优化,组件化,多页面应用,<br> &nbsp; &nbsp; &nbsp; &nbsp;后期的代码维护和更新。
+                    </p>
+                </div>
+            </div>
+            <!-- 个人介绍 -->
+            <div>
+                <h3>个人介绍</h3>
+                <ol>
+                    <li>性格稳重、谦虚真诚、责任心强,有良好的沟通能力和团队合作能力</li>
+                    <li>有较强的求知欲与良好的学习能力,对于新奇的技术有足够的热情和耐心</li>
+                    <li>专注工作,注重效率,和同事友好相处,能够快速融入公司团队</li>
+                </ol>
+            </div>
+            <!-- 教育经历 -->
+            <div>
+                <h3>教育经历</h3>
+                <span>2012.09—2016.7</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>阜阳信息工程学院</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>计算机科学与技术</span>
+            </div>
+        </div>
+    </body>
+</html>

+ 89 - 0
day2/复习.html

@@ -0,0 +1,89 @@
+<!-- 文档流 -->
+<!DOCTYPE html>
+<html lang=""en>
+    <head>
+        <meta charset="utf-8">
+        <title>复习</title>
+    </head>
+    <body>
+        <!-- 页面中展示的内容写在body标签中 -->
+        <!-- 
+            标签:
+                1.闭合标签 空标签
+                2.块级元素 行内元素 => 行内块元素
+                3.HTML标签
+                4.H5标签(暂时不讲)
+            块级元素:
+                1.div 划分文本区域
+                2.h(h1~h6) 标题标签 字体放大加粗 逐级减小
+                3.p 段落 文本
+                4.br 换行
+                5.hr 分割线
+                6.ul li 无序列表 type:disc(实心圆) square(实心正方形) circle(空心圆)
+                7.ol li 有序列表 type:1 A a i I; start:从...开始;reversed倒序
+                8.dl dt dd图文混排列表 dt 图片 dd 文字
+                特点:独占一行,可以修改宽高的,块级元素可以包含行内元素
+            行内元素:
+                1.加粗 b strong(强调语义化)
+                2.倾斜 i em(强调语义化)
+                3.下划线 u
+                4.删除线 s
+                5.下标 sub
+                6.上标 sup
+                7.区分代码块 span
+                8.超链接 a
+                    属性:href
+                        1.放置要跳转路径地址
+                        2.空字符串:刷新当前界面
+                        3.# 跳会当前页面顶部
+                    特点:在一行显示 ,设置宽高无效,行内元素不可以包含块级元素
+            行内块元素:
+                1.图片标签 img
+                2.输入框 input
+                特点:在一行显示,可以修改宽高,行内块元素一行时中间有空白的间隙
+         -->
+         <div>
+            <h1>我的简历</h1>
+            <a href="http://www.baidu.com">跳转1</a>
+            <a href="">跳转2</a>
+            <p>我是一段<u>内容</u>我是<s>一段</s>内容我是<sub>1</sub>一段内容<sup>3</sup>我是一段内容<span style="color: red;">我是一段</span>内容我是一段内容我是一段内容我是一段内容我是一段内容</p>
+            <p>我是<b>一段</b><strong>内容</strong><i>我是</i><em>一段</em>内容<br>我是一段内容<hr>我是一段内容我是一段内容</p>
+            <ul type="circle">
+                <li>内容1</li>
+                <li>内容2</li>
+                <li>内容3</li>
+            </ul>
+            <ul type="circle">
+                <li>内容1</li>
+                <li>内容2</li>
+                <li>内容3</li>
+            </ul>
+            <ul type="circle">
+                <li>内容1</li>
+                <li>内容2</li>
+                <li>内容3</li>
+            </ul>
+            <ul type="circle">
+                <li>内容1</li>
+                <li>内容2</li>
+                <li>内容3</li>
+            </ul>
+            <ol type="1" reversed>
+                <li>有序1</li>
+                <li>有序2</li>
+                <li>有序3</li>
+            </ol>
+            <dl>
+                <dt>
+                    <img src="./images/img01.gif" alt="">
+                    <img src="./images/img01.gif" alt="">
+                    <img src="./images/img01.gif" alt="">
+                </dt>
+                <dd>
+                    这是一张圣诞老人的图片
+                </dd>
+            </dl>
+            <a href="#">跳转3</a>
+         </div>
+    </body>
+</html>

+ 2 - 2
day2/表单.html

@@ -6,7 +6,7 @@
     </head>
     <body>
         <!-- form 标签 => 表单
-            action 规定提交表单像提交处发送的表单数据
+            action 规定提交表单向提交处发送的表单数据(很少使用)
             input 输入框 行内块元素
             属性:
             1.placeholder 默认的提示信息 颜色是灰色
@@ -21,7 +21,7 @@
                 password 密码
         -->
         <form action="">
-            <input type="text" placeholder="请输入您的电话号码" value="1212">
+            <input type="text" placeholder="请输入您的电话号码" value="****">
             <input type="submit">
             <input type="reset">
             <input type="radio" name="same">男