CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
通过使用 position 属性,选择不同类型的定位。
position: relative;
在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
position: absolute;
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
position:fixed;
直接以浏览器窗口作为参考进行定位,它是浮动在页面中,元素位置不会随浏览器窗口的滚动条滚动而变化
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
img{
float:right;
}
菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>「测试游记」- 菜单栏</title>
<style type="text/css">
.menu {
width: 100%;
height: 80px;
background: #5c5dff;
color: white;
}
.menu li {
float: left;
width: 100px;
height: 100%;
font: normal 20px/80px 'Microsoft Sans Serif';
list-style: none;
margin-left: 20px;
text-align: center;
}
.menu li:hover{
background: coral;
color: darkblue;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
</body>
</html>
HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 和 部分中。
1、行间事件(主要用于事件)
<div onclick="alert('Hello Python')">box</div>
弹出hello
2、页面script标签嵌入
<script type="text/javascript">
alert('ok!');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) 驼峰式命名
// 先声明后赋值
var x;
x = 20;
// 在声明的时候赋值
var y=3;
// 同时给多个变量赋值
var a = 100,b = 200,c = 300;
var y=3;
var st='python'
true和false(小写)
变量声明未初始化,它的值就是undefined
表示空对象,类似于python中的None
var tr = null
方法:
length属性:获取数组长度
pop() 方法从数组中删除最后一个元素
push() 方法(在数组结尾处)向数组添加一个新的元素
//创建数组
var skill= Array("html","css","js");
skill[0]
skill.length
skill.pop()
skill.push('jquery')
image-20190903151321110
+
(加)、 -
(减)、 *
(乘)、/
(除)、 %
(求余)=
、 +=
、 -=
、 *=
、 /=
、 %=
、++
==
、===
、>
、>=
、<
、<=
、!=
、&&
(而且 )、||
(或者 )、!
(否 )条件运算
var a = 199;
if(a>200){
alert('大于200');
}
else if(a>100){
alert('大于100')
}
else {
alert(a);
}
弹框
switch(表达式) {
case n1:
代码块
break;
case n1:
代码块
break;
default:
默认代码块
}
// while循环
while(条件语句){
循环体
}
// for 循环
for (语句1,语句2,语句3 ){
循环体代码
}
// for in 循环
for (x in arrayr){
循环体代码
}
var aa = 101, bb = 100;
while (aa > bb) {
console.log(aa);
aa -= 1;
}
while
for (i=0;i<10;i++){
console.log(i)
}

var aList = Array(11,22,33,44,55);
for (i in aList){
console.log(i);
console.log(aList[i]);
}
for in
var objC = {name: 'abc', age: 19};
// 遍历对象
for (x in objC) {
console.log(x);
console.log(objC[x]);
}
遍历对象
// 函数的定义 使用function
function func() {
alter(999)
}
// 函数调用
func()
提示:JavaScript 对大小写敏感。关键词 function 必须是小写的
function addNumber(var1,var2) {
alert(var1 + var2;);
}
addNumber(11,22)
function addNumber(var1, var2) {
return var1 + var2;
}
var res = addNumber(11,222);
alert(res)
对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var objA={name : "python",age : 18,id :123};