From 97d1aae64f65856ea8319e078b033844e9ad79f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E6=9C=88=E9=A6=A8?= <1600095625@qq.com> Date: Thu, 18 Mar 2021 21:06:26 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=89=8D=E5=8F=B0=E5=92=8C=E5=90=8E?= =?UTF-8?q?=E5=8F=B0=E5=92=8CHTML=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../blog/base.css" | 61 ++++++++++++++ .../blog/bg_base.css" | 67 +++++++++++++++ .../blog/css/base.css" | 23 ++++++ .../blog/css/bottom.css" | 38 +++++++++ .../blog/css/detail_base.css" | 20 +++++ .../blog/css/detail_bottom.css" | 36 ++++++++ .../blog/css/detail_navigation.css" | 23 ++++++ .../blog/css/detail_top.css" | 12 +++ .../blog/css/navigation.css" | 23 ++++++ .../blog/css/top.css" | 11 +++ ...\350\257\246\346\203\205\351\241\265.html" | 53 ++++++++++++ .../\351\246\226\351\241\265.html" | 82 +++++++++++++++++++ ...\350\257\246\346\203\205\351\241\265.html" | 61 ++++++++++++++ ...\345\217\260\351\246\226\351\241\265.html" | 62 ++++++++++++++ 14 files changed, 572 insertions(+) create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/base.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/bg_base.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/base.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/bottom.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/detail_base.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/detail_bottom.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/detail_navigation.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/detail_top.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/navigation.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/css/top.css" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/\345\211\215\345\217\260/\350\257\246\346\203\205\351\241\265.html" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/\345\211\215\345\217\260/\351\246\226\351\241\265.html" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/\345\220\216\345\217\260\350\257\246\346\203\205\351\241\265.html" create mode 100644 "\347\216\213\346\234\210\351\246\250/blog/\345\220\216\345\217\260\351\246\226\351\241\265.html" diff --git "a/\347\216\213\346\234\210\351\246\250/blog/base.css" "b/\347\216\213\346\234\210\351\246\250/blog/base.css" new file mode 100644 index 00000000..44f1a898 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/base.css" @@ -0,0 +1,61 @@ +*{ + margin: 0px; + padding: 0px; +} +body{ + font-size: 1rem; + color: #6B6B6B; +} +a{ + text-decoration: none; + color: #336CAF; +} +a:hover{ + color: lightblue; +} +ul li{ + list-style-type: none; +} +#top{ + width: 100%; + height: 60px; + background-color: #336CAF; +} +#top h1{ + width: 225px; + color: white; + background-color: #2E5F9A; + font-size: 1rem; + height: 60; + line-height: 60px; + padding-left: 15px; + float: left; +} +#top #welcome { + float: right; + padding: 15px 0px 10px 0px; +} +#left{ + width: 204px; + position: fixed; + border-right: 1px solid #CDCDCD; + padding: 20px 18px; +} +#left ul { + margin-left: 10px; + line-height: 30px; +} +#right{ + float: left; + padding-left: 260px; + padding-top: 22px; + font-size: 14px; +} +#right #right_continer { + padding-bottom: 25px; +} +#right #table tr td{ + width: 100px; + height: 40px; + text-align: center; +} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/bg_base.css" "b/\347\216\213\346\234\210\351\246\250/blog/bg_base.css" new file mode 100644 index 00000000..1c034b32 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/bg_base.css" @@ -0,0 +1,67 @@ +*{ + margin: 0px; + padding: 0px; +} +body{ + font-size: 1rem; + color: #6B6B6B; +} +a{ + text-decoration: none; + color: #336CAF; +} +a:hover{ + color: lightblue; +} +ul li{ + list-style-type: none; +} +#top{ + width: 100%; + height: 60px; + background-color: #336CAF; +} +#top h1{ + width: 225px; + color: white; + background-color: #2E5F9A; + font-size: 1rem; + height: 60; + line-height: 60px; + padding-left: 15px; + float: left; +} +#top #welcome { + float: right; + padding: 15px 0px 10px 0px; +} +#left{ + width: 204px; + position: fixed; + border-right: 1px solid #CDCDCD; + padding: 20px 18px; +} +#left ul { + margin-left: 10px; + line-height: 30px; +} +#right{ + float: left; + padding-left: 260px; + padding-top: 22px; + font-size: 14px; +} +#right #right_continer { + padding-bottom: 20px; +} +#right #right_continer table tr td{ + padding-top:5px; +} +#right #right_continer table tr td.add{ + padding-left:1000px; +} +#right #table tr td{ + width: 150px; + height: 40px; + text-align: center; +} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/base.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/base.css" new file mode 100644 index 00000000..c9f4ab0f --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/base.css" @@ -0,0 +1,23 @@ +@charset "utf-8"; +/* CSS Document */ + +*{ + margin:0px auto; + padding:0px;} + +body{ + background-color:#CCCCCC;} + + +a:hover{ + position:relative; + bottom:1px; + right:1px; +} +.a{ + color:#000; + text-decoration:none; + padding-left:610px;} + #fenye{ + margin-top:30px; + padding-left:250px;} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/bottom.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/bottom.css" new file mode 100644 index 00000000..23a596a6 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/bottom.css" @@ -0,0 +1,38 @@ +@charset "utf-8"; +/* CSS Document */ + +#bottom{ + width:800px; + height:550px; + background-color:#FFF;} + + .vue_bottom{ + border-bottom:1px solid #000; + } + + #bottom h1{ + font-size:24px; + padding-left:33px; + color:#51432f; + padding-top:15px;} + #bottom #vue{ width:750px; + height:550px;} + #bottom #vue ul{ + padding-left:200px; + margin-top:-22px;} + /**/ + #bottom #vue p{ + padding-left:33px;} + + .button{ + margin-left:30px; + background-color:#FAF7F5; + color:#977C57; + border-bottom-color:#EEE8E1; + font-size:18px; + margin-top:10px;} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/detail_base.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_base.css" new file mode 100644 index 00000000..0faec7a5 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_base.css" @@ -0,0 +1,20 @@ +@charset "utf-8"; +/* CSS Document */ + +*{ + margin:0px auto; + padding:0px;} + +body{ + background-color:#CCCCCC;} + + +a:hover{ + position:relative; + bottom:1px; + right:1px; +} +.a{ + color:#000; + text-decoration:none; + padding-left:610px;} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/detail_bottom.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_bottom.css" new file mode 100644 index 00000000..883053e4 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_bottom.css" @@ -0,0 +1,36 @@ +@charset "utf-8"; +/* CSS Document */ + + +#bottom{ + width:800px; + height:600px; + background-color:#FFF; + } +.vue_bottom{ + border-bottom:1px solid #000; + } +#bottom h1{ + font-size:24px; + padding-left:33px; + color:#51432f; + padding-top:15px; + } +#bottom #vue{ width:750px; + height:550px; + } +#bottom #vue ul{ + padding-left:200px; + margin-top:-22px; + } +#bottom #t1 { + width: 204px; + position: fixed; + border-right: 1px solid #CDCDCD; + padding: 20px 18px; + } +#bottom #t1 ul li{ + margin-left: 10px; + line-height: 30px; + list-style-type: none; +} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/detail_navigation.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_navigation.css" new file mode 100644 index 00000000..caff1ceb --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_navigation.css" @@ -0,0 +1,23 @@ +@charset "utf-8"; +/* CSS Document */ + +#navigation{ + width:800px; + height:40px; + background-color:#988060; + } +#navigation #liks ul li { + float:left; + width:100px; + height:20px; + margin-top:10px; + text-align:center; + list-style-type:none; + +} +#navigation #liks ul li a{ + text-decoration:none; + color:#FFFFFF;} + +#navigation #liks ul li a:hover{ + color:#E7FAA9;} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/detail_top.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_top.css" new file mode 100644 index 00000000..1a561a28 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/detail_top.css" @@ -0,0 +1,12 @@ +@charset "utf-8"; +/* CSS Document */ + +#top{ + width:800px; + height:180px; + background-color:#8AB84B;} +#top h1{ font-size:64px; +padding-top:40px; +padding-left:100px;} +#top ul li {list-style-type:none; +padding-left:250px;} diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/navigation.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/navigation.css" new file mode 100644 index 00000000..caff1ceb --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/navigation.css" @@ -0,0 +1,23 @@ +@charset "utf-8"; +/* CSS Document */ + +#navigation{ + width:800px; + height:40px; + background-color:#988060; + } +#navigation #liks ul li { + float:left; + width:100px; + height:20px; + margin-top:10px; + text-align:center; + list-style-type:none; + +} +#navigation #liks ul li a{ + text-decoration:none; + color:#FFFFFF;} + +#navigation #liks ul li a:hover{ + color:#E7FAA9;} \ No newline at end of file diff --git "a/\347\216\213\346\234\210\351\246\250/blog/css/top.css" "b/\347\216\213\346\234\210\351\246\250/blog/css/top.css" new file mode 100644 index 00000000..7c5c446c --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/css/top.css" @@ -0,0 +1,11 @@ +@charset "utf-8"; +/* CSS Document */ +#top{ + width:800px; + height:180px; + background-color:#8AB84B;} +#top h1{ font-size:64px; +padding-top:40px; +padding-left:100px;} +#top ul li {list-style-type:none; +padding-left:250px;} diff --git "a/\347\216\213\346\234\210\351\246\250/blog/\345\211\215\345\217\260/\350\257\246\346\203\205\351\241\265.html" "b/\347\216\213\346\234\210\351\246\250/blog/\345\211\215\345\217\260/\350\257\246\346\203\205\351\241\265.html" new file mode 100644 index 00000000..8b74c651 --- /dev/null +++ "b/\347\216\213\346\234\210\351\246\250/blog/\345\211\215\345\217\260/\350\257\246\346\203\205\351\241\265.html" @@ -0,0 +1,53 @@ + + +
+ +1.Vue 2.x 框架的常用点(模板语法, 条件渲染, 列表渲染)简介Vue的Hello Word应用模板语法, v-bind属性绑定, 事件绑定条件渲染, 列表渲染, Class与Style的绑定 +
+2.Vue 2.x 核心技术(vue-router, vuex),Vue-cli工具, Vue代码规范,Vue组件的调试方法,Vue-router, vuex
+3.集成Vue2.x介绍workflow工作流单页面Demo(动态表单,列表动态展示)使用Cli工具,开发常见的应用组件
+计算属性与监听器计算属性: computed数据联动, 当计算属性中的所有的数据均发生变化的时候,响应此方法.能监听多个变量,但是该变量必须是在Vue中的实例里.
+新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以发布打包程序,甚至还可以独立连接数据库,当然了,优点与缺点共存,不能向其他语言那样断点调试导致了,它的脉络更难被捕捉,犹如远古时代的代码开发一样,但它还是已经可以称为一门编程技术了,所以学习一门前端开发,已经是一件非常有意义的事儿了。
+注:输入【npm i vue -g】下载vue时,尽量使用-g,因为vue的文件中有一些文件是可以vue开头的命令行的,因为-g是下载到环境变量配置的Path地址,所以如果下载到这里,那么vue开头的命令就可以在cmd窗口中直接使用了,不然还需要重新配置环境变量,添加当前下载目录。
+注:输入vue init webpack my-project后,不要切换窗口,一直回车,就可以创建成了,如果切换窗口了,切换回当前cmd窗口后,回车有时候无法直接输入,需要操作下才能输入,比如先按一下个上下左右键。
+刚刚安装的VSCode需要禁用JS-CS-HTML Formatter插件,不然保存代码时会自动格式化了,然后html代码全乱了通过VisualStudioCode将新建的项目打开。禁用方法: ctrl+shift+X 调出扩展,搜索 JS-CS-HTML Formatter ,然后禁用,然后重启。
+Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 +
+ + +尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:用提供驱动。 +
+官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。用提供驱动。 +
+1.Vue 2.x 框架的常用点(模板语法, 条件渲染, 列表渲染)简介Vue的Hello Word应用模板语法, v-bind属性绑定, 事件绑定条件渲染, 列表渲染, Class与Style的绑定 +
+2.Vue 2.x 核心技术(vue-router, vuex),Vue-cli工具, Vue代码规范,Vue组件的调试方法,Vue-router, vuex
+3.集成Vue2.x介绍workflow工作流单页面Demo(动态表单,列表动态展示)使用Cli工具,开发常见的应用组件
+计算属性与监听器计算属性: computed数据联动, 当计算属性中的所有的数据均发生变化的时候,响应此方法.能监听多个变量,但是该变量必须是在Vue中的实例里.
+新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以发布打包程序,甚至还可以独立连接数据库,当然了,优点与缺点共存,不能向其他语言那样断点调试导致了,它的脉络更难被捕捉,犹如远古时代的代码开发一样,但它还是已经可以称为一门编程技术了,所以学习一门前端开发,已经是一件非常有意义的事儿了。
+注:输入【npm i vue -g】下载vue时,尽量使用-g,因为vue的文件中有一些文件是可以vue开头的命令行的,因为-g是下载到环境变量配置的Path地址,所以如果下载到这里,那么vue开头的命令就可以在cmd窗口中直接使用了,不然还需要重新配置环境变量,添加当前下载目录。
+注:输入vue init webpack my-project后,不要切换窗口,一直回车,就可以创建成了,如果切换窗口了,切换回当前cmd窗口后,回车有时候无法直接输入,需要操作下才能输入,比如先按一下个上下左右键。
+刚刚安装的VSCode需要禁用JS-CS-HTML Formatter插件,不然保存代码时会自动格式化了,然后html代码全乱了通过VisualStudioCode将新建的项目打开。禁用方法: ctrl+shift+X 调出扩展,搜索 JS-CS-HTML Formatter ,然后禁用,然后重启。
+Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 +
+ + +尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:用提供驱动。 +
+官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。用提供驱动。 +
+