高二資訊科技應用
單、雙數班適用
單、雙數班適用
1.以記事本編輯網頁。
2.以VS 2012編輯網頁。
建立自己的資料夾，進入該資料夾。
按右鍵新增一個文字檔，將名稱改為：11202_index.html。
開啟VS 2012、開啟檔案11202_index.html。
於「設計」輸入標題：112學年度網頁設計，設定文字置中對齊。
切換至「程式碼」，了解CSS的宣告，以及套用方式：class="auto-style1"。
自行修改.auto-style1成為 .textalign，html標籤同時也要更正。
在VS 2012內自行撰寫、修改程式碼。
1.元素CSS屬性宣告及自動套用。
2.宣告自己的CSS表格樣式。
3.表格螢幕上置中，使用CSS。(難)
產生表格的標籤
表格框線、儲存格對齊方式
CSS套用兩種不同表格的方式
table CSS 樣式表設定
th 當成標題列：底色、文字顏色、字型、字體大小、線粗。
td 為儲存格
table {
width: 60%;
border-collapse: collapse;
border: 3px solid #006400; /* 外圍框線深綠色、線粗3px */
}
/*把th當成標題列儲存格*/
th {
border: 2px solid #FFA500; /* 內框橘色、線粗2px */
padding: 20px;
font-family: "標楷體";
font-size: 30px;
color: #ffffff; /*白色*/
background-color: #123456;
}
/*把td當成表格內儲存格*/
td {
border: 1px solid #FFA500; /* 內框橘色、線粗1px */
padding: 20px;
font-size: 14px;
color: blue;
}
JavaScript初體驗
Button onclick 觸發JS讀取input value。
var id = document.getElementById("id").value;
var pw = document.getElementById("pw").value;
document.getElementById("result").textContent = "ID:" + id + " PW:" + pw;
輸入密碼屬性，隱藏與顯示。
參考文獻：https://www.youtube.com/watch?v=T5HRpIqvKt8 (教學影片: 使用VS Code)
延續上周主題，使用VS Code編輯。
※必須注意Font-Awesome版本(最新6.5.2)，否則另一隻眼睛不會切換：請使用5.15.3、5.15.4版本
5.15.3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i style="margin-left:-30px;" class="far fa-eye" id="togglePassword"></i>
this.classList.toggle('fa-eye-slash');
5.15.4
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i style="margin-left:-30px;" class="far fa-eye" id="togglePassword"></i>
this.classList.toggle('fa-eye-slash');
6.5.2 未找到語法內的class
<head>
<!-- 連結Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<h2>利用Checkbox顯示密碼</h2>
<p>請輸入密碼</p>
<label>密碼：</label>
<input type="password" id="cbpassword">
<br>
<input type="checkbox" onclick="cbshow()">顯示密碼
<br>
<br>
<hr>
<h2>利用小圖示Icon顯示密碼</h2>
<br>
<br>
<form>
<label>使用名稱</label>
<input type="text" name="username" id="iconname">
<label>密碼：</label>
<input type="password" name="password" id="iconpassword"><i style="margin-left:-30px;" class="far fa-eye" id="togglePassword"></i>
<button type="submit">登入</button>
</form>
</body>
<script>
//checkbox顯示密碼
function cbshow(){
var x=document.getElementById("cbpassword");
if(x.type==="password"){
x.type="text";
} else {
x.type="password";
}
}
//小圖示顯示密碼
// 抓小圖示id
const togglePassword = document.querySelector("#togglePassword");
// 抓輸入密碼的id
const password = document.querySelector("#iconpassword");
// 監聽事件
togglePassword.addEventListener('click', function(){
// 判斷password還是text
const type = password.getAttribute('type') === 'password' ? 'text':'password';
// 設定
password.setAttribute('type', type);
this.classList.toggle('fa-eye-slash');
});
畫面分割 div
參考文獻：https://www.w3schools.com/html/html_div.asp
2024/5/21 第十五周
Div 上、下各50%，背景色不同。