一個簡單的網頁模板，有導航、子菜單、banner部分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title>網頁</title> 6 <meta charset="UTF-8"> 7 <style> 8 .header,.footer,.con2{width: 100%;} 9 .header{background-color: #00a2e8} 10 .nav{margin: 50px 100px 0 100px;background-color: #ffb9ab;height: 23px;} 11 /*float: left;*/ 12 .nav1:hover>ul{display: block;} 13 .nav1>ul>li{list-style:none} 14 .nav>div{display: inline-block;width: 20%} 15 /*相對父級元素定位*/ 16 .nav>div>ul{display: none;float: left;} 17 /*給ul加浮動*/ 18 .nav>div>div:hover ul{top:0;} 19 /*display:block;*/ 20 .banner{width: 80%;min-height:100px;border: #660077 solid 1px;} 21 /*高度靠內容撐大，這里設置一個最低高度*/ 22 .banner>div{height: 80%;width: 100%;background-color: gold;} 23 /*banner里面的元素*/ 24 .banner>div:nth-child(1){} 25 .neirong2{width:80%;height: 500px;background-color: #00a2e8;} 26 .neirong3{width:80%;height: 500px;background-color: darkolivegreen;} 27 .foot{width:80%;height: 500px;background-color: yellow;} 28 #guding{width: 100px;height: 100px;background-color: #660077;position: fixed;top:200px;left:200px;)} 29 </style> 30 </head> 31 <body style="align-content: center"> 32 <center> 33 <!--頁頭headstart--> 34 <div class="header">頁頭 35 <div class="nav"> 36 <div class="nav1">導航1 37 <ul> 38 <li>1.1</li> 39 <li>1.2</li> 40 <li>1.3</li> 41 <li>1.4</li> 42 </ul> 43 </div> 44 <div>導航2</div> 45 <div>導航3</div> 46 <div>導航4</div> 47 </div> 48 49 </div> 50 <!--headend--> 51 52 <!--station1 start--> 53 <div class="banner">內容1，banner 54 55 <div> 56 1111111111111111111 57 </div> 58 <img src="" alt="banner圖片3張"> 59 </div> 60 <!--station1 end--> 61 <!--station1 start--> 62 <div class="neirong2">內容2 63 <div> 64 65 </div> 66 </div> 67 <!--station1 end--> 68 <!--station1 start--> 69 <div class="neirong3">內容3 70 </div> 71 <!--station1 end--> 72 <div id="guding"> 73 這是固定在電腦屏幕一個位置的部件 74 </div> 75 76 <!--station1 start--> 77 <div class="foot">頁腳 78 <div> 79 </div> 80 </div> 81 <!--station1 end--> 82 </center> 83 </body> 84 </html>
