Tad 教材網 - 線上書籍

:::

\[1092\] 前端技術入門
===============

```css
@import url("https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap');

@font-face {
    font-family: SweiSpikeLegCJKtc-Regular;
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-spike-leg@2.0/WebFont/CJK%20TC/SweiSpikeLegCJKtc-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/swei-spike-leg@2.0/WebFont/CJK%20TC/SweiSpikeLegCJKtc-Regular.woff) format("woff");
}

@font-face {
    font-family: naikaifont;
    src: url(https://cdn.jsdelivr.net/gh/max32002/naikaifont@1.0/webfont/NaikaiFont-Regular-Lite.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/naikaifont@1.0/webfont/NaikaiFont-Regular-Lite.woff) format("woff");
}

body {
    background: #ecf5e9;
}

#nav {
    background: #A5BB8F;
}

aside {
    background: #DADEC5;
    min-height: 450px !important;
}

article {
    /* min-height: 450px !important; */
}

#footer {
    background: #A5BB8F;
    min-height: 150px;
}

.my-container-width {
    max-width: 1350px;
}

.block {
    /* margin-top: 1rem;
    margin-bottom: 3rem; */
    margin: 1rem 0 3rem;
}

/* .blockTitle {
    color: rgba(48, 113, 150, 0.562);
    font-family: naikaifont, SweiSpikeLegCJKtc-Regular, "Noto Serif TC", sans-serif, mnyylti, Mamelon;
} */

.blockHead {
    text-align: center;
    position: relative;
}

#page_center .blockHead {
    text-align: left;
    padding-left: 1.85rem;
}

.blockTitle {
    font-family: naikaifont;
    color: #ffffff;
    height: 40px;
    font-size: 1.5rem;
}

.bbg1 {
    text-shadow: 0px 2px #804454, 2px 0px #804454, -2px 0px #804454, 0px -2px #804454, -2px -2px #804454, 2px 2px #804454, 2px -2px #804454, -2px 2px #804454;
    background: url(../images/bbg1.png) no-repeat;
}

.bbg2 {
    text-shadow: 0px 2px #36626b, 2px 0px #36626b, -2px 0px #36626b, 0px -2px #36626b, -2px -2px #36626b, 2px 2px #36626b, 2px -2px #36626b, -2px 2px #36626b;
    background: url(../images/bbg2.png) no-repeat;
}

.bbg3 {
    text-shadow: 0px 2px #6b6b1e, 2px 0px #6b6b1e, -2px 0px #6b6b1e, 0px -2px #6b6b1e, -2px -2px #6b6b1e, 2px 2px #6b6b1e, 2px -2px #6b6b1e, -2px 2px #6b6b1e;
    background: url(../images/bbg3.png) no-repeat;
}

.bbg4 {
    text-shadow: 0px 2px #3c583d, 2px 0px #3c583d, -2px 0px #3c583d, 0px -2px #3c583d, -2px -2px #3c583d, 2px 2px #3c583d, 2px -2px #3c583d, -2px 2px #3c583d;
    background: url(../images/bbg4.png) no-repeat;
}

@media only screen and (max-width: 768px) {
    #page_center .blockHead, .blockHead {
        text-align: left;
        padding-left: 30%;
    }
}

a:link{
    color: rgb(36, 139, 100);
}

a:visited{
    color: rgb(14, 53, 38);
}

a:hover{
    text-decoration: none;
}

p::selection, div::selection{
    background: tomato;
    color:white;
}

.blockTitle {
    display: inline-block;
    padding-right: 2rem;
}

.block:hover .blocktool {
    position: absolute;
    content: url(../images/settings.png);
}
```

:::