為久經沙場的打工人,我們肯定經歷過一次次難忘的面試,這其中有愉快的交談,也有尷尬的對話,甚至還會有崩潰的瞬間...可以說,人類的面試悲歡喜樂,并不相通!近日看到一位程序員網友發帖吐槽:前端面試太難了,問啥啥不會,都快面哭了。
即使隔著手機屏幕,都已經感覺到了這位小伙伴的“崩潰瞬間”。當面對面試官的連環問題而完全不知所云,無法解答的時候,可能那時的我們只求找個地縫鉆進去吧。
其實,上面這位網友的尷尬遭遇,在面試的時候并不少見。很多情況下是由于我們的技術基礎并不扎實,也沒有形成自己的知識體系,導致我們在面對新行業、新領域的問題時,無法快速適應和解決。
就拿前端學科舉例,隨著新形勢下企業對于前端的綜合能力要求更加高,物聯網、大數據可視化、云計算、VR/AR、5G等新技術接踵而至,現在的前端工程師更是承擔了更多責任,而這些都取決于扎實的基礎之上,沒有系統的理論基礎,沒有成體系的技術架構,完全無法真正形成自己的技術競爭力。
因此推薦所有的前端er一門必備的課程《浠浠呀老師html+css前端入門教程,快樂學習,小白必看》。課程由浠浠呀老師為小白入門前端傾力打造的前端基礎教程。是零基礎小白入門前端開發的不二之選。
先來隆重介紹一下浠浠呀老師吧:
千鋒教研院執行院長,千鋒學科部總監,小獅視覺總監,前端培訓屆扛把子-千鋒HTML5大前端學科創建者。 畢業于布列斯特普希金國立大學,曾任北京市屬高校師資培訓中心特邀講師,多年擔任北京市屬高校師資培訓工作。著有《HTML5從入門到精通》、《Jquery從入門到實戰》、《PhotoShop CC實戰入門》、《Unity虛擬現實開發實踐》、《數據結構與算法(C語言篇)》、《Nginx 高性能 Web 服務器應用與實戰(微課版)》等多本書籍,被500多所高校選用,深受好評。 深耕IT職業教育行業十多年,學生遍布各大互聯網大廠,熱愛教育事業。對于教學研究、教學管理工作有深刻的理解。
視頻不同于以往傳統的前端教學視頻。摒棄了傳統教程填鴨式課堂講授的方式,用最直觀的動畫效果解釋原理,用最真實的案例鞏固知識。是一種全新的講課方式,對小白友好,能讓前端入門變得清晰簡單。
課程從最基礎開始,講解無廢話不反復,節奏明快,直擊痛點,直截了當地輸出干貨。將復雜的前端問題拆解成簡單的知識點。將前端知識點系統整理,結合實用案例,以講解+動畫的形式展現,讓學生真正地看到即學到。
課程設計十分用心,認真分析了小白們的日常學習習慣,思維習慣,知識背景。甚至對每一個小白可能出現疑問的地方做了預判。每個案例都悉心打磨,簡單而典型。用前期大量的教研時間換取學生們的接收知識時間。
本課程共包括2季,內容涵蓋,HTML,CSS和HTML5、CSS3。本次發布視頻第一季上半部分——HTML。課程共 50 集,16個部分,58個知識點,30個案例。
這里分享一個我平時常用的水波特效步驟,加在按鈕上特好使。
首先,是直接創建一個div盒子,不需要在里面添加其他內容,我們直接對盒子本身添加css就能形成水波效果。
html部分,我們div添加白色的波紋,所以在這里設置html背景為藍色。
<body style="background-color: cadetblue ;">
<div class="video"></div>
</body>
css部分,先設置好div的基本屬性
.video {
/* 基本屬性 */
width: 100px;
height: 100px;
border-radius: 50px;
/* 給背景顏色添加不透明度 */
/* 不透明度還可以通過添加opacity屬性修改 */
background-color: rgb(255, 255, 255, 0.6);
}
然后就是在video中添加這個特效中重中之重的內容,在css中設置animation。
Animation 是由三部分組成。
.video {
/* 添加ripple動畫效果 */
/* -webkit-animation適配-webkit內核的瀏覽器*/
-webkit-animation: ripple 1s linear infinite;
animation: ripple 1s linear infinite;
}
/* 定義ripple動畫效果 */
@-webkit-keyframes ripple {
/* 關鍵幀播放到0%時的狀態 */
0% {
/* 在box四周添加三層白色陰影 */
box-shadow: 0 0 0 0 rgb(255 255 255 / 25%),
0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%);
}
/* 關鍵幀播放到100%時的狀態 */
100% {
/* 分別改變三層陰影的距離
形成兩幀的動畫,然后在transition的過渡下形成動畫 */
box-shadow: 0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%),
0 0 0 40px rgba(50, 100, 245, 0);
}
}
/* 多種瀏覽器兼容性設置 */
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgb(255 255 255 / 25%),
0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%);
}
100% {
box-shadow: 0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%),
0 0 0 40px rgba(50, 100, 245, 0);
}
}
其中,linear是表示動畫的timing-function,其總共大致有以下幾種效果。
圖源水印
為了實現按鈕的響應式操作,我們可以給div再加上一個hover選擇器
/* 鼠標懸浮時的狀態 */
.video:hover {
/* 背景顏色不透明度變化 */
background-color: #FFFFFF;
/* 將對象放大1.2倍 */
transform: scale(1.2);
}
再給div添加一個transition屬性,讓div在鼠標移動的時候能自然過渡,其原理跟animation類似。
.video {
/* 添加動畫的過渡效果 */
transition: all 0.3s ease-in-out;
}
然后就能得到我們的結果,整體的代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.video {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: rgb(255, 255, 255, 0.6);
transition: all 0.3s ease-in-out;
-webkit-animation適配-webkit內核的瀏覽器*/
-webkit-animation: ripple 1s linear infinite;
animation: ripple 1s linear infinite;
}
.video:hover {
background-color: #FFFFFF;
transform: scale(1.2);
}
@-webkit-keyframes ripple {
0% {
/* 在box四周添加三層白色陰影 */
box-shadow: 0 0 0 0 rgb(255 255 255 / 25%),
0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%);
}
100% {
/* 分別改變三層陰影的距離
形成兩幀的動畫,然后在transition的過渡下形成動畫 */
box-shadow: 0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%),
0 0 0 40px rgba(50, 100, 245, 0);
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgb(255 255 255 / 25%),
0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%);
}
100% {
box-shadow: 0 0 0 10px rgb(255 255 255 / 25%),
0 0 0 20px rgb(255 255 255 / 25%),
0 0 0 40px rgba(50, 100, 245, 0);
}
}
</style>
</head>
<body style="background-color: cadetblue ;">
<div class="video"></div>
</body>
</html>
效果圖
ypora 是一款支持實時預覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個平臺的版本,目前完全免費。
https://typora.io/#
Markdown是一種輕量級標記語言,創始人為約翰·格魯伯(英語:John Gruber)。 它允許人們使用易讀易寫的純文本格式編寫文檔,然后轉換成有效的XHTML(或者HTML)文檔。這種語言吸收了很多在電子郵件中已有的純文本標記的特性。
由于Markdown的輕量化、易讀易寫特性,并且對于圖片,圖表、數學式都有支持,目前許多網站都廣泛使用Markdown來撰寫幫助文檔或是用于論壇上發表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡書等,甚至還能被使用來撰寫電子書。
在使用Dreamweaver編寫網頁時,遇到需要插入代碼塊、流程圖、數學公式時,總是顯得很無力,效率很低,效果不好,使用Typora會讓這些問題迎刃而解,且輕便,簡單。
直接看一個demo:
導出為html:
html網頁源代碼:
其可以導出的格式有:
流程圖樣式包括:
1、標準流程圖源碼格式(橫向):
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
2 mermaid語言庫繪流程圖
Mermaid 是一個用于畫流程圖、狀態圖、時序圖、甘特圖的庫,使用 JS 進行本地渲染,廣泛集成于許多 Markdown 編輯器中。
Mermaid 作為一個使用 JS 渲染的庫,生成的不是一個“圖片”,而是一段 HTML 代碼,因此安全許多。
官網:https://mermaidjs.github.io/
Github 項目地址:https://github.com/knsv/mermaid
2.1 橫向流程圖源碼格式:
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
2.2 豎向流程圖源碼格式:
sequenceDiagram
Title: 標題:復雜使用
對象A->對象B: 對象B你好嗎?(請求)
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎?
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
2.3 時序圖源碼復雜樣例
gantt
dateFormat YYYY-MM-DD
title 軟件開發甘特圖
section 設計
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI設計 : des3, after des2, 5d
未來任務 : des4, after des3, 5d
section 開發
學習準備理解需求 :crit, done, 2014-01-06,24h
設計框架 :crit, done, after des2, 2d
開發 :crit, active, 3d
未來任務 :crit, 5d
耍 :2d
section 測試
功能測試 :active, a1, after des3, 3d
壓力測試 :after a1 , 20h
測試報告 : 48h
2.4 甘特圖樣例:
gantt
dateFormat YYYY-MM-DD
title 軟件開發甘特圖
section 設計
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI設計 : des3, after des2, 5d
未來任務 : des4, after des3, 5d
section 開發
學習準備理解需求 :crit, done, 2014-01-06,24h
設計框架 :crit, done, after des2, 2d
開發 :crit, active, 3d
未來任務 :crit, 5d
耍 :2d
section 測試
功能測試 :active, a1, after des3, 3d
壓力測試 :after a1 , 20h
測試報告 : 48h
教程:
Markdown 高級技巧 | 菜鳥教程(使用 Typora 編輯器講解 Markdown 的語法)
https://www.runoob.com/markdown/md-advance.html
ref
1 Typora 完全使用詳解
https://sspai.com/post/54912/
2 用什么軟件畫流程圖好?-悟空問答
https://www.wukong.com/question/6809962012198568195/
3 Mermaid 實用教程
https://blog.csdn.net/fenghuizhidao/article/details/79440583
-End-
*請認真填寫需求信息,我們會在24小時內與您取得聯系。