有了簡單的網頁之後,接下來的導覽連結也很重要。在HTML5中有一個很簡單的按鈕標記叫做button,任何的連結或文字只要用button以及/button標記圍起來,瀏覽器就會自動以按鈕的方式來處理。所以,接續上一篇文章的index.html內容,我們多加了幾個button標籤上去,如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>歡迎光臨</title>
</head>
<body>
<h1>這是我的第一個網頁</h1>
<center>
<button><a href="http://hophd.com">何博士五四三</a></button>
<button><a href="https://tw.news.yahoo.com/">來看新聞</a></button>
<button><a href="https://tw.stock.yahoo.com/">看看股市</a></button>
<button><a href="http://www.cwb.gov.tw">看看氣象</a></button>
</center>
</body>
</html>

  在11到14行的地方,我們分別加上了4個連結按鈕,同時在前面加上<center>標記,提醒瀏覽器把這幾個按鈕放到中間去。所以呈現出來的結果,如下所示的樣子:

htmlcssbtn01

  當然,你一定會覺得這個字太小,而且字型也不好看,同時和標題也太近了。沒問題,這些都可以在CSS中處理。同樣地,回到main.css中,加入以下的內容:

button {
	font-family:微軟正黑體;
	font-size:16px;
	padding:5px;
	margin:5px;
}

  很是很簡單,就是設定button標籤中的字體以及字型大小,另外再加上框線內的空間(padding)以及按鈕和其它的元件間的空間(margin)都設定為各5像素,整個質感就馬上不一樣囉,如下所示:

htmlcssbtn02

  此外,因為按鈕本身就有連結的含義在了,多了那個底線其實不好看。要除去底線,就是要針對按鈕中的連結標籤做設定,所以我們再加上一小段CSS碼,如下所示:

button a {
	text-decoration:none;
}

  呈現出來的結果,如下所示:

htmlcssbtn03

  這樣看起來就滿理想的了!main.css的全部內容列示如下:

h1 {
	text-align: center;
	border:1px solid gray;
	font-family:微軟正黑體;
	border-radius: 5px;
	box-shadow: 2px 2px 2px gray;
	width:300px;
	background:#ccffcc;
	margin:5px auto;
}

button {
	font-family:微軟正黑體;
	font-size:16px;
	padding:5px;
	margin:5px;
}

button a {
	text-decoration:none;
}

(939)

%d 位部落客按了讚: