python學習之網站的編寫（HTML，CSS，JS）（十七）----------示例，構造一個網頁的框架，上部標題，登入，logo，左側選單，右側內容，原始碼
阿新 • • 發佈：2018-11-12
結果：
顏色為了明顯，所以較為難看，可以根據自己的需要進行更改
原始碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> <style> .hide { display: none; } /*決定是否隱藏*/ .item .header { height: 50px; background-color: #ff0000; color: #ffffff; line-height: 50px; } /*選單的的頭部*/ .left { float: left; } /*左漂*/ .right { float: right; } /*右漂*/ .pg-header { height: 50px; background-color: red; } /*頭部*/ .pg-menu { width: 20%; min-width: 200px; background-color: blue; position: absolute; top: 50px; left: 0; bottom: 0; } /*左側的內容*/ .pg-content1 { z-index: 9; width: 80%; min-width: 300px; background-color: blanchedalmond; position: absolute; right: 0; bottom: 0; left: 20%; top: 50px; /*通過下面的這個設定改變頁面的佈局*/ /*overflow: auto;*/ } /*右側的內容*/ .logo{ height: 50px; width: 20%; background-color: white; } /*logo的格式*/ .pg-header-menu{ height: 50px; width: 65%; } /*頭部menu的格式*/ .pg-header-menu-content{ display: inline-block; height: 50px; width: 200px; line-height: 50px; color: white; font-weight: bold; font-size: medium; text-align: center; } /*頭部標題的格式*/ .pg-hover:hover{ background-color: blue; } /*點選則變色*/ .pg-down{ z-index: 10; background-color: white; display: none; width: 70px; position: absolute; top: 50px; right: 131px; } .pg-header .left:hover .pg-down{ display: block; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <!--左側logo開始--> <div class="left logo"> logo </div> <!--左側logo結束--> <!--中間選單開始--> <div class="pg-header-menu left"> <a class="pg-header-menu-content pg-hover"href="https://blog.csdn.net/qq_41901915">內容</a> <a class="pg-header-menu-content pg-hover"href="https://blog.csdn.net/qq_41901915">內容</a> <a class="pg-header-menu-content pg-hover"href="https://blog.csdn.net/qq_41901915">內容</a> <a class="pg-header-menu-content pg-hover"href="https://blog.csdn.net/qq_41901915">內容</a> </div> <!--中間選單結束--> <!--右側登入開始--> <div class="left" style="height: 50px;width: 15%;background-color: chartreuse;position: relative;"> <img class="img" src="html/image/3.jpg" style="height: 40px;width: 40px;border-radius: 50%; padding-left: 5px;padding-top: 5px;"> <div class="pg-down"> <a href="https://blog.csdn.net/qq_41901915">個人資訊</a> <a href="https://blog.csdn.net/qq_41901915">登出</a> </div> </div> <!--右側登入結束--> </div> <div class="pg-content"> <!--左側內容開始--> <div class="left pg-menu"> <!--左側選單開始--> <div style="width:20%"> <div class="item"> <div id="i1" class="header pg-hover" onclick="show('i1');">選單1</div> <div class="content hide"> <div>內容1</div> <div>內容1</div> <div>內容1</div> </div> </div> <div class="item"> <div id="i2" class="header pg-hover" onclick="show('i2');">選單2</div> <div class="content hide"> <div>內容2</div> <div>內容2</div> <div>內容2</div> </div> </div> <div class="item"> <div id="i3" class="header pg-hover" onclick="show('i3');">選單3</div> <div class="content hide"> <div>內容3</div> <div>內容3</div> <div>內容3</div> </div> </div> <div class="item"> <div id="i4" class="header pg-hover" onclick="show('i4');">選單4</div> <div class="content hide"> <div>內容4</div> <div>內容4</div> <div>內容4</div> </div> </div> </div> <!--左側選單結束--> </div> <!--左側內容結束--> <!--右側內容開始--> <div class="left pg-content1"> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div> <!--右側內容結束--> </div> <!--此處留著以後學習了再進行編寫--> <div class="pg-footer"></div> <script> alert('歡迎來到逆水行舟不進則退的主頁'); // 思路：先讓所有的都不顯現，再讓指定輸入的內容顯現 // 通過id找到選單，然後往上返兩層再往下返一層就可以得到所有的item條目 // 然後讓所有的都加上display:none讓所有都不顯示 // 最後讓指定的內容顯示 function show(id) { var current_header = document.getElementById(id); var item_list = current_header.parentElement.parentElement.children; for (var i = 0; i < item_list.length; i++) { var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>