簡單認識網頁

阿新 • • 發佈：2021-04-28

簡單認識網頁，表格與佈局

資源

《深入淺出HTML》《CSS圖鑑》《CSS那些事⼉》《JavaScript DOM程式設計藝術(第2版)》《程式碼整潔之道》

準備工作

隨便下個網頁編輯器，網上很多，我用的Eclipse，安裝教程就不敘述了，進入正題，新建兩個檔案NewFile.html和NewFile.css
新建檔案
網頁基本框架搭建,引入css檔案

<html>
	//網頁頭部
	<head>
		<link href="NewFile.css" type="text/css" 
 rel="stylesheet"></link>
	</head>
	//網頁主體,可視部分
	<body>
	</body>
</html>

實現表格隔行變色

寫NewFile.html內容，寫在body標籤內，新增class，一行一換

<!-- 用g1和w1控制隔行變色，所以一行一換 -->
<table>
  <tr class="g1">
    <th>姓名</th>
    <th>愛好</th>
  </ 
tr>
  <tr class="w1">
    <td>張三</td>
    <td>足球</td>
  </tr>
	……重複程式碼不貼
</table>

寫NewFile.css內容，寫在body標籤內，新增class

/* 
1.設定外邊距50，居中對齊
2.文字居中 
3.合併表格邊框
*/
table {
	margin:50 auto;
	text-align: center;
	border-collapse:collapse;
}
/* 
1.設定邊框1畫素 實線 黑色
2.列寬60畫素
*/ 

table tr th{
	border: 1px solid black;
	width: 60px;
	
}
/* 設定邊框1畫素 實線 黑色 */
table tr td{
	border: 1px solid black;
}
/* g1類定義背景色為白色，文字大小為12 */
.g1 {
	background-color: white;
	font-size: 12;
}
/* w1類定義背景色為灰色，文字大小為12 */
.w1 {
	background-color: bbb;
	font-size: 12;
}

看看效果
顯示效果

盒子模型佈局

想要以下顯示效果，初步觀察可以設定為三列，分為左右兩個模組
佈局效果
所以先把css樣式寫好

/* 取消外邊距 */
*{
	margin: 0;
}
/* 定義為外邊框 我想居中顯示，並且設定盒子區域，所以加了寬 */
.box{
	width: 960px;
	background-color: white;
	margin:0 auto;
	height: 680px;
}
/* 定義左邊兩盒子的父元素 */
.boxsl{
	float: left;
	width: 316px;
}
/* 定義右邊盒子的父元素 */
.boxsr{
	float: left;
	width: 642px;
}
/* 取消浮動 */
.boxc{
	clear: both;
}
/* 分為三份，一個盒子寬306畫素 左浮動 左上邊距10畫素*/
.box1{
	margin-left: 10px;
	margin-top: 10px;
	width: 306px;
	background-color: fffacd;
	float: left;
}
/* 分為三份，盒子佔兩份寬622畫素 左浮動 左上邊距10畫素 */
.box2{
	margin-left: 10px;
	margin-top: 10px;
	width: 622px;
	background-color: fffacd;
	float: left;
}
/* 分為三份，盒子佔三份寬940畫素 左浮動 左上右邊距10畫素 */
.box3{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	width: 940px;
	background-color: fffacd;
	float: left;
}
/* 高150畫素，下同 */
.h150{
	height: 150px;
}
.h195{
	height: 195px;
}
.h250{
	height: 250px;
}
.h400{
	height: 400px;
}
.h500{
	height: 500px;
}

然後寫html

<div class="box">
	<!-- 左邊盒子 -->
	<div class="boxsl">
		<div class="box1 h150"></div>
		<div class="box1 h500 boxc"></div>
	</div>
	<!-- 右邊盒子 -->
	<div class="boxsr">
		<div class="box2 h250"></div>
		<div class="box1 h400"></div>
		<div class="box1 h195"></div>
		<div class="box1 h195"></div>
	</div>
</div>

效果
效果圖

新增背景音樂

我用的audio元素，缺點是對瀏覽器有要求

<!-- 
autoplay 音訊在就緒後馬上播放
loop每當音訊結束時重新迴圈開始播放
src音樂地址，我的音樂就放在同一個目錄下，一般專案會單獨放個資料夾
 -->
<audio autoplay="autoplay" loop="loop" src="BillieEilish.mp3"/>

總結

1.更新程式碼重新整理頁面有時無變化，可能是未儲存程式碼或瀏覽器快取的原因。
2.html5為了使元素可拖動一般需要把draggable屬性設為"true"。
3.html5日期選擇器需要把type屬性設定為date（Firefox 或者 Internet Explorer 11 以及更早版本不支援 type=“date”）。
4.CSS盒子模型中的Margin、Border、Padding分別為外邊距、邊框、內邊距。
5.html常見事件
onchange HTML 元素已被改變
onclick 使用者點選了 HTML 元素
onmouseover 使用者把滑鼠移動到 HTML 元素上
onmouseout 使用者把滑鼠移開 HTML 元素
onkeydown 使用者按下鍵盤按鍵
onload 瀏覽器已經完成頁面載入

簡單認識網頁