分享一個小技術(shù) 美化瀏覽器書簽做成網(wǎng)頁

效果圖

將瀏覽器書簽美化，便于上傳網(wǎng)絡(luò)分享給他人。

該樣式支持谷歌瀏覽器75.0.3770.100、chrome內(nèi)核的edge和IE瀏覽器11導(dǎo)出的書簽。

第一步

導(dǎo)出書簽

第二步

使用代碼編輯器打開導(dǎo)出的收藏夾(能不用記事本就別用記事本) 在<TITLE>Bookmarks</TITLE>后面插入

<base target="_blank" /><!-- 所有鏈接新窗口打開 -->
<link rel="stylesheet" ><!-- 引入MDUI css -->
<script src="https://cdnjs.loli.net/ajax/libs/mdui/0.4.2/js/mdui.min.js"></script><!-- 引入MDUI JS -->
<style>
body{max-width:1200px;margin:auto;}/* 所有連接新窗口打開 */
a{  text-decoration:none;
        display:inline-block;
        color:#233333;
        float:left;
        width:19%;
        height:30px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
        margin:5px;
        border:1px solid #e5e5e5;
        line-height:30px;
        text-align:left;} /* 設(shè)置A標(biāo)簽樣式 */
a:hover {color: red;background-color:#e5e5e5;border:1px solid #233333;} /* 設(shè)置A標(biāo)簽鼠標(biāo)放上去的樣式 */
h3{width:1200px;height:50px;background-color:#e5e5e5;} /* 設(shè)置H3標(biāo)簽樣式 */
dt{max-width:1200px;} /* 設(shè)置DT標(biāo)簽樣式 */
.mdui-btn-block{background-color:#e5e5e5;} /* 設(shè)置H3背景顏色 */
img{height:15px;margin-right:10px;margin-left:10px;} /* 設(shè)置圖標(biāo)樣式 */
</style>

第三步

全局替換<H3為<H3 class=”mdui-btn mdui-btn-block”

第四步

谷歌瀏覽器導(dǎo)出的全局替換ICON=”為 ><img src=”

IE瀏覽器導(dǎo)出的書簽全局替換ICON_URI=”為><img src=”