计算机基础知识44

news2024/10/7 15:20:55

overflow溢出属性

visible：默认值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

● overflow（水平和垂直均设置）
● overflow-x（设置水平方向）
● overflow-y（设置垂直方向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 500px;
            height: 100px;
            border: 1px solid #e879da;
            /*overflow:visible ;*/
            /*overflow: hidden;*/
            /*overflow: auto;*/
            overflow: scroll;

        }
    </style>
</head>
<body>
<p>别太敏感，你很好，一点都不糟糕，希望你被这个世界爱着，希望你笑了是真的快乐，希望你遇见过山的浑浊，眼泪依然有海的清澈</p>
</body>
</html>

圆形头像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      /*background-color: hotpink;*/
    }

    .hhh{
      width: 700px;
      height: 600px;
      /*background-color: plum;*/
      background-image:url("https://img1.baidu.com/it/u=408846158,4184724936&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=500");
      position: relative;
      top: 100px;
    }

    .header-img {
      width: 150px;
      height: 150px;
      /*边框*/
      border: 3px solid white;
      /*矩形变圆形*/
      border-radius: 50%;
      /*超出多余隐藏*/
      overflow: hidden;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 80%;
      /*居中*/
      margin: auto;
    }

    /*儿子标签*/
    .header-img>img {
      width: 100%;
    }
  </style>
</head>
<body>
<div class="hhh">
  <div class="header-img">
    <img src="https://img1.baidu.com/it/u=3533698366,4262741630&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
  </div>
</div>
</body>
</html>

定位

static: 静态定位，默认情况下，所有的标签都是静止的，不能够移动

relative：相对定位，相对自己原来的位置进行移动

absolute：绝对定位，相对于是父标签移动的，如果没有父元素，那就按照body移动

fixed：固定定位: 相对于浏览器窗口定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background: green;
            /*如果想移动标签必须先把标签的性质改掉，从原来静止位置改为可移动，默认情况下：static*/
                    /*relative把不能移动改成了可移动,相对*/
            position: relative;
            /*离左边100px，就是往右边移了100px*/
            left: 100px;
            top: 100px;
            /*right: 20px;*/
            /*bottom: 50px;*/
        }

        .d2{
            width: 50px;
            height: 50px;
            background: red;
            /*绝对定位就是相对于父标移动*/
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
<!--<div class="d1"></div>-->
<!--    <div class="d2"></div>-->
<div style="height: 500px;background: red"></div>
<div style="height: 500px;background: green"></div>
<div style="height: 500px;background: blue"></div>
<!--固定定位-->
<div style="width: 80px;height: 80px;border: 3px solid orange;position:fixed;right: 20px;bottom: 20px ">回到顶部</div>
<div style="width: 80px;height: 500px;border: 3px solid orange;position:fixed;right: 0px;bottom: 150px ">
    <div style="width: 100%;height: 100px;background: blueviolet">手机app;</div>
    <div style="width: 100%;height: 100px;background: hotpink">手机app</div>
    <div style="width: 100%;height: 100px;background: lemonchiffon">手机app</div>
    <div style="width: 100%;height: 100px;background: darkviolet">手机app</div>
    <div style="width: 100%;height: 100px;background: plum">手机app</div>

</div>
</body>
</html>

顶部导航示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: #eeeeee;
      height: 40px;
      width: 100%;
      position: fixed;
      /*紧贴上面*/
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: plum; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: darkviolet;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>

前端基础之JavaScript

# 实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

● 核心（ECMAScript） 
● 文档对象模型（DOM） Document object model (整合js，css，html)
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

# Script标签内写代码：<script src="myscript.js"></script>

# 注释：// 这是单行注释
             /*
               这是
              多行注释
             */

# 变量：1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
              2. 声明变量使用 var 变量名; 的格式来进行声明

a=1
var a=1; # es5的语法
let a=1; # es6的语法

# 常量：const PI=3.14

JavaScript数据类型

# JavaScript拥有动态类型：JavaScript不区分整型和浮点型，就只有一种数字类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

# 常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

# 字符串(String)常用方法：

.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    scrip里都是js-->
    <script>
        //这是注释
        // alert(123);
        var x='12.34';
        var y='12'
        // parseFloat(x)；
        parseInt(y)
        // console.log(parseFloat(x));
        // console.log(parseFloat(y));
        // console.log(typeof parseInt(y));
        // console.log(parseInt('sd1234ddasd'))；

        var a='hello';
        var b="world";
        var c='java|script|script'
        console.log(a+b);
        // 长度
        console.log(a.length);
        // 去空格去别的
        console.log(a.trim());
        console.log(a.trimLeft());
        console.log(a.trimRight());
        // 取出某个字符
        console.log(b.charAt(1));
        // 拼接
        console.log(a.concat(b));
        console.log(b.concat(a));
        console.log(b.concat(a,c));
        // 如果里面子字符串在打字符串中时，会显示他的索引位置
        // 判断某个字符串在不在另外一个字符串中
        // 当不存在找不到时，为假时为-1
        console.log(c.indexOf('java'))
        console.log(c.indexOf('script'))
        // 切片
        console.log(c.substring(0,3))  //jav，不能使用负数
        console.log(c.slice(3))  //ascriptscript,全部
        console.log(c.slice(3,5))  //as
        console.log(c.slice(-3))  //ipt
        // 全大写或小写
        console.log(c.toUpperCase(c))
        console.log(c.toLowerCase(c))
        // 分割
        console.log(c.split('|'))  //['java', 'script', 'script']
    </script>
</head>
<body>

</body>
</html>

# // ES6中引入了模板字符串：

var name = 'kevin';
var age = 20;
// var res = 'my name is %s, my age is %s';
var res = `my name is ${name}, my age is ${age}`;
console.log(res);

# 布尔值(Boolean): 在js中，什么是真、什么是假

   null:原来有，没了      undefined:什么都没有

   假：""(空字符串)、0、null、undefined、NaN都是false

var a = true;
var b = false;
var a=1;
var a; undefined

# // 数组的常用方法

.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script>
  var  arr = ['kevin','tony','jason','jerry']
  console.log(arr[0])
  console.log(arr[1])
  console.log(arr[2])
  console.log(arr.length)
  // // 插入元素
  arr.push('oscar');
  arr.unshift('hello');
  // // 删除
  arr.shift()
  // // 拼接
  console.log(arr.join(','))  //['kevin', 'tony', 'jason', 'jerry', 'oscar']
  var arr1 = [1,2,3,4]
  console.log(arr.concat(arr1))   // ['kevin', 'tony', 'jason', 'jerry', 'oscar', 1, 2, 3, 4]
  console.log(arr)

  // 循环
  arr.forEach(function (value,index,array) {
      console.log(value,index,array)
  });
  arr.map(function (value,index,array){
      console.log(value,index,array)
  })

</script>
</body>
</html>

# 运算符：+ - * / % ++ --

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var x=10;
  var res1= x++;
  var res2= ++x;
  console.log(res1)  //10
  console.log(res2)  //12

  console.log(2>1 && 4>3);  //&&=and
  console.log(2>1 || 4>3);  //||=or
  console.log(2>1 != 4>3);  //! = 不等于
</script>
</body>
</html>

# // 比较运算符：> >= < <= != == === !==

  逻辑运算符: && || ! 

  赋值运算符：= += -= *= /=

# 流程控制：if-else、f-else if-else、switch

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

var day = new Date().getDay();
console.log(day);  //3
switch (day) {
    case 0:
      console.log("Sunday");
      break;
    case 3:
      console.log("Monday");
      break;
    default:
      console.log("...")

# for、while：

for (var i=0;i<10;i++) {
  console.log(i);
}

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

# 三元运算：

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

函数

1、

2、

3、

JSON对象

# 在JavaScript中，对象是拥有属性和方法的数据

json.dumps  ------------------->JSON.stringify()
json.loads--------------------->JSON.parse()
 1. 先序列化

var res=JSON.stringify(obj1) # '{"name": "Alex", "age": 18};'
python:
    json.loads(res)    # {"name": "Alex", "age": 18};

2. 反序列化

var str1 = '{"name": "Alex", "age": 18}'; # json.dumps
js反序列化:
    JSON.parse(str1)     # {"name": "Alex", "age": 18}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1178211.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GEE错误——XXX is not a function,如何解决这个问题？

GEE错误——XXX is not a function,如何解决这个问题？

错误： 这里的时错误原始的代码链接： https://code.earthengine.google.com/4bf0975a41e14d0c40e01925c6f3cf2a 这里主要的问题时这个单一影像不存在： ImageCollection (Error) ImageCollection.load: ImageCollection asset LANDSAT/LC08/C01/T1_SR/LC08_221077_201704…
阅读更多...
self.register_buffer方法使用解析(pytorch)

self.register_buffer方法使用解析(pytorch)

self.register_buffer就是pytorch框架用来保存不更新参数的方法。 列子如下&#xff1a; self.register_buffer("position_emb", torch.randn((5, 3)))第一个参数position_emb传入一个字符串&#xff0c;表示这组参数的名字&#xff0c;第二个就是tensor形式的参数…
阅读更多...
微信Wxid转换微信号

微信Wxid转换微信号

微信号在申请的时候&#xff0c;系统随机分配了一个微信原始ID&#xff0c;该ID号以wxid_开头&#xff0c;后面是随机的字符串 分配的原始ID是目前是不可以直接用来加好友的&#xff0c;需要转换成微信号才能加好友&#xff0c; 经过逆向分析通过PC端找到了该接口并且可以成功用…
阅读更多...
Langchain知识点（下）

Langchain知识点（下）

背景&#xff1a; 这部分给主要介绍Langchain的agent部分&#xff0c;前面已经章节已经介绍了思维和思路作为一种数据资产是这一次LLM数据化的核心。也介绍了各种的chain&#xff0c;那么既然有了chain可以把专家思路和专家思维固化并且可被方便的共享和利用&#xff1b;那为什…
阅读更多...
数据结构-链表的简单操作实现

数据结构-链表的简单操作实现

目录 0.链表前序工作 1.构建出一个链表 2.展示链表中的所有存储数据 3.查找关键字key是否在链表中 4.求链表的长度 5.头插法 6.尾插法 7.插入任意位置&#xff08;规定第一个元素位置为0下标&#xff09; 8.删除第一次出现的值为key的关键字 9.删除所有值为key的关键字…
阅读更多...
【算法】通信线路（二分，堆优化版dijkstra）

【算法】通信线路（二分，堆优化版dijkstra）

题目 在郊区有 N 座通信基站&#xff0c;P 条 双向 电缆&#xff0c;第 i 条电缆连接基站 Ai 和 Bi。 特别地&#xff0c;1 号基站是通信公司的总站&#xff0c;N 号基站位于一座农场中。 现在&#xff0c;农场主希望对通信线路进行升级&#xff0c;其中升级第 i 条电缆需要花费…
阅读更多...
Tensor.scatter_add_函数解释：

Tensor.scatter_add_函数解释：

Tensor.scatter_add_(dim, index, src) → Tensor out.scatter_add_(dim, index, src) 1.参数&#xff1a; dim (int) – 哪一dim进行操作 index (LongTensor) – 要在的out的哪一index进行操作 src (Tensor) – 待操作的源数字 2.官方的解释的操作如下&#xff1a; 3.例…
阅读更多...
基于8086汽车智能小车控制系统

基于8086汽车智能小车控制系统

**单片机设计介绍&#xff0c;基于8086汽车智能小车控制系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于 8086 的汽车智能小车控制系统是一种将微处理器技术应用于汽车控制的系统。下面是其主要的设计介绍&#xff1a; 硬…
阅读更多...
ubuntu22.04桌面版系统无法识别USB摄像头

ubuntu22.04桌面版系统无法识别USB摄像头

虚拟机连接电脑摄像头连接失败&#xff08;驱动程序错误&#xff09; 本文为转载&#xff1a;版权归远作者所有&#xff0c;之所以转载是为了避免被原作者删除 巴黎铁塔下的女孩 你尽管努力&#xff0c;剩下的交给时间 虚拟机调用电脑的摄像头&#xff0c;正常情况下只需点击…
阅读更多...
方案分享：F5机器人防御助企业应对复杂攻击

方案分享：F5机器人防御助企业应对复杂攻击

企业是Bot攻击者的目标&#xff0c;网络犯罪分子会不断调整他们的攻击&#xff0c;来攻破愈发成熟的Bot防护&#xff0c;这使企业安全团队时刻处于紧张状态。如果不能有效地管理Bot&#xff0c;应用性能、客户体验和业务都会被影响&#xff0c;但在尝试阻止这些攻击时&#xff…
阅读更多...
技术分享 | web自动化测试-文件上传与弹框处理

技术分享 | web自动化测试-文件上传与弹框处理

实战演示 文件上传 input 标签使用自动化上传&#xff0c;先定位到上传按钮&#xff0c;然后 send_keys 把路径作为值给传进去. 如图所示&#xff0c;是企业微信文件上传的页面 定位到标签为 input&#xff0c;type 为 file 的元素信息&#xff0c;然后使用 send_keys 把文件…
阅读更多...
Harbor企业级Registry基础镜像仓库的详细安装使用教程（保姆级）

Harbor企业级Registry基础镜像仓库的详细安装使用教程（保姆级）

Harbor Docker 官方提供的私有仓库 registry&#xff0c;用起来虽然简单 &#xff0c;但在管理的功能上存在不足。 Harbor是vmware一个用于存储和分发Docker镜像的企业级Registry服务器&#xff0c;harbor使用的是官方的docker registry(v2命名是distribution)服务去完成。 ha…
阅读更多...
原语：串并转换器

原语：串并转换器

串并转换器OSERDESE2 可被Select IO IP核调用。 OSERDESE2允许DDR功能 参考&#xff1a; FPGA原语学习与整理第二弹&#xff0c;OSERDESE2串并转换器 - 知乎 (zhihu.com) 正点原子。 ISERDESE2原语和OSERDESE2原语是串并转换器&#xff0c;他的的功能都是实现串行数据和并行…
阅读更多...
阿里云服务器怎么购买更省钱？优惠入口分享

阿里云服务器怎么购买更省钱？优惠入口分享

阿里云服务器怎么购买更省钱&#xff1f;不要直接在云服务器页面购买&#xff0c;不划算&#xff0c;在阿里云特价活动上购买更优惠&#xff0c;阿腾云atengyun.com分享阿里云服务器省钱购买方法&#xff0c;节省90%&#xff0c;可以先在阿里云CLUB中心领券 aliyun.club 专用满…
阅读更多...
JavaScript_Element对象_方法

JavaScript_Element对象_方法

1、Element.focus() Element.focus方法用于将当前页面的焦点&#xff0c;转移到指定元素上 2、Element.blur() Element.blur方法用于将焦点从当前元素移除 3、Element.remove() Element.remove方法用于将当前元素节点从它的父节点移除 4、Element.getBoundingClientRect() …
阅读更多...
蓝桥杯练习

蓝桥杯练习

即约分数 题目 思路 遍历所有的x&#xff0c;y&#xff0c;判断x/y是不是即越约分数。 代码 #include <iostream> using namespace std; int gcd(int x,int y) {int r;while(y!0){rx%y;xy;yr;}return x; } int main() {// 请在此输入您的代码int sum4039;//1/y和x/1都…
阅读更多...
C函数速查手册

C函数速查手册

链接下载&#xff1a;提取码:Tywdhttps://www.123pan.com/s/JRpSVv-PLnjv.html 双击打开即可
阅读更多...
RxJava/RxAndroid的基本使用方法（一）

RxJava/RxAndroid的基本使用方法（一）

文章目录 一、什么是RxJava二、使用前的准备1、导入相关依赖2、字段含意3、Upstream/Downstream——上/下游4、BackPressure5、BackPressure策略6、“热” and “冷” Observables7、 基类8、事件调度器9、操作符是什么&#xff1f; 三、RxJava的简单用法1、Observable——Obse…
阅读更多...
Docker安装教程

Docker安装教程

Docker安装教程 安装教程Centos7.6docker镜像源修改docker目录修改 Ubuntu20.04docker镜像源修改docker数据目录修改 安装教程 Centos7.6 &#x1f680;docker支持的Cetnos操作系统版本 CentOS 7 CentOS 8 (stream) CentOS 9 (stream) &#x1f680;支持的CPU ARM/X86_64 查看…
阅读更多...
django+drf+vue 简单系统搭建 （1） - django创建项目

django+drf+vue 简单系统搭建 （1） - django创建项目

本系列文章为了记录自己第一个系统生成过程&#xff0c;主要使用django,drf,vue。本人非专业人士&#xff0c;此文只为记录学习&#xff0c;若有部分描述不够准确的地方&#xff0c;烦请指正。 建立这个系统的原因是因为&#xff0c;在生活中&#xff0c;很多觉得可以一两行代码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023