web實訓 ~ 收穫網站:

• 摳圖彙總:https://baijiahao.baidu.com/s?id=1673336636238375251&wfr=spider&for=pc
  1. https://www.remove.bg/zh/upload
  2. https://www.sukoutu.com/
  3. https://www.stickermule.com/trace
  4. https://kt.fkw.com/koutu.html
  5. http://matting.deeplor.com/
  6. https://photoscissors.com/
  7. ...
• 轉換為圖示:
  1. http://www.ico8.net/index.php
  2. http://www.bitbug.net/
  3. ...
• 高清 圖片: https://wallhaven.cc/
• 圖床: https://sm.ms/
• 菜鳥教程: https://www.runoob.com/
• 青檸起始頁: https://a.maorx.cn/
• 個人部落格（時移之人）: https://www.cnblogs.com/yaolicheng/

vscode外掛

• Live Server 實時跟新頁面
• 初始頁 Ctrl + Shift + P ---> 輸入 configure Display Language 選擇 zh-cn （中文）

加入Css3動畫屬性

/*css3 動畫屬性  
		@keyframes 	定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用
				許多關鍵幀選擇器中新增一個動畫
		
		*/
/*淡入*/
@keyframes fade-in {  
    0% {opacity: 0;}/*初始狀態 透明度為0*/  
    10% {opacity: 0.1;}
    20% {opacity: 0.2;}
    30% {opacity: 0.3;}
    40% {opacity: 0.4;}
    50% {opacity: 0.5;}
    60% {opacity: 0.6;} 
    70% {opacity: 0.7;} 
    85% {opacity: 0.8;} 
    100% {opacity: 1;}/*結束狀態 透明度為1*/  
}  
@-webkit-keyframes fade-in {/*針對webkit核心 --> Safari and Chrome*/  
    0% {opacity: 0;}/*初始狀態 透明度為0*/  
    10% {opacity: 0.1;}
    20% {opacity: 0.2;}
    30% {opacity: 0.3;}
    40% {opacity: 0.4;}
    50% {opacity: 0.5;}
    60% {opacity: 0.6;} 
    70% {opacity: 0.7;} 
    85% {opacity: 0.8;} 
    100% {opacity: 1;}/*結束狀態 透明度為1*/  
} 
      /* 設定所有的載入為上述動畫  */
* {    
    animation: fade-in;  /*動畫名稱*/  
    animation-duration: 1s;   /*動畫持續時間*/  
    -webkit-animation:fade-in 1s;    /*針對webkit核心*/  
}  
 

• text-shadow: 0px 16px 8px 8px rgba(0, 0, 0, 0.5); 文字陰影

• text-align-last: justify; 段落中的文字~最後一行被調整為兩端對齊

• text-align: justify;

  • 注意: text-align-last 屬性只有在 text-align 屬性設定為 "justify" 時才起作用

• text-justify: distribute-all-lines; /* 這行必加，相容ie瀏覽器 */

• 邊框陰影 : box-shadow: 2px 2px 2px 2px #666;

• 旋轉 : transform: translate3d(0,-3px,3px); /* x,y,z軸 */

• 滑鼠觸發 : a:hover{}

• 寬度為瀏覽器寬度時,網頁的大小不要設為100%,會出現兩個滾動條

• cursor:pointer; 滑鼠指標變成小手

• 滑鼠點選特效

<script>   
var a_idx = 0;
$(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>

• 滑鼠樣式

  /*滑鼠樣式*/
  background-repeat: repeat;
  background-attachment: fixed;
  background-size:cover;
  cursor: url(https://files.cnblogs.com/files/yaolicheng/cursor.ico),auto;