時間太久，差點忘記跟新了。

靜態頁面完成之後，用css設定樣式。樣式主要分為兩大塊——背景圖設定、中間半透明標籤。

1.背景圖設定。

背景圖片的設定，主要是將圖片能夠鋪滿整個螢幕。並且後期實現圖片切換的效果，將圖片路徑寫在background:url()內。

body
{
	background:url(../img/images/8.jpg);
	background-size:100%;
	background-repeat: no-repeat;
}

2.設定把透明框體。

透明框體的設定，主要是框體內部元素的位置排列，以及框體圓角化和透明度的樣式設定。

body #container
{
	background-color:black;
	opacity: 0.2;
	width:500px;   
	height: 250px;   
	margin:0 auto;
	margin-top:200px;
        border-radius:20px;
}

body #header
{
  height:160px;	
  text-align:center;
  margin:0px;
}

body #header-content
{
	color:white;
	height:75px;
	
}

body #header-content a
{
	font-family: "楷體";
	color:white;
	text-decoration:none;
	font-size:22px;
	letter-spacing:10px;
}

body #header-content a:hover
{
	text-decoration: underline;
}

body #header-content p
{
	font-size:15px;
}

body #content
{
    height:140px;	
    margin:0px;
    text-align: center;
    vertical-align: middle;
}

body #content #main-content a
{
	
	color:white;
	text-decoration: none;
}

body #content #main-content a:hover
{
	text-decoration: underline;
	color:white;
}

body #footer hr2
{
	margin-top:300px;
}

body #footer #footer-content button
{
	border:0;
	background-color:#000000;
	font-size:20px;
	color:white;
	border-radius: 10px;
	float: right;
	margin-right: 25px;
}
 

這樣，樣式效果就做好了。