---
tags: 網站
---
本程式完全是原創作品，沒有修改自任何來源，也沒有剪貼自其他程式作品。
# HTML
## 1.表格
利用 tr td標籤
<pre>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</pre>
展示
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta>
<title>CSS table</title>
<style type="text/css">
table{
width: 400px;/*border: 1px solid rgb(0, 0, 0);*/
border-collapse: collapse;
/* 邊框合併為單一邊框 */
}
/* td:nth-child(1){
width: 400px;
} */
td{
padding: 10px; border-bottom: 1px solid gray;
}
tr:nth-child(1){
/* 虛擬選擇器 */
/* 表格中的第一列(1,2,3) */
background-color: #958ddb; color: honeydew;
}
tr:nth-child(even){
/* 表格中的地偶數對tr */
background-color: rgba(136, 122, 122, 0.363);
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
```
## 2.簡單的文章結構
展示
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta>
<title>CSS learning</title>
</head>
<body>
<!-- 用div (區塊容器)標籤分成區塊(會自動斷行) -->
<!-- 用span(行內容器)標籤分成區塊(不會自動斷行) -->
<div style="font-weight:bold;font-size: 20px;">我是標題</div>
<!--
用CSS將文字設定成粗體字及文字大小設定成20像素
在HTML中的任一標籤頭內加入style屬性的雙引號內部撰寫CSS程式碼
CSS語法: CSS屬性:設定值 或 CSS屬性:設定值;CSS屬性:設定值
-->
<div style="height:200px;width:400px;padding:10px;border:1px solid blue; margin-top:10px;margin-bottom:10px">
內文<span style="color:red">重點</span>內文<br/>
下一行
</div>
<!--
width 標籤寬度
height 標籤高度 通常不另外設定 預設:隨內文高度增加
width和height標籤 只能在會斷行的標籤中設定如div而不能用在span
margin:兩個區塊間的距離
border邊框: 寬度 樣式 顏色
^ solid單實線 dashed虛線
padding填充 區塊與內文的間距
-->
<div style="font-weight:bold;font-size: 20px;">我是標題2</div>
<div style="height:200px;width:400px;padding:10px;border:1px solid blue; margin-top:10px;margin-bottom:10px">
內文<span style="color:red">重點</span>內文<br/>
下一行
</div>
</body>
</html>
```
# CSS
## 1.簡單版面配置
展示
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta>
<title>CSS learning</title>
<!-- CSS選擇器 -->
<style type="text/css">
.title{font-weight:bold;font-size: 20px}
.content{width:400px;padding:10px;border:1px solid blue; margin-top:10px;margin-bottom:10px}
.keyword{color:red}
.box1{position:absolute;left:200px;top:50px;
height:100px;width:100px;background-color:green;
/* 絕對定位 距離左方200像素上方50像素
若設為絕對定位 作用標籤位置可以自由移動 */}
.box2{position:absolute;right:0px;top:0px;height:100px;width:100px;background-color:rgb(156, 46, 129)}
/* 設定為右上角position:absolute;right:0px;top:0px; */
.square{position:relative;top:-8px}
/* 相對定位 以原本的位置做基準點做位移
通常用在小範圍位移 因為位移後仍會佔據原本位置的空間*/
</style>
</head>
<body>
<div class="title">我是標題</div>
<div class="content">
內文<span class="keyword">重點</span>內文<br/>
下一行
</div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="title">我是標題2</div>
<div class="content">
內文<span class="keyword">重點</span>內文<br/>
下一行<span class="keyword">重點</span>2平方=2<span class="square">2</span>內容
</div>
</body>
</html>
```
## 2.CSS選擇器筆記
```
<!-- CSS選擇器
<style type="text/css">
/* 標籤名稱選擇器 */
body{
font-size: 16px;font-family:"微軟正黑體";
}
h3{
font-size: 24px;text-decoration: underline;
}
/* class選擇器 */
div.content{
/* 特徵有 . */
/* 結合標籤名稱選擇器(在.前面加div)只對div作用 不對h3、ul作用 */
/* 是div標籤 class屬性為content 才套用 */
padding: 10px;border: 1px dashed midnightblue;
}
/* id選擇器 */
#btn{
/* 特徵有 # */
border:1px solid green;
background-color: palegreen;padding: 2px;
}
/* 虛擬選擇器:搭配其他選擇器使用 */
/* :hover 虛擬選擇器:滑鼠移動到目標時，套用一組設定 */
#btn :hover{
background-color: #008807;
}
/* :focus 虛擬選擇器:當目標取得焦點時，套用一組設定 */
input:focus{
border: 4px dashed rgb(0, 148, 32);
background-color: #c4eeac;
}
/* 階段式選擇器:搭配其他選擇器使用 */
/* 語法: 選擇器1 選擇器2 */
.content1 a{
color: darkgoldenrod;
}
.content2 a{
color: #078121;
}
</style> -->
```
## 3.簡單版面配置 主要使用CSS選擇器
展示
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta>
<title>CSS learning</title>
<link rel="stylesheet" href="style.css">
<!-- <style></style> 優先於 <link rel="stylesheet" href=""> -->
</head>
<body>
<h3>h3內容</h3>
<div class="content">
內文內文<br/>
下一行
</div>
<h3>h3內容</h3>
<ul class="content1">
<li><a href="http://www.facebook.com">FB</a></li>
<li><a href="http://www.facebook.com">FB</a></li>
</ul>
<h3>h3內容</h3>
<ul class="content2">
<li><a href="https://www.google.com">GOOGLE</a></li>
<li><a href="https://www.google.com">GOOGLE</a></li>
</ul>
<h3>h3內容</h3>
<div class="content">
內文內文<input type="text"/> <button id="btn">送出</button>
</div>
</body>
</html>
```
# JS
## 1.簡單Blog(含發文功能)
展示
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta>
<title>My_First_Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Kim's Blog</h1>
<p>標題</p>
<input type="text" id="title"/>
<p>內容</p>
<textarea id="content" rows="8"></textarea>
<button id="btn">發布</button>
<div id="list">
<!-- <div class="article">
<h2>標題</h2>
<p>內文</p>
</div> -->
</div>
<script src="script.js"></script>
</body>
</html>
```
```js=
//sript.js
var title = document.getElementById("title");
var content = document.getElementById("content");
var btn = document.getElementById("btn");
var list = document.getElementById("list");
btn.addEventListener("click", function(){
//模板語法
list.innerHTML = list.innerHTML +`
<div class="article">
<h2>${title.value}</h2>
<p>${content.value}內文</p>
</div>
`;
title.value = "";
content.value = "";
})
```
Sign in with Wallet
Connect another wallet