美化技巧汇总

网友投稿 597 2022-10-14

美化技巧汇总

美化技巧汇总

首先得有js权限

1.1 页脚js代码

(2)页面定制css代码

/*生成博客目录的CSS*/#uprightsideBar{ font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/ top:400px; right:53px; width: auto; height: auto; }#sideBarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:none; text-align:center; background:rgb(238, 130, 238);}#sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:200px; min-height:108px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff;}#sideBarContents dl{ margin:0; padding:0;}#sideBarContents dt{ margin-top:5px; margin-left:5px;}#sideBarContents dd, dt { cursor: pointer;}#sideBarContents dd:hover, dt:hover { color:#A7995A;}#sideBarContents dd{ margin-left:20px;}

1.2.增加返回顶部按钮

(1)页面定制css代码

#back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer;}

(2)页首html代码

返回顶部

把下面代码复制到公告栏里面

1.4.公告栏时钟

公告里面

我的博客文章(目录)

写自己想要的一些信息

css代码

.qq{ color:red; font-size:15px; margin:8px; font-weight: 500;}.gonggao{ margin:8px; font-size:16px; color:blue;}

1.6.添加github图标

页首html代码

只要把a标签里面的地址换成你自己的就可以

1.7.扩大和缩小功能

(1)页首html代码

扩大
缩小

(2)页面定制css样式

#divExpandViewArea{ position: fixed; color: white; padding: 10px 10px; left: 0px; top: 579px; cursor: pointer; opacity: 0.9; background-color: #68228B;} #divCollapseViewArea{ position: fixed; color: white; padding: 10px 10px; left: 0px; top: 618px; cursor: pointer; opacity: 0.9; background-color: #68228B;}

1.8.设置签名格式

页面定制css样式

/* 设置签名格式 */#MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; text-shadow: 1px 1px 1px #FFF; font-size: 16px; font-family: 'Microsoft Yahei';}

1.9.设置随笔分类间距

左侧随笔分类之间间距

页面定制css样式

/* 左侧最新随笔 */#CatList_LinkList_0_Link_0{ }#CatList_LinkList_0_Link_1{ margin-top:10px;}#CatList_LinkList_0_Link_2{ margin-top:10px;}#CatList_LinkList_0_Link_3{ margin-top:10px;}#CatList_LinkList_0_Link_4{ margin-top:10px;}#CatList_LinkList_0_Link_5{ margin-top:10px;}#CatList_LinkList_0_Link_6{ margin-top:10px;}#CatList_LinkList_0_Link_7{ margin-top:10px;}#CatList_LinkList_0_Link_8{ margin-top:10px;}

1.10.添加分享功能

公告栏里面

1.11.走马灯

页首html代码

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一尊还酹江月。

1.12.推荐和反对

页面定制css

/*推荐和反对*/#div_digg { padding: 10px; position: fixed; _position: absolute; z-index: 1000; bottom: 20px; right: 0; _right: 17px; border: 1px solid #D9DBE1; background-color: #FFFFFF; filter: alpha(Opacity=80); -moz-opacity: 1; opacity: 1;}.icon_favorite { background: transparent url('no-repeat 0 0; padding-left: 16px;}

1.1 页脚js代码

(2)页面定制css代码

/*生成博客目录的CSS*/#uprightsideBar{ font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/ top:400px; right:53px; width: auto; height: auto; }#sideBarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:none; text-align:center; background:rgb(238, 130, 238);}#sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:200px; min-height:108px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff;}#sideBarContents dl{ margin:0; padding:0;}#sideBarContents dt{ margin-top:5px; margin-left:5px;}#sideBarContents dd, dt { cursor: pointer;}#sideBarContents dd:hover, dt:hover { color:#A7995A;}#sideBarContents dd{ margin-left:20px;}

1.2.增加返回顶部按钮

(1)页面定制css代码

#back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer;}

(2)页首html代码

返回顶部

把下面代码复制到公告栏里面

1.4.公告栏时钟

公告里面

我的博客文章(目录)

写自己想要的一些信息

css代码

.qq{ color:red; font-size:15px; margin:8px; font-weight: 500;}.gonggao{ margin:8px; font-size:16px; color:blue;}

1.6.添加github图标

页首html代码

只要把a标签里面的地址换成你自己的就可以

1.7.扩大和缩小功能

(1)页首html代码

扩大
缩小

(2)页面定制css样式

#divExpandViewArea{ position: fixed; color: white; padding: 10px 10px; left: 0px; top: 579px; cursor: pointer; opacity: 0.9; background-color: #68228B;} #divCollapseViewArea{ position: fixed; color: white; padding: 10px 10px; left: 0px; top: 618px; cursor: pointer; opacity: 0.9; background-color: #68228B;}

1.8.设置签名格式

页面定制css样式

/* 设置签名格式 */#MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; text-shadow: 1px 1px 1px #FFF; font-size: 16px; font-family: 'Microsoft Yahei';}

1.9.设置随笔分类间距

左侧随笔分类之间间距

页面定制css样式

/* 左侧最新随笔 */#CatList_LinkList_0_Link_0{ }#CatList_LinkList_0_Link_1{ margin-top:10px;}#CatList_LinkList_0_Link_2{ margin-top:10px;}#CatList_LinkList_0_Link_3{ margin-top:10px;}#CatList_LinkList_0_Link_4{ margin-top:10px;}#CatList_LinkList_0_Link_5{ margin-top:10px;}#CatList_LinkList_0_Link_6{ margin-top:10px;}#CatList_LinkList_0_Link_7{ margin-top:10px;}#CatList_LinkList_0_Link_8{ margin-top:10px;}

1.10.添加分享功能

公告栏里面

1.11.走马灯

页首html代码

大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一尊还酹江月。

1.12.推荐和反对

页面定制css

/*推荐和反对*/#div_digg { padding: 10px; position: fixed; _position: absolute; z-index: 1000; bottom: 20px; right: 0; _right: 17px; border: 1px solid #D9DBE1; background-color: #FFFFFF; filter: alpha(Opacity=80); -moz-opacity: 1; opacity: 1;}.icon_favorite { background: transparent url(') no-repeat 0 0; padding-left: 16px;}

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:XAndrDB- Android 的 ORM 框架
下一篇:Ring- Clojure 的 Web 框架
相关文章

 发表评论

暂时没有评论,来抢沙发吧~