主页建站 在blogger页面内建立的网址导航源码 Mr Chzi 七月 28, 2022 0 评论 在blogger网页建立静态页面网址导航：原代码为： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="css/animate.css"/> <title>小高教学网www.xx8g.com</title> <meta name="Keywords" content="小高教学网"/> <meta name="Description" content="小高教学网,收录各种技术网站"/> <link rel="shortcut icon" href="img/favicon-20190527110756556.ico"> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; list-style-type: none; } html,body{ overflow-x: hidden; background:url(img/123.jpeg) fixed 100% 100%; } #table{ width: 1000px; margin: 0 auto; border-radius: 10px; overflow: hidden; } #table td{ text-align: center; transition: all 0.3s; width: 190px; height: 50px; } #table .blog:hover{ animation: bounce 0.5s; background-color: cornflowerblue; } #table .sever:hover{ background-color: indianred; animation: rubberBand 0.5s; } #table .jc:hover{ background-color: green; animation: bounceIn 0.5s; } #table td:hover a{ color: white; } .blog a{ color: cadetblue; transition: all 0.3s; } .sever a{ color: indianred; transition: all 0.3s; } .jc a{ color: green; transition: all 0.3s; } .blog{ border: 1px solid cornflowerblue; } .sever{ border: 1px solid indianred; } .jc{ border: 1px solid green; } #top{ width: 100%; } #top img{ width: 10%; } #nav{ width: 100%; height: 50px; background-color: cadetblue; margin-bottom: 10px; } #nav ul{ width: 100%; height: 50px; line-height: 50px; display: flex; justify-content: space-around; text-align: center; } #nav ul li{ width: 130px; height: 100%; display: inline-block; transition: all 0.3s; } #nav ul li:hover{ background-color: lightblue; } #nav a{ color: white; font-size: 20px; } #foot{ width: 100%; text-align: center; } .wz{ border: 1px solid purple; } .wz a{ color: purple; transition: all 0.3s; } #table .wz:hover{ background-color: purple; animation: flipInX 0.5s; } .ds{ border: 1px solid palevioletred; } .ds a{ color: palevioletred; transition: all 0.3s; } #table .ds:hover{ background-color: palevioletred; animation: tada 0.5s; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0" id="table" class="animated zoomIn"> <!--标题--> <tr id="one"> <td colspan="6" style="background-color: cornflowerblue;color: white;font-size: 20px;font-weight: bold;border: 2px solid cornflowerblue;">博客</td> </tr> <!--对应的网站链接--> <tr> <td class="blog"><a href="https://www.xx8g.com/" target="_blank">小高教学网</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <!--标题--> <tr> <td colspan="6" style="background-color: indianred;color: white;font-size: 20px;font-weight: bold;border: 2px solid indianred;">云主机</td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <!--标题--> <tr> <td colspan="6" style="background-color: green;color: white;font-size: 20px;font-weight: bold;border: 2px solid green;">娱乐网/教程网</td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td colspan="6" style="background-color: purple;color: white;font-size: 20px;font-weight: bold;border: 2px solid purple;">网址导航</td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td colspan="6" style="background-color: palevioletred;color: white;font-size: 20px;font-weight: bold;border: 2px solid palevioletred;">卡盟/代刷网/代挂网/QQ机器人</td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> </table> <div id="foot"> <p>Copyright © 2019 小高教学网 Powered by <a href="https://www.xx8g.com/" target="_blank" style="color: black;">小高教学网</a></p> <p>友情链接：<a href="https://www.xx8g.com/" target="_blank" style="color: cadetblue;">小高教学网</a></p> </div> </body> </html> 修改后代码： <!DOCTYPE html> <html lang="zh"> <head> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; list-style-type: none; } html,body{ overflow-x: hidden; } #table{ width: 100%; margin: 0 auto; border-radius: 10px; overflow: hidden; } #table td{ text-align: center; transition: all 0.3s; width: 150px; height: 25px; font-size: 16px; } #table .blog:hover{ animation: bounce 0.5s; background-color: cornflowerblue; } #table .sever:hover{ background-color: indianred; animation: rubberBand 0.5s; } #table .jc:hover{ background-color: green; animation: bounceIn 0.5s; } #table td:hover a{ color: white; } .blog a{ color: cadetblue; transition: all 0.3s; } .sever a{ color: indianred; transition: all 0.3s; } .jc a{ color: green; transition: all 0.3s; } .blog{ border: 1px solid cornflowerblue; } .sever{ border: 1px solid indianred; } .jc{ border: 1px solid green; } #top{ width: 100%; } #top img{ width: 10%; } #nav{ width: 100%; height: 50px; background-color: cadetblue; margin-bottom: 10px; } #nav ul{ width: 100%; height: 50px; line-height: 50px; display: flex; justify-content: space-around; text-align: center; } #nav ul li{ width: 130px; height: 100%; display: inline-block; transition: all 0.3s; } #nav ul li:hover{ background-color: lightblue; } #nav a{ color: white; font-size: 20px; } #foot{ width: 100%; text-align: center; } .wz{ border: 1px solid purple; } .wz a{ color: purple; transition: all 0.3s; } #table .wz:hover{ background-color: purple; animation: flipInX 0.5s; } .ds{ border: 1px solid palevioletred; } .ds a{ color: palevioletred; transition: all 0.3s; } #table .ds:hover{ background-color: palevioletred; animation: tada 0.5s; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0" id="table" class="animated zoomIn"> <!--标题--> <tr id="one"> <td colspan="6" style="background-color: cornflowerblue;color: white;font-size: 20px;font-weight: bold;border: 2px solid cornflowerblue;">网址导航</td> </tr> <!--对应的网站链接--> <tr> <td class="blog"><a href="http://www.chzi.top/" target="_blank">乐语网志</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> <td class="blog"><a href="###" target="_blank">待添加</a></td> </tr> <!--标题--> <tr> <td colspan="6" style="background-color: indianred;color: white;font-size: 20px;font-weight: bold;border: 2px solid indianred;">网址导航</td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> <td class="sever"><a href="###" target="_blank">待添加</a></td> </tr> <!--标题--> <tr> <td colspan="6" style="background-color: green;color: white;font-size: 20px;font-weight: bold;border: 2px solid green;">网址导航</td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> <td class="jc"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td colspan="6" style="background-color: purple;color: white;font-size: 20px;font-weight: bold;border: 2px solid purple;">网址导航</td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> <td class="wz"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td colspan="6" style="background-color: palevioletred;color: white;font-size: 20px;font-weight: bold;border: 2px solid palevioletred;">网址导航</td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> <tr> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> <td class="ds"><a href="###" target="_blank">待添加</a></td> </tr> </table> <div id="foot"> <p>Copyright © 2022 乐语网志 Powered by <a href="http://www.chzi.top/" target="_blank" style="color: black;">乐于网志</a></p> <p>友情链接：<a href="http://www.chzi.top/" target="_blank" style="color: cadetblue;">乐语网志</a></p> </div> </body> </html> 导航示例：乐语网志@教育网址导航 | 乐语网志 (chzi.top) Tags 建站 Facebook Twitter
.jpg)
