HTML網頁排版劃分練習

萬里無雲便是我發表於2017-11-06
HTML網頁
/* 
*Copyright (c) 2017，煙臺大學計算機學院 
All rights reserved. 
*檔名稱：關於HTML的練習
*作    者：張晴晴 
*完成日期：2017年11月6日 
*版 本 號：v1.0  * 
*問題描述：HTML5的新特性 
*輸入描述： 無
*程式輸出： 無
*/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style>
    body{
  height:1000px;
  font-family:"黑體";
  }
 header{
  width:100%;
  height:20%;
  }
 aside{
  width:20%; 
  height:70%;
  float:left;}
 article{
   width:80%;
   height:70%;
   float:left;
   }
 footer{
    width:100%;
    height:10%;
    background:#CCC;
    float:left;
    } 
  #nav{
    list-style-type:none;
    padding:0px;
    width:100%;
 font-size:36px;
    }
   #nav ul{
  line-height:50px;
  position:absolute;
  left:-100000px;
  padding:0px;/*定義元素邊框和元素內容之間的距離*/
  }
  
   #nav li{
  float:left;
  background-color:white;
  width:100px;
  }
 #nav a{
   padding:50% 0%;/*一層網路連線的相對位置*/
  color:black;/*連結本來的顏色*/
  text-decoration:none;
  }
    #nav a:hover{/*hover設定滑鼠移動到a上面時的樣式*/
  color:white;/*滑鼠指向連結顯示的顏色*/
  background-color:blue;/*滑鼠指示背景顯示顏色*/
  list-style-type:none;
  }
  
 #nav li:hover ul{/*指定下拉選單出現的位置*/
  left:auto;   /*left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。*/
  }
  #nav ul li{/*下拉子選單中所有內容*/
  background-color:#FCC;
  list-style-type:none;
  width:100%;
  clear:left;/*規定哪一側不允許浮動元素*/
  }
  #nav ul a{/*二層下拉選單中的樣式*/
  text-decoration:none;
     padding:0px;
  color:#06F;}/*連結本來的顏色*/
  .up{
 position:absolute;
 left:30%;
 top:0%;
}
     #img{
     float:left;
     position:relative;
     left:0px;
     top:30px;
     border:0;
     }
  #table{
           position:relative;
           left:10px;
     top:-5px;
     line-height:20px;}
</style>
</head>
<body>

<header>
<img src="img/logo.gif" height=40% width=100%>
<ul id="nav" class="up">
    <li ><a href="">首頁</a>
            <ul>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            </ul>
   </li>
    <li> <a href="">部落格</a>
            <ul>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            </ul>
   </li>
    <li> <a href="">設計</a>
   <ul>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
   </ul>
 </li>
 <li>  <a href="">相簿</a>
            <ul>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            </ul>
 </li>
 <li>  <a href="">論壇</a>
            <ul>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            </ul>
 </li>
 <li><a href="">關於</a>
            <ul>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            <li><a href="">子選單</a></li>
            </ul>
 </li>
</ul>
<img src="img/banner.jpg" height=60% width=100%>
</header>


<aside><table border="0" cellpadding="0" cellspacing="0" class="table1" height:100%>
<tr>
<td nowrap bgcolor="#CCCCCC" colspan="2">
<input type="text" width="100">
<input type="button" value="Search" align="right">
</td>
</tr>
<tr><td colspan="2"><h4>會員登入</h4></td></tr>
<tr><td>使用者名稱:</td>
     <td align="center"><input type="text" width="100" class="text"></td></tr>
<tr><td>密 碼:</td>
     <td align="center"><input type="text" width="100" class="text"></td></tr>
</tr>
<tr>
<td align="right"><input type="button" value="登入"></td>
<td align="center"><input type="button" value="提交"></td>
</tr>
<tr><td colspan="2"><h4>站點資訊</h4></td></tr>
<tr><td align="right">訪問:</td><td>6562次</td></tr>
<tr><td align="right">線上：</td><td>12人</td></tr>
<tr><td align="right">會員：</td><td>3244次</td></tr>
<tr><td align="right">留言：</td><td>6565個</td></tr>
<tr><td align="right">建站：</td><td>2017/11/6</td></tr>
<tr><td colspan="2"><h4>頁面標準</h4></td></tr>
<tr>
  <td colspan="2" align="center"><img src="img/left.jpg" width="166"></td></tr>
</table>
</aside>


<article><img  border="0" src="img/style_1.jpg" width:50% height:40% id="img">
<br>
<br>
<table width:50% id="table">
<tr><td width="100">風格名稱：</td><td>好看的網頁</td></tr>
<tr><td>設計製作：</td><td>張晴晴</td></tr>
<tr><td>CSS製作：</td><td>晴晴張</td></tr>
<tr><td>釋出時間：</td><td>2016-11-6</td></tr>
<tr><td>演示地址：</td><td>計算機中心</td></tr>
<tr><td>風格簡介：</td><td>簡約型</td></tr>
</table>
<br>
<br>
<table width:100% height:10%>
<tr><td align="center"><font color="#999999" size="-1">點選檢視大圖</font></td>
<td align="right"><img src="img/save.jpg"><font color="#999999" size="-1">點選下載該風格</font></td></tr>
</table>
<hr style="border-style:dashed" color="#999999">
<img  border="0" src="img/style_2.jpg" width:50% height:40% id="img">
<br>
<br>
<table width:50% height:40% id="table">
<tr><td>風格名稱：</td><td>好看的網頁</td></tr>
<tr><td>設計製作：</td><td>張晴晴</td></tr>
<tr><td>CSS製作：</td><td>晴晴張</td></tr>
<tr><td>釋出時間：</td><td>2016-11-6</td></tr>
<tr><td>演示地址：</td><td>計算機中心</td></tr>
<tr><td>風格簡介：</td><td>簡約型</td></tr>
</table>
<br>
<br>
<table width:100% height:10%>
<tr><td align="center"><font color="#999999" size="-1">點選檢視大圖</font></td>
<td align="right"><img src="img/save.jpg"><font color="#999999" size="-1">點選下載該風格</font></td></tr>
</table>
</article>
<footer><p align="center">
<font size="-1" color="#000000">謝謝觀看</font>
</p></footer>



</body>
</html>

執行結果：





相關文章