redis主從叢集搭建
阿新 • • 發佈：2022-03-25
今天用JavaScript做了web個人主頁
用到了JavaScript+div+css
截圖如下
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>劉柏的個人主頁</title> <style type="text/css"> /*設定超連結樣式*/ table { border-collapse: collapse; border-spacing: 0; } a { color:black; text-decoration: none; font-size: 12px; /*font-weight: bolder;*/ } a:hover { color: white; /*text-decoration: underline;*/ /*font-size: 12px;*/ background:rgb(60, 60, 60); } a:visited { /*color: #5086a5;*/ font-size: 12px; } /*整個tab層居中，寬度為600px*/ #tabDiv { width: 600px; margin: 1em auto; padding-bottom: 10px; border-right: #b2c9d3 1px solid; border-top: #b2c9d3 1px solid; border-left: #b2c9d3 1px solid; border-bottom: #b2c9d3 1px solid; background: #ffffff; } /*tab頭的樣式*/ #tabsHead { padding-left: 0px; height: 35px; background-color:rgb(180, 180, 180); font-size: 1em; margin: 1px 0px 0px; /*color: #5086a5;*/ line-height: 35px; } /*已選tab頭（超連結）的樣式*/ .curtab { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; border-right: #b2c9d3 1px solid; font-weight: bold; float: left; cursor: pointer; background: #ffffff; } /*未選tab頭（超連結）的樣式*/ .tabs { border-right: #c1d8e0 1px solid; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; font-weight: normal; float: left; cursor: pointer; } p { font-size: 12pt; text-indent: 2em; } li { border-bottom-style: solid; border-bottom-color: #EEE; border-bottom-width: thin; height: 45px; font-family: "宋體"; font-size: 18pt; } h4{ letter-spacing:20px; font-family:華文彩雲; font-size:25px; color:#333333; } h4:hover{ color:rgb(60, 179, 113); } td{ letter-spacing: 3px; border:1px solid rgb(180, 180, 180); } #ziping{ line-height:30px } #tabContent4 { } .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; float: left; transition-duration: 0.4s; } .button a{ } .button:hover{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } ol{ } .content{ margin-top: 50px; margin-left: 10px; } </style> <script type="text/javascript"> //顯示tab（tabHeadId：tab頭中當前的超連結；tabContentId要顯示的層ID） function showTab(tabHeadId,tabContentId) { //tab層 var tabDiv = document.getElementById("tabDiv"); //將tab層中所有的內容層設為不可見 //遍歷tab層下的所有子節點 var taContents = tabDiv.childNodes; for(i=0; i<taContents.length; i++) { //將所有內容層都設為不可見 if(taContents[i].id!=null && taContents[i].id != 'tabsHead') { taContents[i].style.display = 'none'; } } //將要顯示的層設為可見 document.getElementById(tabContentId).style.display = 'block'; //遍歷tab頭中所有的超連結 var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a'); for(i=0; i<tabHeads.length; i++) { //將超連結的樣式設為未選的tab頭樣式 tabHeads[i].className='tabs'; } //將當前超連結的樣式設為已選tab頭樣式 document.getElementById(tabHeadId).className='curtab'; document.getElementById(tabHeadId).blur(); } </script> </head> <body> <div style="width: 100%; font-family: 微軟雅黑; text-align: center; font-size: 20pt;">劉柏的個人主頁</div> <div style="text-align: center;"><audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"src="周深%20-%20大魚.mp3"></audio></div> <div id="tabDiv" style="width:1500px"> <div id="tabsHead"> <a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">基本資料</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">學習經歷</a> <a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">所得獎勵</a> <a id="tabs4" class="tabs" href="javascript:showTab('tabs4','tabContent4')">最新動態</a> </div> <div id="tabContent1" style="display: block"> <table style="border-width: 0; width: 100%;text-align:center" border="1" border-style="solid" border-color="#ffff"> <h4 style="text-align: center ">個人資訊</h4> <tr> <td style="width:30%;height: 38px">姓名：劉柏</td> <td style="width:30%;height: 38px">生日：2002-01-24</td> <!-- <td style="width:40%"><img src="C:\Users\bai\Desktop\image\001.png" alt=""></td>--> <td style="width:30%;height: 38px">年齡：20</td> </tr> <tr> <td style="width:30%;height: 38px">民族：漢族</td> <td style="width:30%;height: 38px">政治面貌：團員</td> <td style="width:30%;height: 38px">學歷：本科</td> </tr> <tr> <td style="width:30%;height: 38px">國籍：中華人民共和國</td> <td style="width:30%;height: 38px">出生地：吉林省四平市</td> <td style="width:30%;height: 38px">現居地：石家莊</td> </tr> <tr > <td style="width:30%;height: 38px">身高：175cm</td> <td style="width:30%;height: 38px">體重：60kg</td> <td style="width:30%;height: 38px">婚姻狀況：未婚</td> </tr> <tr > <td style="width:30%;height: 38px">所在學校</td> <td style="width:30%;height: 38px">學校網址：<a href="https://www.stdu.edu.cn/">https://www.stdu.edu.cn/</a></td> <td style="width:30%;height: 38px">專業：軟體工程</td> </tr> <tr> <td colspan="3" style="height: 38px">技能，特長或愛好</td> </tr> <tr> <td style="width:30%;height: 38px">游泳</td> <td style="width:30%;height: 38px">打遊戲</td> <td style="width:30%;height: 38px">個人部落格：<a href="https://home.cnblogs.com/">https://home.cnblogs.com/</a></td> </tr> <tr> <td colspan="3" style="height: 38px">聯絡方式</td> </tr> <tr> <td style="width:30%;height: 38px">Email:[email protected]</td> <td style="width:30%;height: 38px">聯絡電話：15665916652</td> <td style="width:30%;height: 38px">通訊地址：石家莊鐵道大學</td> </tr> <tr> <td id="ziping" colspan="3" rowspan="" style="height:150px">自我評價：作為一名石家莊鐵道大學的軟體工程學生，我所擁有的是年輕和知識。年輕雖然缺少經驗，但是年輕也意味著熱情和活力，我自信能憑自己的能力和學識在畢業以後的工作和生活中克服各種困難，不斷實現自我的人生價值和追求的目標。面對當今激烈的人才競爭，我很清楚自己知識有限，但我更清楚我有著不甘落後的精神和不斷學習、不斷提高的願望。</td> </tr> </table> </div> <div id="tabContent2" style="display: none"> <ul> <li>兒時，父母在北京工作，我便跟著來到北京上學，在北京生活了六年</li> <li>隨後，我回到了家鄉，在爺爺奶奶的陪伴下，度過了美好的初中三年</li> <li>在不懈的努力下，我考進了市一中，高中的學習並不是很用心，臨近高考時，還有些貪玩</li> <li>最終我考進了現在的石家莊鐵道大學，很是開心</li> <li>我決定在大學的生活中，繼續努力，可以通過自己的努力讓自己以後獲得一個好的生活，對父母儘儘孝心。</li> </ul> </div> <div id="tabContent3" style="display: none"> <table> <tr> <td width="50%" style="text-align: center">第二屆王者榮耀全國大賽亞軍</td> <td width="50%"><img src="00.png" alt=""></td> </tr> </table> </div> <div id="tabContent4" style="display: none;" > <div class="bu"> <ol><a href="left.html" target="iframe_a" class="button">我的日誌</a></ol> <ol><a href="right.html" target="iframe_a" class="button">個人相簿</a></ol> </div> <br> <div class="content"> <iframe src="left.html" frameborder="0" name="iframe_a" width="100%" height="700px"> </iframe> </div> </div> </div> <hr /> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;">©版權所有：石家莊鐵道大學資訊科學與技術學院</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>right</title> <style type="text/css"> li{ list-style-type: none; letter-spacing: 3px; } </style> </head> <body> <div> <ul> <li>2021年1月14日</li> <li>今天是我的生日，在家人和朋友的陪伴下我度過了一個美好而幸福的一天</li> <li><img src="0.png" alt=""> <img src="031.png" alt=""></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <img src="011.gif" alt=""> <br><img src="002.png" alt=""> <img src="003.png" alt=""> <img src="012.png" alt=""> </div> </body> </html>