定位、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定义任何类型变 ...
随机推荐
- spring-boot-learning-spring Security
SpringSecurity的简单原理: 一旦启用了Spring Security,Spring IoC容器就会为你创建一个名称为springSecurityFilterChain 的Spring B ...
- int 和 Integer 哪个会占用更多的内存？
Integer 对象会占用更多的内存.Integer 是一个对象,需要存储对象的元数据. 但是 int 是一个原始类型的数据,所以占用的空间更少.
- WSGI是个啥?大白话告诉你wsgi做了什么!
定义: 官方定义:wsgi是Web服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI)是为Python语言定义的Web服务器和Web应用程序或框架之 ...
- visual studio 2019工具里添加开发中命令提示符的方法
最新新装了visual studio 2019,发现默认的没有开发者命令提示符 现将添加步骤描述如下: 从VS2019菜单选择"Tools",然后选择"外部工具" ...
- nginx开启gzip和缓存配置
# 开启gzip gzip on; # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用C ...
- JS判断数组中的对象的每一个值不能为空
方法一:使用every()函数,此函数不怎么常用,想要了解更多请自查 //表格 evaluateData为表格的数据 <el-table id="out-table3" :d ...
- 虚拟机上 安装 CentoOS 7.5 1804 过程记录
1.准备安装镜像 在开始安装CentOS之前,必须下载安装ISO映像.镜像可从CentOS网站https://www.centos.org/download/.提供以下基本类型的镜像: DVD ISO ...
- flex布局图片和文字同级，文字过多导致图片变形问题
图片增加css样式即可 flex-grow: 0;flex-shrink: 0;
- Mysql_事务_存储过程_触发器
一.什么是事务? 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言( ...
- EFCore 6.0入门看这篇就够了
前言 作为一直在dotNet行业耕耘的码农,这几年在大大小小项目中也涉及到了许多ORM框架,比如:EFCore,Dapper,NHibernate,SqlSugar等等,这些ORM都有各自的优缺点,大 ...