利用HTML实现网站自定义分类收藏

HTMLHyper Text Marked Language),超文本标记语言,该语言的特点:简易性、可扩展性、平台无关性、通用性,废话有点多了,我们就是用它实现我们分类收藏网站网址的功能:

1、  新建一个HTM文件

2、  htm文件内容:

blob.png

blob.png

3、  源代码

<html>

    <head>

                  <meta charset="utf-8">

                  <title>常用链接收藏</title>

    <head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        table

        {

            border-collapse: collapse;

            text-align: center;

            table-layout: fixed;

            width: 700px;

        }

        table td, table th

        {

            border: 2px solid #cad9ea;

            color: #666;

            height: 30px;

        }

        table thead th

        {

            background-color: #CCE8EB;

            width: 100px;

        }

        table tr:nth-child(odd)

        {

            background: #fff;

        }

        table tr:nth-child(even)

        {

            background: #F5FAFA;

        }

    </style>

   </head>

                  <body>

                  <span style="text-align: center;display:block;font-size:28px;color:darkolivegreen;">常用链接收藏</span>

 

<!--########################分类分割方便分类添加###########################-->

 

                  <span style="text-align: center;display:block;font-size:20px;color:#FF0000;">分类01</span>

                                <table style="border-color: blue">

                                              <tr style="font-size:18px">

                                               <th width=166>

                                                           <a href="https://www.ctocio.com/" style=text-decoration:none target="_blank">网站名字01</a>

                                               </th>

                                               <th width=166>

                                                           <a href="https://www.aqniu.com/" style=text-decoration:none target="_blank">网站名字02</a>

                                               </th>

                                               <th width=166>

                                                           <a href="https://www.ithome.com/" style=text-decoration:none target="_blank">网站名字03</a>

                                               </th>

                                               <th width=166>

                                                           <a href="http://www.yunweipai.com/" style=text-decoration:none target="_blank">网站名字04</a>

                                               </th>

                                               <th width=166>

                                                           <a href="https://www.lelekan.com/" style=text-decoration:none target="_blank">网站名字05</a>

                                               </th> 

                                              </tr>

                                </table>

 

<!--######################分类分割方便分类添加#########################-->

 

                  <span style="text-align: center;display:block;font-size:20px;color:#FF0000;">分类02</span>

                               

                                <table style="border-color: blue">

                                              <tr style="font-size:18px">

                                               <th width=166>

                                                           <a href="https://www.ctocio.com/" style=text-decoration:none target="_blank">网站名字01</a>

                                               </th>

                                               <th width=166>

                                                           <a href="https://www.aqniu.com/" style=text-decoration:none target="_blank">网站名字02</a>

                                               </th>

                                               <th width=166>

                                                           <a href="https://www.ithome.com/" style=text-decoration:none target="_blank">网站名字03</a>

                                               </th>

                                               <th width=166>

                                                           <a href="http://www.yunweipai.com/" style=text-decoration:none target="_blank">网站名字04</a>

                                               </th>

                                               <th width=166>

                                                           <a href="https://www.lelekan.com/" style=text-decoration:none target="_blank">网站名字05</a>

                                               </th> 

                                              </tr>

                                </table>

                  </body>

</html>

4、  效果

blob.png

把自己的浏览器主页设置成此文件,每次打开浏览器就会打开此页面,直接点击你需要浏览的网站即可。


猜你喜欢

转载自blog.51cto.com/6300167/2489855