web lab- Git Basics,HTML/CSS,JS
Git Basics
这部分内容介绍了基本的终端操作指令和git指令，下面会列出一些个人认为有意思的指令。
- git status
- git log
- git diff
- git checkout branch-name : 切换到存在的branch
- git checkout -b branch-name : 创建并切换到新branch
- git reset –hard : 撤销工作区中所有未提交的修改内容，将暂存区与工作区都回到上一次版本，并删除之前的所有信息提交
HTML/CSS
Step 1
在html文件中添加img文件，具体使用<img>这个元素进行添加
添加后Step 1便完成了
Step 2
用<link>来连接CSS，而此元素拥有两个属性如下。
rel: 描述了当前文档与链接目标之间的关系nofollow: 告诉搜索引擎不跟踪该链接。noopener: 防止新页面能通过window.opener获取到打开它的窗口的引用，常用于安全防范。noreferrer: 不发送 HTTP 引荐头信息。stylesheet: 表示链接的是一个 CSS 样式表。preload: 提前加载资源以提高页面性能。icon: 表示链接的是一个网站图标（如 favicon）。
href: 用于指定链接的目标，即当用户点击链接时将会打开的 URL。
接下来就要插入我们的CSS了。
首先在<head>中插入<link>
1
2
3
4
<head>
<title>Catbook</title>
<link rel="stylesheet" href="styles.css" />
</head>
其次，我们开始编辑CSS文件，我们要创建独立的类，来存放我们的CSS属性
1
2
3
.u-textCenter {
text-align: center;
}
而这个其实是使文本居中的CSS属性，我们将它应用到我们的<h1>中去
1
<h1 class="u-textCenter">Buka Buka</h1>
至此，Step 2完成了
Step 3
和Step2相似，把其余元素也用CSS元素做文本居中处理
Step 4
添加字体，代码如下;
1
2
3
4
5
6
7
8
9
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
body {
font-family: "Open Sans", sans-serif;
}
Step 5/6
增加一个Navbar(导航条)
使用tag<nav>来完成
随后我们要用到CSS-variables
1
2
3
4
5
<nav class="navContainer">
<h1 class="navTitle">Catbook</h1>
</nav>
CSS 变量以 -- 开头，后跟变量的名称.
1
2
3
4
5
6
7
8
9
:root{
--primary:#396dff;
--grey:#f7f7f7;
--white:#fff;
}
:root 伪类表示文档根元素（<html> 元素），可以在这里定义全局的 CSS 变量。
到这里Step 5完成，让我们来看Step 6
我们需要用那些变量来style这个nav bar，需要去创建一个新的container类
1
2
3
4
5
6
7
.navContainer{
width: 100%;
background-color: var(--primary);
}
Step 7
一些CSS变量可以接多个值，像是margin，padding。
而这里，我们了解了8pt Grid System，则可以为Step 6中的navContainer
来添加padding属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
:root {
--primary: #396dff;
--grey: #f7f7f7;
--white: #fff;
--xs:4px;
--s:8px;
--m:16px;
--l:24px;
}
.navContainer {
background-color: var(--primary);
padding: var(--s) var(--m);
}
Step 8
接下来我们要修改corners，要添加border-radius属性来实现圆角处理
.u-border-radius{
border-radius: 25px;
}
Step 9
接下来我们要将Profile的图片变成一个Perfect Circle！
.avatar {
width: 500px;
height: 500px;
max-width: 100%;
max-height: 100%;
border-radius: 50%;
}
.avatar {
/* make it responsive */
max-width: 100%;
width: 100%;
height: auto;
display: block;
/* div height to be the same as width*/
padding-top: 100%;
/* make it a circle */
border-radius: 50%;
/* Add image */
background-image: url("cat.png");
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
}
Step 10
接下来我们会用到Flexbox
flex 是 CSS 的一种布局模式，称为 Flexbox（弹性盒子布局）。它旨在提供一种更高效的方式来排列、对齐和分布容器中的元素，即使这些元素的尺寸是动态的或者未知的。
.flex{
display: flex;
flex-direction: row;
justify-content: center;
}
.item{
text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="flex">
<div class="item">
<h4>About Me</h4>
<p>
I am more of a turtle person but I'm just trying to fit in and get a catbook.
</p>
</div>
<div class="item">
<h4>My Favorite Type of Cat</h4>
<p>
I actually prefer turtles.
</p></div>
</div>
Step 11
这里我们将接触到两个flex的属性
- flex-grow：决定项目如何分配剩余空间
- flex-basis：决定项目的初始大小
JS
- let :
let声明的变量是块作用域（block scope）。let变量只在其所在的块级作用域（由一对花括号{}包围）内可见。 - var :
var声明的变量是函数作用域或全局作用域。如果在函数内使用var声明变量，那么这个变量在整个函数内都是可见的。
一些有用的关键字
- console.log()
- alert()
- for…of…
- object : collection of name:value pairs
如何复制array和object
1
2
3
4
5
let arr=[1,2,3];
let copyArr=[...arr];
let obj={name:"Bill Gates"};
let copyObj={...obj};
Funtions
(parameters) => {body}
- setInterval() :
setInterval()方法用于在指定的毫秒数之后反复执行代码或函数 - setaTimeout() :
setTimeout()方法用于在指定的毫秒数之后执行一次代码或函数
Class
constructor(): attributes- functions: methods