| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title></title> | |
| <link rel="shortcut icon" href="favicon.ico"> | |
| <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/bootstrap.min.css" /> | |
| <script type="text/javascript" src="js/jquery.min.js" ></script> | |
| <style> | |
| /*頂部圖片信息*/ | |
| .myTop{ | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| height: 40%; | |
| overflow: hidden; | |
| } | |
| .myTop-img img{ | |
| width: 100%; | |
| } | |
| .myTop-img-back{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, #0055B2 , #ffffff); | |
| opacity: 0.8; | |
| } | |
| .myTop-font{ | |
| position: absolute; | |
| bottom: 0; | |
| height: 50%; | |
| width: 100%; | |
| color: #FFFFFF; | |
| z-index: 1000; | |
| font-family: "微軟雅黑"; | |
| font-size: 18px; | |
| text-indent: 20px; | |
| } | |
| .liu{ | |
| font-size: 30px; | |
| } | |
| /*底部導航*/ | |
| .myFoot{ | |
| border-top: 1px solid #E0E0E0; | |
| position: fixed; | |
| bottom: 0; | |
| width: 100%; | |
| height: 50px; | |
| background-color: #ffffff; | |
| } | |
| /*內容部分*/ | |
| .myCont{ | |
| margin-top: 72%; | |
| margin-bottom: 13%; | |
| } | |
| .gxp img{ | |
| width: 40px; | |
| border-radius: 50%; | |
| border: 2px solid #FFFFFF; | |
| margin: auto 5px; | |
| } | |
| .row img{ | |
| margin: 5px auto; | |
| } | |
| .myFoot a{ | |
| color: #7F7F7F; | |
| text-align: center; | |
| line-height: 50px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $(".myFoot a").click(function(){ | |
| //改變當前被點擊的元素樣式 | |
| $(this).css({ | |
| "color":"#0062FA" | |
| }); | |
| //還原同胞元素 | |
| $(this).siblings().css({ | |
| "color":"#7F7F7F" | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!--頂部圖片信息--> | |
| <div class="myTop"> | |
| <div class="myTop-font"> | |
| <p class="liu">劉德華</p> | |
| <p style="float: left;" >Andy Lau </p> | |
| <p style="float: right;margin-right: 20px;"> | |
| <i class="fa fa-map-marker"></i> 中國 · 香港 | |
| </p> | |
| <hr style="clear: both;width: 95%;margin:60px auto 20px;" /> | |
| <p style="float: left;">關係譜</p> | |
| <div class="gxp" style="float: right;margin-right: 20px;"> | |
| <img src="img/a1.jpg" /> | |
| <img src="img/a2.jpg" /> | |
| <img src="img/a3.jpg" /> | |
| <img src="img/a4.jpg" /> | |
| <i class="fa fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <!--蒙版--> | |
| <div class="myTop-img-back"></div> | |
| <!--背景圖片--> | |
| <div class="myTop-img"> | |
| <img src="img/timg.jpg"/> | |
| </div> | |
| </div> | |
| <!--內容部分--> | |
| <div class="myCont container"> | |
| <p style="font-size: 20px;font-family: '微軟雅黑';text-align: center;">作品展示</p> | |
| <div class="row"> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> | |
| </div> | |
| </div> | |
| <!--底部導航--> | |
| <div class="myFoot container-fluid"> | |
| <div class="row"> | |
| <a class="col-xs-4" href="javascript:;"> | |
| <i class="fa fa-book"></i> | |
| 最新作品 | |
| </a> | |
| <a class="col-xs-4" href="javascript:;"> | |
| <i class="fa fa-book"></i> | |
| 緋聞八卦 | |
| </a> | |
| <a class="col-xs-4" href="javascript:;"> | |
| <i class="fa fa-book"></i> | |
| 關係譜 | |
| </a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
APP之底部導航
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
[轉載]慎用標籤 提交表單 [IE6無法提交表單][事件衝突]
我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個