前端三剑客快速入门（三）
前言
前端三剑客快速入门（一）
前端三剑客快速入门（二）
书接上文，重新排版了。
CSS
- CSS定位
基本属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 2000px;
}
.box{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
.pro{
/* 绝对定位 脱离文档流 参照物视窗左上角 */
/* position: absolute; */
/* 相对定位 不脱离 元素原来位置 */
/* position: relative; */
/* 固定定位 脱离 当前视窗 */
position: fixed;
top: 80px;
left: 80px;
z-index: -100;
}
.pro-ab{
position: absolute;
/* z-index 只能为整数，值越大，就越在上层 */
z-index: 999;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box pro">2</div>
<div class="box pro-ab">3</div>
</body>
</html>
设置参照物：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pic-box{
width: 800px;
margin: auto;
position: relative;
}
.list{
position: absolute;
top: 80px;
left: 300px;
}
</style>
</head>
<body>
<div class="pic-box">
<img src="pic/th.jpg" alt="图片正在加载ing...">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
返回顶部效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 2000px;
}
.box{
position: fixed;
bottom: 100px;
right: 100px;
}
</style>
</head>
<body>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<div class="box">
<button>
<a href="#">返回顶部</a>
</button>
</div>
</body>
</html>
还原设计稿
因为主要要做JavaWeb，这学期还有Hadoop的学习，所以先开始JS，为JavaWeb做好铺垫。另外我也看了一下还原设计稿，需要ps，真就是照着文件一点一点编码，确实很符合工作实际，不过相对需要的时间也会变多，所以还是暂时跳过。可能会在寒假补上，总之肯定是要学完善的。
JavaScript
JavaScript简称JS，是一种脚本语言，主要控制网页的行为。即用户与浏览器的交互、浏览器与服务器的交互。以ECMAScriptS为标准，可以理解为ECMAScriptS是JS的版本。
入门例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<script>
//注释
// alert("hello world");
console.log("hello world");
</script>
</body>
</html>
变量与数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<script>
// var 声明变量
// var firstName = "hello world";
// console.log(firstName);
// var声明多个变量
// var s1 = "hello",s2 = "woeld";
// console.log(s1);
// console.log(s2);
//数据类型
// var s = "hello"; //字符串 string
// var n = 100;//数值 number
// var b = true;//布尔 只有true 真、false 假
// 数值计算 + - * /
var n1 = 20,n2 = 10;
var result = n1 + n2;
console.log(result);
// 字符串的拼接
var s1 = "hello ",s2 = "world";
result = s1 + s2;
console.log(result);
</script>
</body>
</html>
表达式与运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>你好</h1>
<script>
// str1 = "hello";//将字面量赋值给变量
// str2 = "world";
// result = str1 + str2;//将表达式赋值给变量
// console.log(result);
// 表达式
// var num1 = 188;
// console.log(++num1 + num1++)//189 + 189
// console.log(num1)
// console.log("-----------")
// var num2 = 188;
// console.log(num2++ + ++num2)//188 + 190
// console.log(num2)
// 比较运算符
// console.log(10 == "10");//不比较数据类型，会自动进行数据转换
// console.log(10 != "10");//不比较数据类型，会自动进行数据转换
// console.log(10 !== "10")
// console.log(10 === "10");
// 逻辑运算符
var username = "admin";
var password = "123456";
console.log(username === "admin" && password === "123456");
var username1 = "admin";
console.log(username1 === "admin" || username1 === "test");
console.log(!false)
//赋值运算符 = += -= *= /=
</script>
</body>
</html>
后言
这几节的JS内容都比较简单，学过别的语言的都会，再冗杂的去练习就属于鸡肋了。我就挑了一点有JS特点的简单的练习了练习，想要学习的小伙伴把上边的例子练习一下即可。后面的就是条件、循环、对象、函数、数组，这部分也是别的语言都包含的。再后面的正则表达式、DOM、BOM才是JS核心。估计可能周日去了。明天假期主要学习Hadoop，简单的跟一下JS。总的来说今天博客质量不是很高，还是得努力啊。
