为自己量身定做一个浏览器主页

小咪咪 2021-11-26 10:02 290阅读 0赞

本人比较喜欢简约的东西。现在的浏览器主页都花里胡哨的，还一大堆广告。然后在某个APP上受到启发，自己定制了一个浏览器主页。因为是纯HTML，所以不怎么灵活，要修改类目的时候需要改源码。个人觉得还蛮满意，和大家分享一下。下面是效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70][]

因为代码很简单，就不多说了。下面是HTML代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Zack的私人导航页</title>
 <link href="image/ironman.png" rel="icon">
 <link href="guide.css" rel="stylesheet">
 </head>
 <body>
 <div id="container">
 Zack的私人网页导航
 <div id="guide_web">
 <ul>
 
 <li class="title_list">
 <ul>
 <ul id="search">
 <li class="guide_item"><li id="<a href="http://www.google.com">Google</a>"></li>
 <li class="guide_item"><li id="<a href="http://www.baidu.com">Baidu</a>"></li>
 <li class="guide_item"><li id="<a href="https://github.com/">GitHub</a>"></li>
 <li class="guide_item"><li id="<a href="http://cn.bing.com">Bing</a>"></li>
 </ul>
 </ul>
 </li>
 
 <li class="title_list">
 <ul>
 <ul id="study">
 <li class="guide_item"><li id="<a href="http://ke.qq.com">腾讯课堂</a>"></li>
 <li class="guide_item"><li id="<a href="http://study.163.com">网易云课堂</a>"></li>
 <li class="guide_item"><li id="<a href="https://open.163.com/">网易公开课</a>"></li>
 </ul>
 </ul>
 </li>
 
 <li class="title_list">
 <ul>
 <ul id="rest">
 <li class="guide_item"><li id="<a href="https://www.youku.com/">Youku</a>"></li>
 <li class="guide_item"><li id="<a href="https://www.youtube.com/">YouTube</a>"></li>
 </ul>
 </ul>
 </li>
 
 <li class="title_list">
 <ul>
 <ul id="shopping">
 <li class="guide_item"><li id="<a href="https://www.taobao.com/">TaoBao</a>"></li>
 <li class="guide_item"><li id="<a href="https://www.tmall.com/">TMALL</a>"></li>
 <li class="guide_item"><li id="<a href="https://www.jd.com/">JD</a>"></li>
 <li class="guide_item"><li id="<a href="https://www.suning.com/">suning</a>"></li>
 </ul>
 </ul>
 </li>
 
 <li class="title_list">
 <ul>
 <ul id="tools">
 <li class="guide_item"><li id="<a href="https://developer.android.google.cn/guide/">Android API</a>"></li>
 <li class="guide_item"><li id="<a href="https://www.amap.com/">Amap</a>"></li>
 <li class="guide_item"><li id="<a href="https://mail.163.com/">163mail</a>"></li>
 </ul>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </body>
 </html>

这里说几个地方。为了体现个性，我把tab那里的图标改了。代码的话也就一句：

href就是图片的路径。

然后是CSS代码：

*{
        margin: 0px;
        padding: 0px;
    }
    ul{
        list-style: none
    }
    a{
        text-decoration: none;
        color: aqua;
    }
    #container{
        width: 100%;
        height: 750px;
        margin: auto 0;
        float: left;
        background-color: #000000;
    }
    #guide_title{
        padding-top: 100px;
        color: aqua;
        text-align: center;
        font-size: xx-large;
        font-family: monospace;
    }
    .title_list{
        width: 20%;
        display: block;
        float: left;
    }
    #guide_web{
        padding: 5%;
    }
    .guide_item_tag{
        color: lime;
        align-items: center;
    }
    .guide_item_name{
        color: coral;
    }
    .item_tag{
        color: blue;
    }
    .guide_item{
        display: block;
        margin-left: 10%;
        padding: 5%;
    }

大家可以根据自己平时习惯修改类目。不过改起来还是挺麻烦的，哈哈。

然后修改为浏览器主页的话这里以谷歌浏览器为例说一下。点击浏览器左上角的三点，如图：

![20190723222615572.png][]

然后：设置->启动时->打开特定网页或一组网页->添加新网页。网站网址的话，可以先用浏览器打开那个网页，然后把搜索栏的网址复制下来填进去就好了。如下图：

![20190723223507471.PNG][]

然后就完成了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70]: /images/20211126/04fc6d7fdb0e4f9f9523ac1de7bfd8c0.png
[20190723222615572.png]: /images/20211126/05f861c4892a4ddf8f83ad6c8aeba619.png
[20190723223507471.PNG]: /images/20211126/7e47697b106149db909e9032bcea2aae.png