我把整體分為了三個部分
1.空洞的設計方法（因為大多數的人對設計的方法論都處在一個看了、學了、但是用不上的階段，主要是講在我分享的內容中可能會用到的一些設計理論和方法）
2.很一般的設計流程（這個優化設計的流程其實千千萬，最重要的還是和真實的項目相結合，每一個點都值得拿出來寫一個長篇大論，有機會具體來說說）
3.不成熟的實際應用（設計流程大多復雜而冗長，對于處在初創期或者發展期的產品來說，可能并沒有那么長的時間線來實踐，這一點也是我想和設計同行一起探討的問題）
“奧卡姆剃刀原理”是設計師們耳熟能詳的一個理論，即“如無必要，勿增實體”，在UI\UX設計中，我的理解是，如果能夠在用戶的行為路徑上和交互方式做出優化，就不要增加新的功能。
這個理論會貫穿在整個產品設計流程中。
用戶體驗五要素，是我們在學生時代就會聽到的一個理論，但其實對于五要素真的對應著什么，意味著什么，可能并沒有一個確切的概念。
我說說我的理解：
這五個要素，從戰略層到表現層，是一個從抽象到具象的過程，是一個易用產品背后必不可少的東西。
戰略層：用戶需求、產品目標——就是說在使用完這個產品之后，能不能很好的滿足了用戶的需求，達沒達成做這個產品的目的。
范圍層：在產品定位明確的情況下，我們要有什么樣的功能和內容——具體需求
結構層：各頁面、功能的聯系，用戶通過一個什么樣的路徑、什么樣的層級關系完成一個流程
架構層：按鈕、控件、圖片、文本區域的布局，用戶對頁面的整體感知
表現層：長什么樣，顏色啊、風格啊等等）
所謂KANO模型，它和接下來要說的消極選擇、NUF評估篩選都可以理解成為一個需求篩選的方法，他們都能夠幫助設計師在眾多需求當中，找到最合適和最合理的那個。
KANO模型中，我們可以把需求或者說創意點分成5個屬性
1.魅力/驚喜屬性
用戶意想不到，如果沒有這個功能用戶可能感知不到，但是做了這個功能，用戶會非常驚喜和滿意。（我們有沒有這樣的功能？首頁tab bar動效）
2.期望/期待屬性
做了這個功能，用戶滿意度會提升，否則反之，會降低
3.必備/必要屬性
一個產品的有效性功能，最基本的功能。如果做了用戶滿意度不會提升，覺得理所當然，但是如果沒有，滿意度會大幅下降。
4.無差異因素
做和不做對用戶的影響并不大，用戶也不太在意。
5.反相/錯誤因素
你不做還好，一旦做了用戶反而會反感，降低滿意度。
對于一個產品，最重要的即是必要屬性和期望屬性。
消極選擇其實是我們在生活當中也用得到的篩選方法，簡單來說就是：當我們想到的兩個idea都能用來解決一個問題，那么我們要選這兩個當中實現成本低的那個或者說“性價比”最高的那個。
NUF評估篩選相比前兩種方法，就顯得稍微繁復一點，用起來可能并不如前兩種方法更容易。
它其實是，在新穎、使用、可行三個維度，對我們要篩選的點進行打分，再根據分值進行篩選。
用起來其實比較消耗時間。
我把這一部分分成了4個步驟，分別是：桌面研究，用戶研究、概念提煉、設計方案
產品深度使用，提問并分析（比如素養課頁面，有多少卡片類型，有多少內容分類？哪些課程點擊率比較高，為什么？等等）-同類產品分析-用戶體驗診斷，舒適體驗和不是體驗-確定設計方向，產品定位、改版（優化）目的、用戶群體、價值點）（確定大致設計方向，提出假設，如：經過我們上述的研究和分析，發現豐富、高質量的內容和清晰的布局，能夠讓用戶有瀏覽和互動欲望，從而達到轉化目的
我們一般通過定量問卷和定性訪談來從用戶那里獲得想要的信息點以得出用戶畫像和驗證我們前期的假設
在做訪談之前，要明確的就是我們要得到什么，或者說我們要訪談用戶的哪些方面
即：用戶習慣的研究、用戶行為模式的研究、用戶行為動機的研究
在設置問題時，要明確每個問題的背后我們關注的點在哪里，不可能在不相干問題中浪費時間。
通過前面的兩個階段，我們已經可以得到很多東西了：完整清晰的用戶畫像、同理心地圖、As is 旅程圖。我們通過這些東西，找到我們可以優化、可以提升用戶體驗的地方，即機會點，然后利用我們之前提到的篩選方法，進行創意決策。
（同理心地圖）
（As is 旅程圖 來自：池喜太厚）
通過前面完整的研究和決策，在此階段，得出交互設計方案、UI設計方案等等
這一部分是我想和大家探討的，前面所說的設計流程，多數時候在實際工作當中應用起來并不容易，這也是很多設計師對設計方法嗤之以鼻的原因，覺得設計方法都是玄學，胡說胡有理，這里我也說說我的一些思考。
在我們日常的工作當中要把上述的所有流程都走到，所有設計方法都應用，顯然是不現實的。而且，在產品的不同階段，優化和迭代的驅動力是不同的。在初創和成長階段，一般為問題驅動，在成熟期，一般為價值驅動。
也就是說，平時的工作可能是一個，發現問題到解決問題的過程，我們需要把成熟的方法和流程進行拆分，進行小部分流程的應用，這樣也能夠讓我們得出一個合理的設計方案。
轉自：站酷-鹿爺不是咸魚
保持好奇，巧妙融合，追求卓越，自然而然
在網上找UX汽車相關的材料和文章是相當困難的。（學習君說：表示相當贊同：（ ）盡管有關移動和臺式設備UX的信息太多，但要獲得關于HMI（人機交互）原理的見識似乎要困難得多。為什么？
我的回答是，與為手持設備和計算機進行設計相比，這可能是一門利基學科，再加上汽車屏幕出現的時間不長。當然，車輛上的用戶體驗不僅僅是屏幕，只有旋鈕和物理按鈕時已經是用戶體驗了，但是在這種知識上也沒有太多分享。
但是，主要原因可能是缺乏標準化。如果您現在看一下市場，您會發現有太多不同的方法和解決方案（滿足相同的需求），很難提出一套共享的規則。屏幕可以是橫向或縱向屏幕，可以是直角或傾斜角度，可以是一個或2個或3個或更多，超寬或更大的正方形，儀表板上的高度或膝蓋以下的高度，等等。與這種混亂相比，我們在手機上擁有的屏幕尺寸數量似乎是在開玩笑。
另一個原因是所有車載系統都需要非常全面的測試。用戶在可能致命的情況下與這些對象進行交互。因此，測試必須絕對優先。搞砸移動應用程序上的按鈕的位置或大小可能會帶來麻煩，但在汽車操作系統上這樣做（我不是說“信息娛樂”，因為在這一點上，它是一個簡化的術語）會造成生命損失。上面提到的缺乏標準化使得很難將先前測試的結果用于其他系統并在其他系統上重用。
各種研究表明，黑暗的UI在汽車環境中是最安全的選擇。深色界面可減少干擾和眩光，但是，存在一個組件，從暗模式切換為亮模式可能有助于提高可讀性，這就是導航圖。在幾乎所有導航系統中，地圖都會自動從暗切換為亮，反之亦然。
Android Auto
文字應略讀，因此所有的號召性用語，菜單和所有文字通常都應保持最少。除非是在不運動的情況下閱讀的文本，否則任何文本都不應排在兩行或更多行上。
眼睛到中央顯示器的平均距離約為60厘米/ 24英寸。該數字只是根據市場上最常見的配置進行的平均測量，但是同樣，由于沒有適當的標準，因此該距離可能會有很大差異。
假定此措施為有效基準，則在運動情況下字體的最小尺寸為5.3 / 6毫米（不同的研究表明最佳做法略有不同）?？紤]到1mm為6.299 dp（@ 160dpi），則文本應為34/38像素高，用于應該在行駛時讀取的文本。
應該只有一個主要動作，而第二個動作則盡可能少。同樣，我們希望用戶快速瀏覽并一眼就能找到所需的內容。
（美國）美國國家公路交通安全管理局（NHTSA）指南指出，駕駛員應該能夠在1.5秒的一系列掃視中完成一項任務，并且花在離開道路上的累積時間不超過12秒。
Apple CarPlay — phone call: 1 primary CTA
自從誕生以來，車載操作系統已超越了信息娛樂功能。通過鏡像智能手機甚至系統內部的鏡像，我們可以訪問多種功能，例如消息傳遞，日歷和提醒，流視頻等等。但是，用戶在使用這些系統時要尋找的主要功能是3：
音樂/播客/有聲讀物
導航
撥打/接聽電話
這三個主要功能在駕駛時應該比其他功能更醒目且易于使用。
圖標優于文本標簽，但圖標的含義必須絕對清楚，不能解釋誤解。圖標標簽的字體大小可以小于第3點指示的最小字體大小。
Porsche Panamera UI
駕駛情況下的理想對比度至少應為7：1，因此絕大多數系統都將白色（或淺灰色）變成黑色（或深灰色）。
對于行駛中未使用/讀取的組件，最小值應為4.5：1。
旋鈕和物理按鈕的性能仍然優于GUI組件，這是由于其具有肌肉內存映射功能，觸摸屏上的可視元素要求駕駛員每次查看屏幕。但是，數字接口的靈活性毋庸置疑，世界正在朝這個方向發展。盡管大多數（如果不是全部）現代觸摸屏都支持各種類型的交互，例如您的常規平板電腦，但由于易于執行，因此它們是首選的：
單點
向左/向右/向上/向下滑動
滾動（帶有捕捉）
應避免使用其他更復雜的手勢，例如觸摸和按住，雙擊，捏合，多點觸摸手勢，或者在非運動情況下使用。
關于滾動的注意事項：在列表或卡片上自由滾動不是理想的選擇。垂直和水平滾動動作均應具有捕捉效果，以始終將滾動項鎖定在同一位置
Scroll with snapping on the left, free on the right
非接觸手勢是許多OEM嘗試的新事物。目前，這項技術似乎還遠遠不夠完美，但是除此之外，在這種情況下使用的手勢通常并沒有真正令人難忘和自然。
雖然語音控制似乎是理想的選擇，但根據研究，在某些情況下，精神工作量可能會超出預期。在VUI并不是真正的“對話式”的較早系統上，情況更是如此，諸如Google Assistant或Siri之類的現代助手對信息較長的字符串的理解程度更高，從而減少了用語表達命令的精力。
但是，我們應該考慮不能選擇說話的情況，例如，當嬰兒在后座上睡覺或某人有言語障礙時，并提供一種安全，可視/觸覺的方式來執行所有動作。
與移動設備甚至與帶有臺式計算機和椅子的辦公室設置不同，在汽車中，座椅相對于屏幕呈固定角度，屏幕也固定在適當的位置。因此，必須考慮屏幕的可達性及其可讀性。考慮到左側的駕駛員，屏幕右側的元素將導致可讀性和可訪問性降低（當然，在方向盤位于右側的汽車中會發生相反的情況）。
避免使用重影按鈕，輔助功能應非常清晰可見。主要行動和次要行動均應清晰可辨
Tesla Model 3 UI
當然，這也不意味著丑陋（不幸的是，那里有一些丑陋的車載體驗）。但是，在為車載屏幕設計時，您必須考慮告別微妙的色調，細膩的對比度，筆觸細膩的圖標，淺色字體，細小的文字……
極簡主義受到歡迎，但它是由更少的可見組件組成的極簡主義。
正如本文開頭所述，這些原則只是經驗法則，不能以任何方式跳過嚴格的測試。但是，如果您是第一次使用智能手機和計算機的UX來接觸汽車的HMI，那么這可能是您開始著手涉足這一復雜學科的起點。
原理
keyCode 對于keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。 因此我們可以根據keycode返回的字符碼來判斷用戶所按下的鍵，下面就是一個用于測試上下左右按鍵的js代碼，經過我的測試之后，返回37 38 39 40；
window.onload = function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
console.log(event.keyCode);
}
};
3
3.方塊的移動實際上就是坐標的改變，因此需要offsetLeft 和offsetTop 來獲得當前方塊的坐標，然后將坐標進行一定的更改，就可以實現移動的效果了，下面給出代碼
window.onload = function() {
document.onkeydown = function(event) {
event = event || window.event;
//設置移動速度
var speed = 10;
//當ctrl和方向按鍵同時按下時，提升移動速度
if(event.ctrlKey) {
speed = 50;
}
//獲取div
var box01 = document.getElementById("box01");
switch(event.keyCode) {
/*keyCode返回按下按鍵的編碼
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01 {
width: 100px;
height: 100px;
background-color: #008000;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
//獲取div
var box01 = document.getElementById("box01");
//設置移動速度
var speed = 10;
//設置移動的方向
var dir = 0;
setInterval(function() {
switch(dir) {
/*keyCode返回按下按鍵的編碼
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
}, 50)
document.onkeydown = function(event) {
event = event || window.event;
//當ctrl和方向按鍵同時按下時，提升移動速度
if(event.ctrlKey) {
speed = 50;
} else {
speed = 10;
}
//使dir等于keycode的值
dir = event.keyCode;
//當鼠標松開時，停止移動 ---如果不寫這一個會造成無法停止移動的效果
document.onkeyup = function() {
dir = 0;
};
};
};
</script>
</head>
<body>
<div id="box01"></div>
</body>
</html>
————————————————
版權聲明：本文為CSDN博主「loving-cat」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42878211/article/details/104558443
vuex的基礎
1,狀態管理(共享)
緩存數據==>內存， 只要刷新頁面，數據就丟了
訂單，詳情等，，，不適用vuex緩存數據
用于
非父子通信的問題
緩存后端數據，提高用戶體驗
注意：
vuex只能有一個store,
為了防止多人修改，我們切割成子store, 再合并成唯一一個大的store對象
模塊寫法
import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
}, // "全局"狀態
mutations:{
},//唯一修改狀態的地方
//異步處理
actions:{
},
// 對上面的“全局狀態”進行數據處理， 類似于vue中的計算屬性
getters:{
},
modules:{
cinema,
tabbar
}
})
export default store
const module = {
namespaced:true, //命名空間
state :{
cinemaList:[]
},
actions:{
store.commit("setCinemaList",res.data.data.cinemas) //支持傳參
},
mutations:{
setCinemaList(state,data){
console.log("setCinemaList",data)
state.cinemaList = data
}
},
getters:{
topDataList(state){
//state形參s， vuex自動調用時候，傳來值
return state.cinemaList.slice(0,5)
}
}
}
export default module
import createPersistedState from "vuex-persistedstate"; //在index.js頁面加入這個插件
// 加入下面的代碼
const store = new Vuex.Store({
plugins: [createPersistedState({
reducer(val){
return {
user: val.user
}
}
})]
————————————————
版權聲明：本文為CSDN博主「m0_46436313」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_46436313/article/details/104572076
中介者對象踐行了最少知識原則，指一個對象盡可能少的了解別的對象，從而盡量減少對象間耦合程度。這樣各個對象只需關注自身實現邏輯，對象間的交互關系交由中介者對象來實現和維護。
需求背景：
手機購買頁面，在購買流程中，可以選擇手機的顏色及輸入購買數量，同時頁面有兩個展示區域，分別向用戶展示剛選擇好的顏色和數量。還有一個按鈕動態顯示下一步的操作，我們需要查詢該顏色手機對應的庫存，如果庫存數量少于這次購買的數量，按鈕將被禁用并顯示庫存不足，反之按鈕可以點擊并顯示放入購物車。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 購買商品</title>
</head>
<body>
選擇顏色：
<select id="colorSelect">
<option value="">請選擇</option>
<option value="red">紅色</option>
<option value="blue">藍色</option>
</select>
輸入購買數量：
<input type="text" id="numberInput">
您選擇了顏色：<div id="colorInfo"></div><br>
您輸入了數量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>請選擇手機顏色和購買數量</button>
</body>
<script>
// 最初級的寫法
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
'red': 3,
'blue': 6
}
colorSelect.onchange = function(){
var color = this.value,
number = numberInput.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '請選擇手機顏色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用戶輸入的購買數量是否為正整數
nextBtn.disabled = true;
nextBtn.innerHTML = '請輸入正確的購買數量';
return;
}
if(number > stock){ //當前選擇數量大于庫存量
nextBtn.disabled = true;
nextBtn.innerHTML = '庫存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入購物車';
}
numberInput.oninput = function(){
var color = colorSelect.value,
number = this.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '請選擇手機顏色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用戶輸入的購買數量是否為正整數
nextBtn.disabled = true;
nextBtn.innerHTML = '請輸入正確的購買數量';
return;
}
if(number > stock){ //當前選擇數量大于庫存量
nextBtn.disabled = true;
nextBtn.innerHTML = '庫存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入購物車';
}
</script>
</html>
在上個示例中，對象間聯系高度耦合，只是兩個輸入框還好，但如果有多個的話，相互聯系就非常復雜了，此時就要考慮用到中介者模式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>中介者模式 購買商品</title> </head> <body> 選擇顏色： <select id="colorSelect"> <option value="">請選擇</option> <option value="red">紅色</option> <option value="blue">藍色</option> </select> 選擇內存： <select id="memorySelect"> <option value="">請選擇</option> <option value="32G">32G</option> <option value="16G">16G</option> </select> 輸入購買數量： <input type="text" id="numberInput"> 您選擇了顏色：<div id="colorInfo"></div><br> 您選擇了內存：<div id="memoryInfo"></div><br> 您輸入了數量：<div id="numberInfo"></div><br> <button id="nextBtn" disabled>請選擇手機顏色、內存和購買數量</button> </body> <script> var goods = { 'red|32G': 3, 'red|16G': 0, 'blue|32G': 1, 'blue|16G': 6 } //引入中介者 var mediator = (function(){ var colorSelect = document.getElementById('colorSelect'), memorySelect = document.getElementById('memorySelect'), numberInput = document.getElementById('numberInput'), colorInfo = document.getElementById('colorInfo'), memoryInfo = document.getElementById('memoryInfo'), numberInfo = document.getElementById('numberInfo'), nextBtn = document.getElementById('nextBtn'); return { changed: function(obj){ var color = colorSelect.value, memory = memorySelect.value, number = numberInput.value, stock = goods[color + '|' + memory]; if(obj == colorSelect){ //如果改變的是選擇顏色下拉框 colorInfo.innerHTML = color; }else if(obj == memorySelect){ memoryInfo.innerHTML = memory; }else if(obj == numberInput){ numberInfo.innerHTML = number; } if(!color){ nextBtn.disabled = true; nextBtn.innerHTML = '請選擇手機顏色'; return; } if(!memory){ nextBtn.disabled = true; nextBtn.innerHTML = '請選擇手機內存'; return; } if(!number){ nextBtn.disabled = true; nextBtn.innerHTML = '請填寫手機數量'; return; } if( ( (number-0) | 0 ) !== number-0 ){ //用戶輸入的購買數量是否為正整數 nextBtn.disabled = true; nextBtn.innerHTML = '請輸入正確的購買數量'; return; } if(number > stock){ //當前選擇數量大于庫存量 nextBtn.disabled = true; nextBtn.innerHTML = '庫存不足'; return; } nextBtn.disabled = false; nextBtn.innerHTML = '放入購物車'; } } })() colorSelect.onchange = function(){ mediator.changed(this) } memorySelect.onchange = function(){ mediator.changed(this) } numberInput.oninput = function(){ mediator.changed(this) } //以后如果想要再增加選項，如手機CPU之類的，只需在中介者對象里加上相應配置即可。 </script> </html>在實際開發中，還是要注意選擇利弊，中介者對象因為包含對象間交互的復雜性，所以維護成本可能也會較高。在實際開發中，最優目的還是要快速完成項目交付，而非過度設計和堆砌模式。有時對象間的耦合也是有必要的，只有當對象間復雜耦合確實已經導致調用與維護難以為繼，才考慮用中介者模式。
————————————————
版權聲明：本文為CSDN博主「一期一會」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_34832846/article/details/85989945
彈性布局（Flex）
隨著移動互聯網的發展，對于網頁布局來說要求越來越高，而傳統的布局方案對于實現特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。
下面是一些彈性布局的基本語法：
兩部分：
1. 語法是添加到父容器上的
display : flex;（彈性盒子的標志哦?。。。? flex-direction: row; 布局的排列方向 （主軸排列方向）
row 默認值，顯示為行。方向為當前文檔水平流方向，默認情況下是從左往右。
row-reverse 顯示為行。但方向和row屬性值是反的
column 顯示為列
column-reverse 顯示為列。但方向和column屬性值是反的
flex-wrap : nowrap; 是否進行換行處理。
nowrap; 默認值，不換行處理
wrap; 換行處理
wrap-reverse; 反向換行
flex-flow : flex-direction flex-wrap 復合寫法 (是有順序的)。
justify-content ; 屬性決定了主軸方向上子項的對齊和分布方式。
flex-start ： 子項都去起始位置對齊。
flex-end ： 子項都去結束位置對齊。
center ： 子項都去中心位置對齊。
space-between : 表現為兩端對齊。多余的空白間距在元素中間區域分配，兩邊沒寬。
space-around : 邊緣兩側的空白只有中間空白寬度一半即每個塊都有左右間距。
space-evenly :每個flex子項兩側空白間距完全相等。
align-items : 每一行中的子元素上下對齊方式。
stretch;默認值，flex子項拉伸
flex-start;容器頂部對齊
center;容器居中對齊
flex-end;容器底部對齊
align-content : 跟justify-content相反的操作。側軸的對齊方式。(最少需要兩行才能看出效果，因為他是多行的一個上下對齊方式)
默認：多行下，有幾行就會把容器劃分為幾部分，默認就是stretch拉伸的。
值跟justify-content取值是相同的。
2. 語法是添加到子容器上的？
order : 排序(值越大越后)
0：默認值 eg:1234
1：放在后面 eg:1342
-2：放在前面 eg:2134
flex-grow : 擴展 ( 想看到擴展的效果，必須有空隙 )
0 : 默認值 , 不去擴展
0.5：占空隙的一半
1 : 去擴展 , 會把空白區域全部沾滿
（ 注：子元素會按照設置的比例值來分配空隙，如果比例值總和小于1，那么會有空隙，如果比例值總和大于等于1，那么就沒有空隙。）
flex-shrink : 收縮
正常默認值是1
0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正常縮放1進行比較的）
flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是設置一個比例值，flex-basis是設置一個具體值。
flex : 一種復合寫法
flex-grow flex-shrink flex-basis
flex:1;
flex : 1 1 0
flex:0;
flex : 0 1 0
algin-self: 跟align-items操作很像，區別就是只是針對某一個子項。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
img{display: block;}
.box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
.box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
.box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box2 div:nth-of-type(1){align-self: flex-start;}
.box2 div:nth-of-type(2){align-self: flex-end;}
.box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box3 div:nth-of-type(1){align-self: flex-start;}
.box3 div:nth-of-type(3){align-self: flex-end;}
.box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
#box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid;
perspective: 500px;perspective-origin: right top;}
#box .main{position: relative;width: 150px;height: 150px;margin: 125px;
transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
#box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;}
#box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
#box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
#box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
#box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
#box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
#box:hover .main{transform:rotateY(360deg);}
</style>
</head>
<body>
<div id="box">
<div class="main">
<div class="box1">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box5">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box6">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
</div>
</div>
</body>
</html>
注：默認情況下，在彈性盒子中的子元素的左右排列的。
注：
水平是主軸的時候：默認情況下，當寬高不寫的時候，寬度由內容決定，高度由父容器決定。
垂直是主軸的時候：默認情況下，當寬高不寫的時候，寬度由父容器決定，高度由內容決定。
注：當子項的總寬度大于父容器的時候，會自動收縮的（彈性的優先級是大于自身固定大小的）
注：當子項的內容已經達到了父容器最小寬高的時候，就會出現溢出的現象。
注：彈性布局中用的頻率比較多的語法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
注：彈性布局的優勢是做一維布局，網格布局的優勢是做二維布局。
下面是彈性布局骰子案例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} img{display: block;} .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;} .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;} .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box2 div:nth-of-type(1){align-self: flex-start;} .box2 div:nth-of-type(2){align-self: flex-end;} .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box3 div:nth-of-type(1){align-self: flex-start;} .box3 div:nth-of-type(3){align-self: flex-end;} .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; perspective: 500px;perspective-origin: right top;} #box .main{position: relative;width: 150px;height: 150px;margin: 125px; transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;} #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;} #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);} #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);} #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);} #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);} #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);} #box:hover .main{transform:rotateY(360deg);} </style> </head> <body> <div id="box"> <div class="main"> <div class="box1"> <div></div> </div> <div class="box2"> <div></div> <div></div> </div> <div class="box3"> <div></div> <div></div> <div></div> </div> <div class="box4"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box5"> <div> <li></li> <li></li> </div> <div> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box6"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> </div> </div> </body> </html>實際效果：
————————————————
版權聲明：本文為CSDN博主「GLINLIND」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/GLINLIND/article/details/104572530
javascript中window.open()與window.location.href的區別
window.open(‘index.html’) 表示新增一個窗口打開 index.html 這個頁面，并不刷新
location.href(‘index.html’) 表示在當前窗口重定向到新頁面，打開并刷新 index.html 這個頁面
window.location 是 window 對象的屬性，用來替換當前頁，也就是重新定位當前頁
而window.open 是 window 對象的方法，是用來打開一個新窗口的函數
// 打開新頁面
// 注意：有些瀏覽器的安全設置會將window.open()屏蔽，例如避免彈出廣告窗
window.open('./index.html');
// 在原窗口打開新頁面
window.location.href＝"./index.html";
window.open()詳解
window.open ('page.html', 'newwindow', 'height=100, width=400,
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
參數解釋： 三個參數
window.open 彈出新窗口的命令；
‘page.html’ 彈出窗口的文件名；
‘newPage’ 彈出窗口的名字（不是文件名），非必須，可用空’'代替；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離屏幕上方的象素值；
left=0 窗口距離屏幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar=no 是否顯示菜單欄，yes為顯示；
scrollbars=no 是否顯示滾動欄，yes為顯示；
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
常用的js返回與刷新頁面
在此用a標簽舉例
前言：
做網頁項目時想要背景是動態的，推薦兩個我覺得比較可以的js動態背景。
隨鼠標的移動而移動的線條，具體效果看圖：
你焦點在哪，那么那里的線條就會匯聚到你的焦點處。
用法：將js聲明到body內即可，我是放置在body底部的
<script type="text/javascript" src=";
1
可以鼠標點擊產生字的，如圖：
用法和第一個類似，不過在這個js文件前得先引入jquery:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
/* 鼠標 */
var a_idx = 0;
jQuery(document)
.ready(
function($) {
$("body")
.click(
function(e) {
var a = new Array("@健身",
"@學習", "@機車",
"@攝影", "@自由",
"@考研", "@自律",
"@獨立", "@廚藝",
"@橘子", "@交友",
"@愛媳婦", "@愛家人");
var $i = $("<span></span>")
.text(a[a_idx]);
a_idx = (a_idx + 1)
% a.length;
var x = e.pageX, y = e.pageY;
$i
.css({
"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "rgb("
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ")"
});
$("body").append($i);
$i.animate({
"top" : y - 180,
"opacity" : 0
}, 1500, function() {
$i.remove();
});
});
});
</script>
這里使用的是cdn形式的jquery即不用將jq放入本地文件再引入，直接訪問網絡上的jq即可，還有就是點擊產生的字可以自行修改。
————————————————
可以自定義一個file選擇文件的按鈕：
思路為：
用定位將自定義的按鈕遮住原來的選擇文件按鈕，
再讓點擊自定義按鈕時觸發原來的選擇文件按鈕的事件即可
（對此，label可實現）
eg:
html:
css樣式：
結果圖：
點一下，就可以彈出選擇文件的文件夾啦！
藍藍設計的小編 http://www.syprn.cn