博客园之首页风格
先看效果
代码copy别人的 没做修改 仅仅做个展示
具体步骤如下
在设置-->通过CSS定制页面风格
敲入如下代码
1 #topNavWrapper { 2 width: 100%; 3 text-align: left; 4 margin-top: 0; 5 margin-right: auto; 6 margin-bottom: 0; 7 margin-left: auto; 8 } 9 #topNav { 10 width: 100%; 11 float: left; 12 display: block; 13 height: 29px; 14 line-height:29px; 15 background-image: url(http://images.cnblogs.com/cnblogs_com/ATree/240749/r_bg_toolbar.png); 16 background-repeat: repeat-x; 17 background-color: #FFFFFF; 18 z-index: 100; 19 overflow: visible; 20 padding: 0 0 0 0; 21 position: fixed; 22 _position: absolute;/*for IE6*/ 23 color: #000000; 24 top:0px; /*保持在顶部*/ 25 } 26 #topNav a:link, 27 #topNav a:visited, 28 #topNav a:hover, 29 #topNav a:active { 30 height: 28px; 31 line-height: 28px; 32 text-decoration: underline; 33 } 34 35 #topNavWrapper ul 36 { 37 margin:0px; 38 padding:0px 20px; 39 list-style:none; 40 float:left; 41 } 42 43 #topNav li 44 { 45 float:left; 46 margin-left:0px; 47 padding:0; 48 line-height:28px; 49 list-style:none; 50 vertical-align:middle; 51 } 52 53 #topNav img 54 { 55 border:0px; 56 width:50px; 57 height:16px; 58 margin-top:7px; 59 _margin-top:4px; 60 } 61 #topNav #ad 62 { 63 margin-top:2px; 64 _margin-top:5px; 65 }
设置-->页首Html代码
1 <div id="topWrapper"> 2 <ul id="topNav"> 3 <li style="color:Red;">【<a href="http://www.cnblogs.com/ATree/" title="C#,ASP.NET技术学习交流分享的博客"><strong>一棵树</strong></a>】欢迎你！ | </li> 4 <li>速度太慢，访问<a href="http://feeds.feedburner.com/cnatree" title="一棵树精简版"><strong>精简版</strong></a></li> | 5 <li><a href="http://feeds.feedburner.com/cnatree" title="一棵树RSS订阅"><img src="http://blog.csdn.net/images/feedsky.gif" alt="一棵树RSS订阅" /></a></li> 6 <li> <strong>热门标签：</strong> <a href="http://www.cnblogs.com/ATree/tag/C%23/" title="C#">C#</a> 7 <a href="http://www.cnblogs.com/ATree/tag/破解/" title="破解">破解</a> 8 <a href="http://www.cnblogs.com/ATree/tag/SEO优化/" title="SEO优化">SEO优化</a> 9 </li> 10 <li id="ad"> 11 <script type="text/javascript"><!-- 12 google_ad_client = "pub-2694187557661900"; 13 /* 468x15, 创建于 09-5-10 */ 14 google_ad_slot = "5680001618"; 15 google_ad_width = 468; 16 google_ad_height = 15; 17 //--> 18 </script> 19 <script type="text/javascript" 20 src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 21 </script> 22 </li> 23 </ul> 24 </div>
搞定，当然其他的js插件，样式也是如此
