這是嘉義高中資訊研究社的網站模板，我們會在之後說明如何使用。
範本
-index.html
-style.css
-popup.js主要網站的編寫範本與教學。
在此範本中這個檔案只有可用到的class與head教學。
css的模型，是整個網站的精隨所在。
若要使用popup (正式名稱:modal) 才需要的一個 Javascript。
- 背景顏色 = #020614
- 文字顏色 = white (#fff、#ffffff)
- 連結顏色 = cyan (#00ffff)
我們每個檔案都要有護身符，若沒有護身符，則就不符合我們的範本。
以註解的形式存在所有可註解的程式檔案，分為兩個部分。
這個部份不可更改，因為我們會保佑使用這個範本的程式。
╔════╦════╗ ╔╗ ╔══╗ ╔══════
║ ║ ║ ╔╝╚╗ ║ ╚═╗ ║
║ ║ ║ ║ ║ ║ ║ ╠══════
║ ║ ║ ╔╝ ╚╗ ║ ║ ║
║ ║ ║ ╠══════╣ ║ ╔═╝ ║
║ ║ ║ ╔╝ ╚╗ ╚══╝ ╚══════
╔═════╗ ║ ║
║ ║ ╚╗ ╔╝
║═════╣ ╚╦╝
║ ║ ║
║ ║ ║
╚═════╝ ║
╔══ ║ ║ ╔══ ║ ║ ═╦═ ╔══╗ ╔═══
║ ║ ║ ║ ║ ║ ║ ║ ║ ║
║ ╚╦╝ ╚═╗ ╠════╣ ║ ╠╦═╝ ║
║ ║ ║ ║ ║ ║ ║╚═╗ ║
╚══ ║ ══╝ ║ ║ ═╩═ ║ ╚ ╚═══
資研社保佑 程式bug退散這裡可以根據個人需求更動、刪除。(雖然我們不信佛教)
來自xxx 請求佛祖保佑
_oo0oo_
o8888888o
88" . "88
(| -_- |)
0\ = /0
___/`---'\___
.' \\| |// '.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' |_/ |
\ .-\__ '-' ___/-. /
___'. .' /--.--\ `. .'___
."" '< `.___\_<|>_/___.' >' "".
| | : `- \`.;`\ _ /`;.`/ - ` : | |
\ \ `_. \_ __\ /__ _/ .-` / /
=====`-.____`.___ \_____/___.-`___.-'=====
`=---='
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
佛祖保佑 永無BUG你可以自己加上自己的護身符，記得最後要加一行「保佑詞」。
這個部分，我們會介紹HTML的架構
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 連結預覽 -->
<meta name="description"
content="網站說明">
<meta name="keywords"
content="關鍵字">
<link rel="canonical" href="主要連結">
<meta name="twitter:card" content="summary_large_image"> <!-- 暫不更動 -->
<meta name="twitter:image:src" content="預覽圖片">
<meta name="twitter:label1" content="預估閱讀時間">
<meta name="twitter:data1" content="2 分鐘">
<meta property="og:site_name" content="網站名稱">
<meta property="og:type" content="website"> <!-- 暫不更動 -->
<meta property="og:title" content="網站名稱">
<meta property="og:description"
content="網站說明">
<meta property="og:image" content="預覽圖片">
<meta property="og:url" content="連結">
<!-- 網站顯示資料 -->
<title>網站名稱</title>
<link rel="stylesheet" href="./style.css">
<!-- 字體 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@300;400;700&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Icons -->
<script src="https://kit.fontawesome.com/a80c5dc208.js" crossorigin="anonymous"></script>
<!-- 需要使用Popup時請解開註解(VSCode: Ctrl+K -> Ctrl+U) -->
<!-- <script src="./popup.js"></script> -->
</head>確認編碼
<meta charset="UTF-8">顯示設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">網站說明
<meta name="description"
content="網站說明">網站關鍵字(Google已經不用了，但其他網站可能會用)
<meta name="keywords"
content="關鍵字">這個網站的主要連結(絕對連結)
<link rel="canonical" href="主要連結">卡片設定
<meta name="twitter:card"
content="summary_large_image"> <!-- 暫不更動 -->預覽圖片
<meta name="twitter:image:src" content="預覽圖片">預覽說明
<meta name="twitter:label1" content="預估閱讀時間">
<meta name="twitter:data1" content="2 分鐘">名稱
<meta property="og:site_name" content="網站名稱">網站類型(可不更動)
<meta property="og:type" content="website">名稱
<meta property="og:title" content="網站名稱">說明
<meta property="og:description"
content="網站說明">預覽圖片
<meta property="og:image" content="預覽圖片">網站的連結(絕對連結)
<meta property="og:url" content="連結">標題
<title>網站名稱</title>連結我們的CSS
<link rel="stylesheet" href="./style.css">連結字體
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@300;400;700&display=swap" rel="stylesheet">連結JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>連結Icons
<script src="https://kit.fontawesome.com/a80c5dc208.js" crossorigin="anonymous"></script>封面圖片，會隨著畫面大小變動，電腦版請編輯電腦版，手機板請編輯手機板。
自帶動畫，預設為霓虹燈閃爍，若要更換請編輯動畫。
背景圖片，會隨著畫面大小變動，電腦版請編輯電腦版，手機板請編輯手機板。
自帶動畫，預設為等待後淡入+無限循環霓虹燈效果，若要更換請編輯淡入、霓虹燈。
自帶模糊(8px)，若要更換電腦版請編輯電腦版(兩行)，手機板請編輯手機板(兩行)。
在網站上放內容時使用的標籤，有自動縮排(5%)，並且每層都會縮。
^橘色框是後製上去的，原本沒有
用於需要邊框的內容，同樣有自動縮排(5%)，並且每層都會縮。
按鈕，滑鼠放上去會變色。變色的顏色可以在這裡設定。
自帶全螢幕伸展。
自帶轉場，時間請在這裡設定。
<div class="button" onclick="">
<p>這是按鈕</p>
</div>
有時候你只想要簡單的單行列表完素，這就是你要的。
<div class="plate">
<div class="tile">
<i class="你的icon"></i>
<p>資訊1</p>
<p> 資訊2</p>
</div>
</div>
有些連結你不想一開始就變色，用這個可以讓連結在hover的時候才變色。顏色可以在這裡設定。
叫別人往下滑。可以將<i>中的class改成你要的Icon class。
自帶置中。若要編輯請編輯這個class。
<a href="#你要跳到的id">
<div class="sd">
<p class="sd_icon"><i class="fa fa-angle-double-down"></i></p>
<p>向下滑看更多</p>
</div>
</a>記得<a>裡面的連結要是#加上標題的id。
<a href="#your_id" class="no-change">
<h1 class="lxgw-wenkai-tc-bold" id="your_id">標題</h1>
</a>跳出來的東西。
class要改成你想要的名字、解開這個註解，並複製一份popup專用style (記得要讓它是正式程式碼，不是註解)，複製後記得將popup改成你的class名字 (popup、popup-content的popup都要改掉)。
<div class="名字" id="id" onclick="hide_form();">
<span class="close" onclick="hide_form();">×</span>
<div class="名字-content">
</div>
</div>範例
HTML
<div class="pop" id="id" onclick="hide_form();">
<span class="close" onclick="hide_form();">×</span>
<div class="pop-content">
</div>
</div>CSS
.close {
color: #aaa;
position: fixed;
right: 1%;
top: 1%;
font-size: 50px;
font-weight: bold;
transition: 0.3s;
z-index: 100;
}
.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
transform: scale(1.2, 1.2);
}
.pop {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 100;
}
.pop-content {
border: 2px solid white;
border-radius: 10px;
width: 85%;
height: 95%;
margin: auto;
padding: 0;
position: relative;
background-color: #020614;
} 其實也沒什麼好講的。
在第53行有相關設定。
在第48行有相關設定。
需要popup (modal) 的時候才用。
名字自己取，大致上就是顯示跟隱藏。
fadeIn()、fadeOut()似乎是JQuery專用的。
$()是JQuery的標記，#代表id，.代表class。
function show_名字() {
$("#id.class").fadeIn('fast');
}
function hide_名字() {
$("#id.class").fadeOut('fast');
}