- web服務器
web服務器根據在網絡中所在的位置不同，又可分爲本地服務器和遠程服務器。
遠程服務器：我們可以將網站上傳到遠程服務器中，所有人都可以通過域名訪問網站。
免費的遠程服務器（免費空間）http://free.3v.do/
- 去免費空間網站註冊賬號
- 記錄主機名，用戶名，密碼，域名。
- 利用cutftp軟件上傳網站到遠程服務器
- 在瀏覽器中輸入域名，即可訪問我們的品優購網站了。
- CSS2D轉換（transform）
transition: all 0.3s; 過渡寫到本身上
- 移動：translate
transform: translate(x,y);
transform: translateX(x);
transform:translateY(y);
其最大的優點是不會影響其他盒子的位置。
相對於盒子自身的寬度和高度 transform:translate(100% 100%);
對行內標籤沒有效果
- 旋轉：rotate
transform:rotate: Xdeg transform: rotate（50deg）（順時針旋轉50度） transform: rotate(-45deg) 逆時針旋轉45度
<style>
div {
position
: relative;
width: 249px;
設置轉換中心點
transform-origin: x,y; transform-origin: 50% 50%
transform-origin: left bottom（左下角）
- 縮放：scale
transform: scale(x,y); transform(1,2);沒有單位 修改寬度沒變，高度爲以前的兩倍。
不影響其他盒子，可以設置縮放的中心點。
- 2D轉換的綜合寫法
transform: translate(50px, 100px) scale(1.2) rotate(180deg)
執行有順序， 先旋轉的話 再位移，位置會偏， 所以一定要先把位移放到最前面。
- 動畫效果
- 先用keyframes定義動畫
@keyframes 動畫名稱{
0%{
Width:100px;
}
100%{
Width:200%;
}
}
可以做多個狀態 keyframe 關鍵幀 百分比就是總時間的劃分。
0%是動畫的開始，100%是動畫的完成，這樣的規則就是動畫序列。
- 再調用動畫
div{
Width: 200px;
Height: 200px;
Background-color: aqua;
Margin:100px auto;
Animation-name: 動畫名稱；
Animation-duration: 持續時間；
}
/* 始狀態 */
0% {
transform: translate(0，0);
}
25% {
動畫的常見屬性
Animation: 
動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束狀態； animation: move 2s ease
四．3D轉換
- 3D移動 translate3d
translform:translateX(100px) 僅在x軸上移動
translform:translateY(100px) 僅在Y軸上移動
translform:translateZ(100px) 僅在Z軸上移動
translform:translate3d(x,y,z) 其中x,y,z分別指要移動的距離