pythonjs介绍
一.前端溢出属性
文本内容超出了标签的最大范围
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文溢出</title>
<style>
.q1 {
height: 20px;
width: 20px;
border: 5px solid blueviolet;
}
</style>
</head>
<body>
<p class="q1">我算是服了</p>
</body>
</html>
# 解决溢出的两种方法
overflow: auto; # 边框内添加滚动条
overflow: hidden; # 隐藏溢出部分
1.1图片溢出与方法
"""
已知文字溢出方法同理图片也一样
图片太大覆盖了边框
overflow: hidden; # 隐藏溢出部分
但只会显示图片的一角
需要修改图片属性
"""
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文溢出</title>
<style>
/*.q1 {*/
/* height: 50px;*/
/* width: 50px;*/
/* border: 5px solid blueviolet;*/
/*overflow: auto; # 边框内添加滚动条*/
/*overflow: hidden; # 隐藏溢出部分*/
/*}*/
body {
background-color: cornflowerblue;
}
div {
height: 100px;
width: 100px;
border-radius: 50%;
border: 5px solid rebeccapurple;
overflow: hidden;
}
div img {
width: 100%;
}
</style>
</head>
<body>
<div>
<img src="https://img1.baidu.com/it/u=503246020,2844004668&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">
</div>
</body>
</html>
二.定位属性
# 定位的状态
1.静态定位 # position :static
所有的标签默认都是静态定位即不能通过定位操作改变位置
2.相对定位 # position :relative
相对于标签原来的位置做定位
'left\right\top\bottom 四个方向移动'
3.绝对定位 # position :absolute
相对于已经定位过的父标签做定位
4.固定定位 # position :fixed
相对于浏览器窗口做定位 固定模板如下
position: fixed;
right: **px;
bottom: **px;
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c1 {*/
/* height: 50px;*/
/* width: 100px;*/
/* background-color: cyan;*/
/* !*position: static;*!*/
/* !*position:relative;*!*/
/* !*left: 100px;*!*/
/*}*/
/*.c2 {*/
/* height: 50px;*/
/* width: 100px;*/
/* background-color: darkorchid;*/
/* position: absolute;*/
/* top: 50px;*/
/* left: 100px;*/
/*}*/
.c1 {
height: 50px;
width: 100px;
background-color: chartreuse;
position: fixed;
right: 50px;
bottom: 100px;
}
</style>
</head>
<body>
<div class="c1">米妮手机专卖店
<!-- <div class="c2">购物车空空如也</div>-->
</div>
<div style="height: 800px; background-color: darkcyan" ></div>
<div style="height: 800px; background-color: royalblue" ></div>
<div style="height: 800px; background-color: darkblue" ></div>
</body>
</html>
三.z-index属性
"""
前端界面其实是一个三维坐标系 z轴指向用户(我们用户)
"""
动态弹出的分层界面 我们也称之为叫模态框
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.motaikuang {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(128,128,128,0.8);
z-index: 10;
}
.c2 {
height: 150px;
width: 300px;
background-color: darkorchid;
z-index: 11;
position: fixed;
left: 13%;
top: 1%;
}
</style>
</head>
<body>
<div>最底下那层</div>
<div class="motaikuang"></div>
<div class="c2">
<p><input type="">周围灰色是中间那层覆盖了底层</p>
<p><input type="">覆盖了中间那层灰色最上边一层</p>
</div>
</body>
</html>
四.JavaScript简介
# 1.JavaScript：是一门前端编程语言，因前端略受制于后端，所以被发明出来一个叫nodejs的工具
(支持JavaScript跑在后端服务器上) 简写‘js’
# 2.JavaScript与ECMAScript：JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 3.JavaScript由于开发时间较短，本身BUG很多，所以为了解决这些bug一直在编写相应的补丁
补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript两个版本：ECMA5 与 ECMA6
五.js编写方式
# js本身是一门编程语言如何编写：
1.pycharm提供了js文件
2.浏览器中提供了js环境
六.变量与注释
# 1.注释语法
// 单行注释
/*
多行注释
*/
# 2.结束符号
JavaScript中的语句要以分号（;）为结束符。
# 3.变量声明
在js中定义变量需要使用关键字声明
可以使用_，数字，字母，$组成，不能以数字开头。
var ： var name = 'thn';
let ： let name = 'jason';
console.log('hello world') 打印 hello world
"""
var声明都是全局变量 let可以声明局部变量
"""
# 4.常量声明const 常量声明过后其值是不可修改的
const name = 100
undefined
name
100
var name = 50
VM656:1 Uncaught SyntaxError: Identifier 'name' has already been declared
at <anonymous>:1:1 报错
name
100
七.数据类型
'typeof：查看数据类型的方式'
# 1.数值(Number)
'js是不区分整型与浮点型的，只有一种数字类型'
var a = 1; // 1
'NnN 表示这不是一个数字'
parseInt('123'); // 123
parseInt('qqq'); // NaN
# 2.字符类型(String)
'默认只能是单引号与双引号是字符串'
var name = 'thn';
var name = "thn";
'格式化字符串是顿号'
var name = `thn`;
'拼接字符串+号'
var a = 'hello';
var b = 'world';
var c = a + b;
console.log(c)
// helloworld
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
| $ | 占位符 |
# 3.布尔类型(Boolean)
js中布尔值全是小写
true false
布尔值为false的 0 空字符串 null undefined NaN
var bb
bb
undefined 未被定义（他空有一个名字没有值）
# 4.对象(Object)
"""
js中的所有事物都是对象：字典，数值，字符串，等 函数除外
对象只是带有属性和方法的特殊数据类型。
"""
'数组'数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "QQ"];
console.log(a[1]); // 123
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
主题作业
点击查看代码
不会也要写2022-4-28
大晚上不睡觉刚这里干嘛
#python#java#going
不会也要写2022-4-28
大晚上不睡觉刚这里干嘛
#python#java#going
不会也要写2022-4-28
大晚上不睡觉刚这里干嘛
#python#java#going
不会也要写2022-4-28
大晚上不睡觉刚这里干嘛
#python#java#going
不会也要写2022-4-28
大晚上不睡觉刚这里干嘛
#python#java#going
不会也要写2022-4-28
大晚上不睡觉刚这里干嘛
#python#java#going
css文件内容
点击查看代码
body {
margin: 0;
background-color: lavender;
}
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: gray;
}
.blog-right {
float: right;
height: 100%;
width: 80%;}
/* position: fixed;/
/ left: 0;/
/ top: 0;/
/ background-color: cornsilk;/
/}*/
.tupian {
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid burlywood;
overflow: hidden;
margin: 18px auto;
}
.tupian img {
width: 100%;
}
.miaoshu, .jianjie {
color: aqua;
text-align: center;
margin: 15px auto;
}
.t1 a:hover,.t2 a:hover {
color: aqua;
}
.t1,.t2 {
font-size: 20px;
text-align: center;
margin: 3px auto;
}
.tupiao {
background-color: darkgray;
margin: 25px 30px 20px 10px;
box-shadow: 5px 5px 5px rgb(0,0,0.9);
}
.y1,.y2 {
font-size: 30px;
}
.y3 {
font-size: 30px;
border-bottom: 3px solid #1a1b1c;
}
.you1 .y2 {
float: right;
margin: 50px 10px 0 0 ;
}
图片展示
浙公网安备 33010602011771号