流式布局思想

  1. """
  2. 页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想
  3.  
  4. 1) 将标签宽高设置成 百分比，就可以随屏幕(父集)缩放而缩放
  5. 2) 将标签宽高设置成 视图百分比，就可以随屏幕缩放而缩放
  6. 3) 将子集字体设置成 继承值，就可以通过父集统一控制子集
  7.  
  8. """

例子：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>流式布局</title>
  6.     <style>
  7.         /*body { margin: 0 }*/
  8.         .box {
  9.             width: 800px;
  10.             height: 200px;
  11.             background-color: orange;
  12.             /*页面宽度缩放，盒子始终居中*/
  13.             margin-left: auto;
  14.             margin-right: auto;
  15.             width: 80%;
  16.             /*vw: view width | vh: view height*/
  17.             width: 80vw;
  18.             width: 80vh;
  19.         }
  20.         /*em、rem*/
  21.         .sup {
  22.             font-size: 40px;
  23.         }
  24.         .sub {
  25.             /*font-size: inherit;*/
  26.             /*font-size: 1.5em;*/
  27.             /*width: 5em;*/
  28.             font-size: 2rem;
  29.         }
  30.         html {
  31.             font-size: 30px;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="box"></div>
  37.     <div class="sup">
  38.         <div class="sub">字</div>
  39.     </div>
  40. </body>
  41. </html>

JavaScript函数

简单的举例：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js函数</title>
  6. </head>
  7. <body>
  8.     <h1>js函数</h1>
  9. </body>
  10. <script>
  11.     // 参数：你传你的，我收我的
  12.     function fn1(a, b, c, d) {
  13.         console.log(a, b, c, d);
  14.         console.log('fn1 run');
  15.     }
  16.     fn1(1, 2, 3);
  17.  
  18.     let fn2 = function (...args) {
  19.         console.log(args);
  20.         console.log(args[0]);
  21.         console.log('fn2 run');
  22.     };
  23.     fn2(1, 2, 3, 4);
  24.  
  25.     (function () {
  26.         console.log('fn3 run');
  27.     })();
  28.  
  29.     let fn4 = () => {
  30.         console.log('fn4 run');
  31.     };
  32.     fn4();
  33.  
  34.     // 有参有反
  35.     let fn5 = (a, b) => {
  36.         console.log(a, b);
  37.         return a + b;
  38.     };
  39.     let res = fn5(1, 2);
  40.     console.log(res);
  41.  
  42.     // 箭头函数函数体如果只有返回值，可以简写
  43.     let fn6 = (a, b) => a + b;
  44.     res = fn6(10, 20);
  45.     console.log(res);
  46.  
  47.     // 当形参只有一个，可以省略()
  48.     let fn7 = a => a * ;
  49.     res = fn7(10);
  50.     console.log(res);
  51.  
  52.     // 当形参为空的简写方式
  53.     let fn8 = () => 200;
  54.     res = fn8();
  55.     console.log(res);
  56.  
  57. </script>
  58. </html>

面向对象JavaScript

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象js</title>
  6. </head>
  7. <body>
  8. <h1>面向对象js</h1>
  9. </body>
  10. <script>
  11.     // ES6
  12.     class Student {
  13.         constructor(name) {
  14.             console.log('构造器调用了');
  15.             this.name = name;
  16.         }
  17.  
  18.         study() {
  19.             console.log(`${this.name}在学习`)
  20.         }
  21.     }
  22.     let s1 = new Student('Bob');
  23.     console.log(s1.name);
  24.     s1.study();
  25.     //ES5
  26.     function Teacher(name) {
  27.         this.name = name;
  28.         this.teach = function () {
  29.             console.log(`${this.name}在教学`)
  30.         };
  31.         this.test = () => {
  32.             console.log(`${this.name}-test`)
  33.         }
  34.     }
  35.     let t1 = new Teacher('Tom');
  36.     console.log(t1.name);
  37.     t1.teach();
  38.     t1.test();
  39.  
  40.     // 可以理解为类属性，所有对象共有
  41.     Teacher.prototype.age = 10;
  42.     Teacher.prototype.sleep = function () {
  43.          console.log(`${this.name}在睡觉`)
  44.     };
  45.     console.log(t1.age);
  46.     t1.sleep();
  47.     let t2 = new Teacher('Jerry');
  48.     console.log(t2.age);
  49.     t2.sleep();
  50.  
  51.     /* 根组件、局部组件、全局组件都是Vue的对象，所以给Vue原型设置的变量，所有组件的this都可以访问该变量
  52.     Vue.prototype.abc = 123;
  53.     let localTag = {};
  54.     Vue.component('',{});
  55.     new Vue({
  56.         components: {
  57.            localTag
  58.         }
  59.     });
  60.     */
  61.     // function 与 箭头函数 是有本质区别的
  62.     let h1 = document.querySelector('h1');
  63.     // h1.onclick = function () {
  64.     //     // alert(this.innerText);
  65.     //     console.log(this);
  66.     // };
  67.     // h1.onclick = () => {
  68.     //     // alert(this.innerText);
  69.     //     console.log(this);
  70.     // }
  71. </script>
  72. </html>

前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目的更多相关文章

  1. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  2. 前端 JS/TS 调用 ASP.NET Core gRPC-Web

    前言 在上两篇文章中,介绍了ASP.NET Core 中的 gRPC-Web 实现 和 在 Blazor WebAssembly 中使用 gRPC-Web,实现了 Blazor WebAssembly ...

  3. vue项目配置Mock.js

    扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...

  4. 搭建VUE项目

    1.换源由于npm源服务器在国内访问速度较慢,所以一般需要更换源服务器地址npm config set registry https://registry.npm.taobao.org也可以安装cnp ...

  5. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  6. 前端知识复习： JS选中变色

    前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...

  7. Vue + Spring Boot从零开始搭建个人网站（一） 之 项目前端Vue.js环境搭建

    前言: 最近在考虑搭建个人网站,想了想决定采用前后端分离模式 前端使用Vue,负责接收数据 后端使用Spring Boot,负责提供前端需要的API 就这样开启了我边学习边实践之旅 Vue环境搭建步骤 ...

  8. VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  9. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

随机推荐

  1. bfs--P1301 魔鬼之城

    *传送 求最小步数,bfs求解.因为题目要求可以走八个方向(上下左右和对角线),所以两个方位数组来找八个方向 int dirx[9]={0,0,1,1,1,0,-1,-1,-1}; int diry[ ...

  2. php-fpm启动 关闭 重启

    http://www.cnblogs.com/GaZeon/p/5421906.html 最近安装了mysqli扩展,重启了nginx后,phpinfo()没有显示出mysqli,后来搞不出原因,直接 ...

  3. POJ 3126：Prime Path

    Prime Path Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submit St ...

  4. 使用idea断点调试时出现no executable code found at line问题

    问题描述 今天突然碰到了这样的一个问题: 使用断点调试时,断点的地方出现了一个叉号,而不是对勾,这就让我非常无奈了. 调了一天,终于把这个问题解决了,还是要记录一下的. 问题情况如下: 除了这里,de ...

  5. 2019.9.30极限测试 04.JAVA语言课堂测试试卷-极限测试

    题目存储在上传的文件当中. 代码实现 Subway 类: package ClassroomTest; public class Subway { private String railway; pr ...

  6. 用Pandas Dataframe支撑起多只金融产品股票的数据内部形态

    3. 如果同时拿一个板块股票的收市价和成交额 前一篇说到,用大盘指数,如恒生指数,上证,深证,这些重要的大盘指数来做Dataframe主键,那麽如果是同时拿一个板块股票的收市价和成交额,可以怎样操作呢 ...

  7. 从结构和数字看OO——面向对象设计与构造第一章总结

    不知不觉中,我已经接触OO五周了,顺利地完成了第一章节的学习,回顾三次编程作业,惊喜于自身在设计思路和编程习惯已有了一定的改变,下面我将从度量分析.自身Bug.互测和设计模式四个方向对自己第一章的学习 ...

  8. JavaScript 之 web API

    1.获取元素 document.getElementById('标签的id值'); document.getElementsByTagName('标签名'); document.getElements ...

  9. .net core excel导入导出

    做的上一个项目用的是vs2013,传统的 Mvc模式开发的,excel报表的导入导出都是那几段代码,已经习惯了. 导入:string filename = ExcelFileUpload.FileNa ...

  10. JavaEE--使用百度echarts实现地图报表

    参考:http://echarts.baidu.com/option.html#title https://www.cnblogs.com/zhangyong123/p/4974554.html ht ...