前端三劍客快速入門（三）
- 2022 年 10 月 7 日
- 筆記
- java web開發基礎教程
前言
前端三劍客快速入門（一）
前端三劍客快速入門（二）
書接上文，重新排版了。
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。總的來說今天博客質量不是很高，還是得努力啊。
