版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本人比较喜欢简约的东西。现在的浏览器主页都花里胡哨的，还一大堆广告。然后在某个APP上受到启发，自己定制了一个浏览器主页。因为是纯HTML，所以不怎么灵活，要修改类目的时候需要改源码。个人觉得还蛮满意，和大家分享一下。下面是效果图：
因为代码很简单，就不多说了。下面是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">
<p id="guide_title">Zack的私人网页导航</p>
<div id="guide_web">
<ul>
<!--搜索栏目-->
<li class="title_list">
<ul>
<span class="guide_item_tag"><ul id="</span><span class="guide_item_name">search</span><span class="guide_item_tag">"></span>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="http://www.google.com">Google</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="http://www.baidu.com">Baidu</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://github.com/">GitHub</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="http://cn.bing.com">Bing</a></span><span class="item_tag">"></span></li>
<span class="guide_item_tag"></ul></span>
</ul>
</li>
<!--学习栏目-->
<li class="title_list">
<ul>
<span class="guide_item_tag"><ul id="</span><span class="guide_item_name">study</span><span class="guide_item_tag">"></span>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="http://ke.qq.com">腾讯课堂</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="http://study.163.com">网易云课堂</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://open.163.com/">网易公开课</a></span><span class="item_tag">"></span></li>
<span class="guide_item_tag"></ul></span>
</ul>
</li>
<!--放松栏目-->
<li class="title_list">
<ul>
<span class="guide_item_tag"><ul id="</span><span class="guide_item_name">rest</span><span class="guide_item_tag">"></span>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.youku.com/">Youku</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.youtube.com/">YouTube</a></span><span class="item_tag">"></span></li>
<span class="guide_item_tag"></ul></span>
</ul>
</li>
<!--购物栏目-->
<li class="title_list">
<ul>
<span class="guide_item_tag"><ul id="</span><span class="guide_item_name">shopping</span><span class="guide_item_tag">"></span>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.taobao.com/">TaoBao</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.tmall.com/">TMALL</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.jd.com/">JD</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.suning.com/">suning</a></span><span class="item_tag">"></span></li>
<span class="guide_item_tag"></ul></span>
</ul>
</li>
<!--工具栏目-->
<li class="title_list">
<ul>
<span class="guide_item_tag"><ul id="</span><span class="guide_item_name">tools</span><span class="guide_item_tag">"></span>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://developer.android.google.cn/guide/">Android API</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://www.amap.com/">Amap</a></span><span class="item_tag">"></span></li>
<li class="guide_item"><span class="item_tag"><li id="</span><span class="guide_item_name"><a href="https://mail.163.com/">163mail</a></span><span class="item_tag">"></span></li>
<span class="guide_item_tag"></ul></span>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>这里说几个地方。为了体现个性，我把tab那里的图标改了。代码的话也就一句：
<link href="image/ironman.png" rel="icon">
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%;
}
大家可以根据自己平时习惯修改类目。不过改起来还是挺麻烦的，哈哈。
然后修改为浏览器主页的话这里以谷歌浏览器为例说一下。点击浏览器左上角的三点，如图：
然后：设置->启动时->打开特定网页或一组网页->添加新网页。网站网址的话，可以先用浏览器打开那个网页，然后把搜索栏的网址复制下来填进去就好了。如下图：
扫描二维码关注公众号，回复：
7572081 查看本文章
然后就完成了。