CSS和JS是現代網站設計不可或缺的兩個元素，它們能夠對網頁進行美化、交互等操作，提升用戶體驗。

下面我們將為大家分享一些常用的CSS和JS美化技巧，讓你的網頁瞬間提升品味。

/* CSS美化技巧 */
/* 1. 自定義字體 */ 
@font-face {
font-family: 'MyFont';
src: url('my-font.woff2') format('woff2'),
url('my-font.woff') format('woff');
}
body {
font-family: 'MyFont', sans-serif;
}
/* 2. 漸變背景 */ 
background: linear-gradient(to bottom, #fc00ff, #00dbde);
/* 3. 陰影效果 */ 
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
/* 4. 動畫效果 */ 
animation: fadeIn 1s ease-in-out;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* JS美化技巧 */ 
/* 1. 照片墻 */ 
$('.gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: 'The image #%curr%could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + 'by John Doe';
}
}
});
/* 2. 文字跳動 */ 
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i
以上是一些常見的CSS和JS美化技巧，當然還有更多的技巧等待著我們去發掘，讓我們一起打造更加美好的網頁！