首页 > 其他分享 > 03前端开发

03前端开发

时间:2023-10-24 20:33:22浏览次数:43  
标签:03 jason 定位 python js tony var 前端开发

溢出属性

#文本内容超出了标签的最大范围
  overflow: hidden;   直接隐藏文本内容
  overflow: auto\scroll;  提供滚动条查看

#溢出实战案例
  div{
          overflow: hidden;  #例如可以把头像多余溢出部分隐藏
        }

div  img{
          width: 100%;   #把头像比例放在和div差不多
            }

常用于头像

定位操作

#1.定位的状态
  1.静态定位   static
   所有的标签默认都是静态定位,即不能通过定位操作改变位置

  2.相对定位  relative
    相对于标签原来的位置做定位

  3.绝对定位  absolute
   相对于已经定位过的父标签做定位

  4.固定定位  fixed
    相对于浏览器窗口做定位

#2.定位操作
   position
   left/right/top/bottom
    绝对定位
       如果没有父标签或者父标签没有定位  则以body为准  相当于变成了相对定位
      eg:小米商城购物车

固定定位
  eg:右下方回到底部
      position: fixed
      right: 0;
      bottom:50px;  #比如小米购物车无论如何滑动,一致再页面贴在右边距离下面50px的位置(固定位置)

 z-index属性

"""前端界面其实是一个三维坐标系  z轴指向用户"""
动态弹出的分层页面  我们也称之为模态框
#补充知识
  rgba(128,128,128,0.5)#前面三个数字正好调成灰色,0.5表示透明度,0-1之间调节

position: fixed;
left: 50%
top: 50%
margin-left: -200px;
margin-top: -100px;

课堂练习

1.先用div和span勾勒出页面轮廓
  标签的class和id值最好也做到见名知意

2.再编写html

3.最后编写css


"""
我们现在所写的页面  没有做响应式布局  页面内容会随着浏览器窗口的变化而出现错乱现象
这个目前不要考虑  后面框架自带处理机制
"""

 JavaScript简介

#1.JavaScript与Java没有半毛钱关系
  之所以叫这么个名字纯粹是为了蹭当时Java的热度

#2.JavaScript简称JS  也是一门前端的编程语言
  前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖  
  由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用

#3.JS最初由一个程序员花了七天时间开发的  里面存在很多bug
   为了解决这些bug一直在编写相应的补丁  补丁本身又有bug  最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)

#4.JavaScript与EMASScript
   JavaScript原先由一家公司开发  希望其他公司都使用  最后被组织改名

#5.版本问题
  ECMA5
  ECMA6

变量与注释

"""
 编写js代码的位置
  1.pycharm提供的js文件
  2.浏览器提供的js环境(学习阶段)
"""

#1.注释语法
  //单行注释
  /*多行注释*/

#2.结束符号
    分号结束   console.log("hello world");  #相当于python里面的input

#3.变量声明
   在js中定义变量需要使用关键字声明
  1.var
     var name = "jason"
   2.let
      let name = 'jason'

'''var声明都是全局变量  let可以声明局部变量'''

#4.常量声明
  const  pi  = 3.14  #无法修改

 数据类型

"""
查看数据类型的方式
    typeof
"""

#1.数值类型(相当于python里面的整型int和浮点型float)

  Number
  NAN:属于数值类型  意思是"不是一个数字"(not a number)
      parseInt('abc')不报错返回NaN
     parsefloat('abc')不报错返回NaN
   
#2.字符类型(相当于python里面的字符串str)
  String
    默认只能是单引号和双引号
     var name1 = 'jason'
     var name2 = "jason"
    格式化字符串小顿号
     var name3 = 、jason、
#1.字符的拼接
  js中推荐使用加号

#2.统计长度
  js中使用length    python中使用len()

#3.移除空白(不能指定)
  js中使用trim()/trimLeft()/trimRight()
   python中使用strip()/lstrip()/rstrip()

#4.切片操作
   js中使用substring(start,stop)/slice(start,stop)
   前者不支持负数索引  后者支持
   python中使用[index1:index2]

#5.大小写转换
   js中使用.toLowerCase()  /  toUpperCase()
   python中使用lower()/ upper()

#6.切割字符串
  js中和python都是用split()   但是有点区别
   ss1.split(' ')
      ['jason','say','hello','big','baby']
   ss1.split('',1)
      ['jason']
    ss1.split('',2)
      ['jason','say']

#7.字符串的格式化
  js中使用格式化字符串(小顿号)
   var  name = 'jason'
   var  age = 18
   console.log(、
       my name is ${name} my age is ${age}
   、)
 
   #my name is jason my age is 18
  python中使用%或者format
#3.布尔值类型(相当于python中的布尔值bool)
  Boolean
   js中布尔值是全小写
     ture  false
      布尔值为false的0 / 空字符串/null/undefined/NaN
    python中布尔值首字母大写
      True  False
      布尔值为False的0/None/空字符串/空列表/空字典...

"""
  null的意思是空  undefined的意思是没有定义
   var  bb = null;  #相当于卫生纸只剩下袋子了,没有纸巾了
    bb
   null

   var  aa
   aa
    undefined    #相当于卫生纸加袋子都没有,整个没有
"""
#4.对象(相当于python中的列表/字典/对象)
   数组(相当于python中的列表)
           Array
              var  l1 = [11,22,33]
1.追加元素
   js中使用push()  python中使用append()

2.弹出元素
   js和python都用的pop()

3.头部插入元素
   js中使用unshift()  python中可以使用insert()

4.头部移除元素
   js中使用shift()  python中可以使用pop(0)   remove()

5.扩展列表
   js中使用concat()   python中使用extend()

6.forEach
   var l2 = ['jason', 'tony','kevin','oscar','jerry']
   l2.forEach(function(arg1){console.log(arg1)})

'''
VM169:1 jason
VM169:1 tony
VM169:1 kevin
VM169:1 oscar
VM169:1 jerry  相当于枚举法
'''

l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
'''
VM265:1 jason 0
VM265:1 tony 1
VM265:1 kevin 2
VM265:1 oscar 3
VM265:1 jerry 4   第一个参数按照顺序,第二个参数为所在位置
'''

l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
'''
VM332:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 tony 1  ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry'] 
VM332:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM332:1 jerry 4  ['jason', 'tony', 'kevin', 'oscar', 'jerry']  第三个参数是数据来源值
'''


7.splice
  splice(起始位置,删除个数,新增的值)

 

标签:03,jason,定位,python,js,tony,var,前端开发
From: https://www.cnblogs.com/Milk1/p/17778752.html

相关文章

  • 麒麟KYLINOS桌面操作系统2303上安装tigervnc
    好文推荐:统信UOS或者麒麟KYLINOS上软件包有未满足的依赖关系怎么办hello,大家好啊,今天给大家带来在麒麟桌面操作系统2303上安装tigervnc的文章,本篇文章给大家讲述如何安装并且远程连接使用,后面会给大家更新如何将tigervnc做成桌面图标点击即可开启及关闭,欢迎大家浏览分享转发。1、查......
  • 【Azure App Service】App Service设置访问限制后,使用git clone代码库出现403报错
    问题描述在AppService中,为AppService配置了访问限制,结果导致在克隆AppService的代码时候,遇见403错误。  问题解答因为在使用gitcloneAppService的应用代码时,使用的URL地址为https://***.scm.chinacloudsites.cn/***.git,它是通过公网访问,并且会根据设定的访问限制......
  • 《代码大全》阅读笔记03
    第五章:软件构建中的设计1、软件的首要技术使命就是管理复杂度,以简单性作为努力目标的标记方案对此最有帮助。2、好的设计是迭代的,你尝试设计的越多,你的最终方案就会约好。3、隐藏实现、封装变化。 第六章:可以工作的类1、类的接口应该提供一致的抽象。很多问题都是由于违背......
  • CH32X035 模拟IIC驱动EEPROM
    在CH32X035的GPIO模式配置选项中,并没有开漏输出的配置模式,如下图。在使用GPIO模拟IIC时,可在初始化时将其配置成推挽输出模式,在需要时切换对应的输入输出模式,以下是CH32X035GPIO模拟IIC的实现例程。 具体程序代码如下:iic.h文件:#ifndef__IIC_H#define__IIC_H#include"c......
  • CH32X035 模拟IIC驱动EEPROM
    来源:https://www.cnblogs.com/liaigu/p/17784027.html在CH32X035的GPIO模式配置选项中,并没有开漏输出的配置模式,如下图。在使用GPIO模拟IIC时,可在初始化时将其配置成推挽输出模式,在需要时切换对应的输入输出模式,以下是CH32X035GPIO模拟IIC的实现例程。 具体程序代码如下:iic.......
  • 云原生架构实战03 核心实战
    1、资源创建方式命令行YAML2.Namespace名称空间隔离资源kubectlcreatenshellokubectldeletenshelloapiVersion:v1kind:Namespacemetadata:name:hellokubectlgetnskubectlgetpods-Akubectldeletensmy-istio-ns3、Pod运行中的一组容器,Pod是kubernetes中应用......
  • Sea-Search03总结&&un finish
    使用到的设计模式Facade门面模式为何使用?在搜索项目中,由于使用Mvc架构且数据库中各种不同类型的数据源并没有放在同一张表,于是我们不可避免的在Controller中需要注入多个service,各种service眼花缭乱,而搜索中台提供的内容又及其单一(只负责返回搜索数据),于是采用Facade来......
  • OGG-03542 Failed to connect to the database
    GGSCI(dwdb01)4>dbloginuseridGOLDENGATE@cnlionrdb,password*******2023-10-2317:11:26INFOOGG-03542Failedtoconnecttothedatabase.Verifythattheconnectionstringandfollowingenvironmentvariablesarecorrect:LD_LIBRARY_PATH=/ho......
  • Unity3D学习记录03——Navigation智能导航地图烘焙
    首先还是在PackageManager中安装AINavigation接着选择我们场景的地面,右键,找到AI的NavMeshSurface,它会为我们的Ground添加一个叫NavMeshSurface的子物体在Inspector窗口中可以看到它的详细的参数:图中的R,H为你人物的参数,45°为你的人物可以爬行的最大角度AgentType里面可......
  • swagger配置后,系统无法启动,报Failed to start bean 'documentationPluginsBootstrappe
    swagger与springboot版本不兼容解决方案:1.swagger依赖版本过高,可以降低版本。2.在swagger配置类的application.yml配置文件中添加如下内容:spring:mvc:pathmatch:matching-strategy:ant_path_matcher我使用的方法二,完美解决。......