定位、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定义任何类型变 ...
随机推荐
- kafka 的高可用机制是什么？
这个问题比较系统,回答出 kafka 的系统特点,leader 和 follower 的关系,消息 读写的顺序即可.
- 数仓建模—OneID
今天是我在上海租房的小区被封的第三天,由于我的大意,没有屯吃的,外卖今天完全点不到了,中午的时候我找到了一包快过期的肉松饼,才补充了1000焦耳的能量.但是中午去做核酸的时候,我感觉走路有点不稳,我看 ...
- JDBC和桥接模式
本文参考 网上对于JDBC与桥接模式的理解各有不同,在这片文章里提出的是我个人对于二者的理解,本文参考的其它博文如下: https://blog.csdn.net/paincupid/article/ ...
- Spark学习摘记 —— Pair RDD行动操作API归纳
本文参考 参考<Spark快速大数据分析>动物书中的第四章"键值对操作",本篇是对RDD转化操作和行动操作API归纳的最后一篇 RDD转化操作API归纳:https:/ ...
- c++中“::”和“:”啥意思
c++中"::"和":"啥意思 (1)"::" 1)类作用域操作符."::"指明了成员函数所属的类.如:M::f(s) ...
- Proxy相比于defineProperty的优势
本文原链接:https://www.jianshu.com/p/860418f0785c https://blog.csdn.net/sinat_17775997/article/details/83 ...
- Python 图_系列之基于邻接炬阵实现广度、深度优先路径搜索算法
图是一种抽象数据结构,本质和树结构是一样的. 图与树相比较,图具有封闭性,可以把树结构看成是图结构的前生.在树结构中,如果把兄弟节点之间或子节点之间横向连接,便构建成一个图. 树适合描述从上向下的一对 ...
- java中将科学技术发转为正常数据
import java.text.NumberFormat; public class test { public static void main(String[] args) { double d ...
- CentOS系统Tomcat 8.5或9部署SSL证书
本文档介绍了CentOS系统下Tomcat 8.5或9部署SSL证书的操作说明. 环境准备 操作系统:CentOS 7.6 64位 Web服务器:Tomcat 8.5或9 前提条件 已从阿里云SSL证 ...
- macos停止MySQL服务
1.命令行中 使用 find /usr -name mysql 查找自己电脑中MySQL的安装位置 例如我查找到我电脑MySQL安装位置是 /usr/local/Cellar/mysql@5.6/5 ...