定位、z-index、JavaScript变量和数据类型
溢出属性
# 文本内容超出了标签的最大范围
overflow: hidden; 直接隐藏文本内容
overflow: auto\scroll; 提供滚动条查看
# 溢出实战案例
div {
overflow: hidden;
}
div img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头像</title>
<style>
body{
background-color: #6868de;
}
p{
color: red;
}
div{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
overflow: hidden;
}
div img{
width: 100%;
}
</style>
</head>
<body>
<p>今日美女</p>
<div>
<img src="https://img2.baidu.com/it/u=1854315185,2758383691&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500" alt="今日美女">
</div>
</body>
</html>
定位属性
# 1.定位的状态
1.静态定位 static
所有的标签默认都是静态定位即不能通过定位操作改变位置
2.相对定位 relative
相对于标签原来的位置做定位
3.绝对定位 absolute
相对于已经定位过的父标签做定位
4.固定定位 fixed
相对于浏览器窗口做定位
# 2.定位操作
position
left\right\top\bottom
绝对定位
如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
eg:小米商城购物车
固定定位
eg:右下方回到底部
position: fixed;
right: 0;
bottom: 50px;
z-index属性
"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为叫模态框
# 补充知识
rgba(124,124,222,0.5); 最后一个参数可以调整颜色透明度
position: fixed;
z-index: 30;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -50px;
<style>
.a {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(124,124,222,0.5);
z-index: 10;
}
.b{
position: fixed;
height: 100px;
width: 300px;
background-color: white;
z-index: 30;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -50px;
}
</style>
<div class="a"></div>
<div class="b">
<p>username: <input type="text" name="username"></p>
<p>password: <input type="text" name="password"></p>
</div>
课堂练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标签</title>
<link rel="stylesheet" href="bolg.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="https://img2.baidu.com/it/u=1854315185,2758383691&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500" alt="">
</div>
<div class="blog-title">
<span>美女的博客</span>
</div>
<div class="blog-desc">
<span>美女很美，留下美好回忆</span>
</div>
<div class="blog-link">
<ul>
<li><a href="">介绍</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信</a></li>
</ul>
</div>
<div class="blog-info">
<ul>
<li><a href="">电影</a></li>
<li><a href="">动漫</a></li>
<li><a href="">电视剧</a></li>
</ul>
</div>
</div>
<div class="bolg-right">
<div class="article-list">
<div class="article-title">
<span class="title">美女养成日记</span>
<span class="date">2022-04-27</span>
</div>
<div class="article-desc">
<span class="desc">美好身材养成必要的是养生餐食</span>
</div>
<div class="article-info">
<span class="fupo">#怎么样花钱</span>
<span class="dage">#如何优雅</span>
</div>
</div>
</div>
<div class="bolg-right">
<div class="article-list">
<div class="article-title">
<span class="title">美女养成日记</span>
<span class="date">2022-04-27</span>
</div>
<div class="article-desc">
<span class="desc">美好身材养成必要的是养生餐食</span>
</div>
<div class="article-info">
<span class="fupo">#怎么样花钱</span>
<span class="dage">#如何优雅</span>
</div>
</div>
</div>
<div class="bolg-right">
<div class="article-list">
<div class="article-title">
<span class="title">美女养成日记</span>
<span class="date">2022-04-27</span>
</div>
<div class="article-desc">
<span class="desc">美好身材养成必要的是养生餐食</span>
</div>
<div class="article-info">
<span class="fupo">#怎么样花钱</span>
<span class="dage">#如何优雅</span>
</div>
</div>
</div>
<div class="bolg-right">
<div class="article-list">
<div class="article-title">
<span class="title">美女养成日记</span>
<span class="date">2022-04-27</span>
</div>
<div class="article-desc">
<span class="desc">美好身材养成必要的是养生餐食</span>
</div>
<div class="article-info">
<span class="fupo">#怎么样花钱</span>
<span class="dage">#如何优雅</span>
</div>
</div>
</div>
<div class="bolg-right">
<div class="article-list">
<div class="article-title">
<span class="title">美女养成日记</span>
<span class="date">2022-04-27</span>
</div>
<div class="article-desc">
<span class="desc">美好身材养成必要的是养生餐食</span>
</div>
<div class="article-info">
<span class="fupo">#怎么样花钱</span>
<span class="dage">#如何优雅</span>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
background-color: lightsteelblue;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
.blog-left {
float: left;
height: 100%;
width: 20%;
position: fixed;
left: 0;
top: 0;
background-color: #dec4c9;
}
.blog-avatar {
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid #7ae0c8;
overflow: hidden;
margin: 20px auto;
}
.blog-avatar img {
width: 100%;
}
.blog-title, .blog-desc {
color: coral;
text-align: center;
margin: 20px auto;
}
.blog-link, .blog-info {
font-size: 24px;
text-align: center;
margin: 100px auto;
}
.blog-link a, .blog-info a {
color: darkgray;
}
.blog-link a:hover, .blog-info a:hover {
color: coral;
}
/*右侧*/
.bolg-right {
float: right;
width: 80%;
}
.article-list {
background-color: #e8d7d1;
margin: 15px 30px 15px 15px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.article-title {
border-left: 6px solid red;
}
.article-title .title {
font-size: 36px;
padding-left: 10px;
}
.article-title .date {
float: right;
margin: 10px 20px;
font-weight: bolder;
}
.article-desc {
padding-top: 10px;
font-size: 18px;
text-indent: 2px;
margin: 15px 5px ;
color: crimson;
border-bottom: 1px solid black;
}
.article-info {
font-size: 18px;
color: brown;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
JavaScript简介
# 1.JavaScript与Java没有半毛钱关系
之所以叫这么个名字纯粹是为了蹭当时Java的热度
# 2.JavaScript简称JS 也是一门前端的编程语言
前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用
# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript与ECMAScript
JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 5.版本问题
ECMA5
ECMA6
变量与注释
"""
编写js代码的位置
1.pycharm提供的js文件
2.浏览器提供的js环境(学习阶段推荐)
"""
# 1.注释语法
// 单行注释
/*多行注释*/
# 2.结束符号
分号结束 console.log('hello world');
# 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中布尔值是全小写
true 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)})
VM3143:1 jason
VM3143:1 tony
VM3143:1 kevin
VM3143:1 oscar
VM3143:1 jerry
l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
VM3539:1 jason 0
VM3539:1 tony 1
VM3539:1 kevin 2
VM3539:1 oscar 3
VM3539:1 jerry 4
l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 tony 1 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
7.splice
splice(起始位置,删除个数,新增的值)
定位、z-index、JavaScript变量和数据类型的更多相关文章
- JavaScript变量和数据类型
变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象.在JavaScript中,用来指定变量的关键字为var.当声明新变量时,可以使用关键词 "new" 来声明其类型 ...
- JavaScript变量与数据类型详解
变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问. 变量的作用就是用于存储值. 语法: 声明变量时,总是以关键字var打头.任何情况下都应该这样做.然后给变 ...
- JavaScript变量与数据类型
变量 javascript的变量很松散,每个变量初始仅仅用于保存一个占位符而已.定义变量的操作符是 var, var 后面跟着一个标识符--当作变量的名字. 比如: var myname;//定义了一 ...
- python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
- 408 JavaScript 变量、数据类型、正则
JavaScript 特点 是一门解释性脚本语言 .基于对象脚本编程.简单性(弱类型).安全性.动态性.跨平台 作用: 初学js 引入方式 与html有相同之处 也是3种1 用JavaScript前缀 ...
- JavaScript变量、数据类型、函数
#转载请留言联系 说在前面: JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. JavaScript语句的末尾用 ; 结束.空格没有特殊意义. 1.JavaScr ...
- JavaScript——变量
本文简述了JavaScript变量的数据类型,以及变量类型检测与类型转换 一.介绍 JavaScript的变量有6种数据类型,包含5种原始类型和1种对象类型.本人比较喜欢用逻辑图的形式总结知识点,这样 ...
- JavaScript 札记（数据类型和变量、）
1. 变量名由:字母.下划线.$.数字组成,只可以字母.下划线.$开头. 2.JavaScript区分大小写! 3.命名规范:匈牙利命名法(不论是变量名还是函数名). 4.基本类型(3种):字符串.数 ...
- 《JavaScript高级教程》学习笔记一、变量和数据类型
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...
随机推荐
- 在多线程环境下，SimpleDateFormat 是线程安全的吗？
不是,非常不幸,DateFormat 的所有实现,包括 SimpleDateFormat 都不是 线程安全的,因此你不应该在多线程序中使用,除非是在对外线程安全的环境中 使用,如 将 SimpleDa ...
- centos 后台 运行jar包方法
后台运行jar包方法: 1.nohup java -jar shareniu.jar & nohup意为后台不挂断运行,与是否账号退出无关 2.nohup java -jar shareniu ...
- element-ui 无法对绑定表单的对象中的对象属性进行验证
<el-form-item label="类型" :label-width="formLabelWidth" prop="typeId" ...
- 插值方法 - Newton多项式（非等距节点）
不多话.Nowton插值多项式(非等距节点)代码: 1 # -*- coding: utf-8 -*- 2 """ 3 Created on Wed Mar 25 15: ...
- Java入门之基础程序设计
1.Java语言特点了解 1. java语言: 有些语言提供了可移植性.垃圾收集等机制,但是没有提供一个大型的库.如果想要有酷炫的绘图功能.网络连接功能或者数据库存取功能,就必须动手编写代码.Ja ...
- ROS学习文章
ros机器人到底有没有必要学习?
- Spring Security OAuth 笔记
1 单点登录 关于单点登录的原理,我觉得下面这位老哥讲的比较清楚,有兴趣可以看一下,下面我把其中的重点在此做个笔记总结 https://juejin.cn/post/6844904079274197 ...
- 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库
推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...
- 深入解析 float
0.前言 float属性在css2中是一个热门的属性,被广泛应用于布局之中,同时由于不当使用float带来的问题也非常多,本文结合自己对float的理解以及实际项目中碰到float的相关问题,做一个详 ...
- indexOf返回值问题
String s = "aoood";System.out.println(s.indexOf(""));//返回0 System.out.println(s. ...