主頁介面
主頁程式碼(HTML)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <!--宣告格式 符合國際規定-->
<head>
<meta charset="utf-8" /> <!--charset 設定編碼-->
<title>主頁</title><!--標題-->
<style>
#title {
background-color: #E1E1E1;
width: 960px;
height: 200px;
display: block;
margin: auto;
}
#type {
background-color: #808080;
width: 960px;
height: 40px;
display: block;
margin: auto;
}
#content {
background-color: #c6c6c6;
width: 960px;
height: 680px;
}
#footer {
background-color: #808080;
width: 960px;
height: 200px;
}
#LContent {
background-image: url(灰色.jpg);
background-color: #c6c6c6;
width: 480px;
height: 680px;
float: left;
}
#RContent {
background-image: url(灰色.jpg);
background-color: #c6c6c6;
width: 480px;
height: 680px;
float: left;
}
#LContent h4 { margin-left:10px; }
#LContent a { text-decoration:none;}
/*游標變色*/
#LContent .active {
background-color: #black;
}
.clearFloat { clear:both; }
#footer p { margin:5px 10px; }
#Lfooter {
background-color: #808080;
width: 480px;
height: 200px;
float: left;
}
#Rfooter {
background-color: #808080;
width: 480px;
height: 200px;
float: left;
}
/*游標變色*/
th:hover {
background-color: #black;
}
th, td {
border: 1px solid white;
padding: 1px;
}
table {
border-spacing: 1px;
border-collapse: collapse;
width: 100%;
margin: 0auto;
border: 1px solid white;
}
.item {
border-left: solid #808080 2em;
}
.none {
list-style-type: none;
}
#MyBlog {
position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/
top: 50%; /*設置垂直位置*/
right: -50px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/
background: #c6c6c6; /*背景顏色*/
padding: 10px 10px;
border-radius: 100px; /*圓角*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 90px;
height:40px;
}
#MyBlog:hover { /*當滑鼠移至此區塊時，伸縮區塊*/
right:-20px;
width: 270px;
height: 40px;
}
#MyBlog #title {
padding-right: 5px; /*讓標題與連結中間有空隙*/
height: 40px;
width: 450px;
}
</style>
</head>
<body background="灰磚.jpg">
<div id="title"><img src="個人介紹2.jpg" alt="個人介紹" height="200" width="960" style="display:block; margin:auto;" />
</div>
<div id="type">
<table border="0" style="height:40px;width:960px">
<tr>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px" bgcolor="black"><a href="主頁.html" style="text-decoration:none;color:white">個人簡介</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="課表改.html" style="text-decoration:none;color:white">個人課表</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛音樂.html" style="text-decoration:none;color:white">最愛音樂</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛遊戲.html" style="text-decoration:none;color:white">最愛遊戲</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="留言板改.html" style="text-decoration:none;color:white">留言板</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="計算機改.html" style="text-decoration:none;color:white">計算機</a></th>
</tr>
<table>
</div>
<div id="content">
<div id="LContent" >
<br><br><br>
<h3 style="font-family:微軟正黑體;color:#000000;" class="item">個人介紹</h3>
<ul class="none">
<li style="font-family:微軟正黑體;font-size:15px;color:#000000;"> 姓名 黃琳茜</li>
<li style="font-family:微軟正黑體;font-size:15px;color:#000000;"> 生日 85 年 03 月 12 日</li>
<li style="font-family:微軟正黑體;font-size:15px;color:#000000;"> 科系 資訊工程學系</li>
<li style="font-family:微軟正黑體;font-size:15px;color:#000000;"> 學號 110410544</li>
</ul>
<br><br>
<h3 style="font-family:微軟正黑體;color:#000000;" class="item">喜好</h3>
<ul class="none">
<li style="font-family:微軟正黑體;color:#000000;"> 音樂 古風樂</li>
<li style="font-family:微軟正黑體;color:#000000;"> 影劇 犯罪心理，CSI重返犯罪現場</li>
<li style="font-family:微軟正黑體;color:#000000;"> 遊戲 劍俠情緣三</li>
<li style="font-family:微軟正黑體;color:#000000;"> 手遊 刀劍亂舞，陰陽師，FGO</li>
</ul>
<br><br>
<h3 style="font-family:微軟正黑體;color:#000000;" class="item">聯絡方式</h3>
<ul class="none">
<li style="font-family:微軟正黑體;color:#000000;"> FB 黃琳茜</li>
<li style="font-family:微軟正黑體;color:#000000;"> QQ 2634862629</li>
<li style="font-family:微軟正黑體;color:#000000;"> LINE qx03120410</li>
<li style="font-family:微軟正黑體;color:#000000;"> MAIL [email protected]</li>
</ul>
</div>
<div id="RContent">
<br><br><br><br><br><br><br><br><br><br>
<img src="個人照.jpg" alt="個人照" style="display:block; margin:auto;"/>
</div>
</div>
<div id="MyBlog">
<span id="title">
<a href="主頁.html"><img src="個人.jpg" alt="個人介紹" height="40" width="40" /></a>
<a href="課表改.html"><img src="學校.jpg" alt="課表" height="40" width="40" /></a>
<a href="最愛音樂.html"><img src="音樂.jpg" alt="音樂" height="40" width="40" /></a>
<a href="最愛遊戲.html"><img src="遊戲.jpg" alt="遊戲" height="40" width="40" /></a>
<a href="留言板改.html"><img src="留言.jpg" alt="留言板" height="40" width="40" /></a>
<a href="計算機改.html"><img src="小計算機.jpg" alt="計算機" height="40" width="40" /></a>
</span>
</div>
<div id="footer">
<img src="個人介紹.jpg" alt="個人介紹" height="200" width="960" style="display:block;background-repeat:repeat-x;" />
</div>
</body>
</html>
返回目錄