王传业的博客

新版饭否话唠模板

王传业发表于2008-09-18 21:18:03 分类:

适用于新版校内网的饭否模板

{}body {
background:#FFFFFF url(http://static.fanfou.com/img/bg.gif) repeat-x scroll 0 0;
}
a {
color:#0066CC;
}
a:link{
color:#0066CC;
}
a:visited {
color:#0066CC;
}
a:hover {
color:#FF7031;
}

.profile .profile-tabs ul.tabs li.selected a.tab-link{
color:#0066CC;}

.profile .profile-tabs ul.tabs li.selected a.tab-link:hover{
color:#FF7031;}

.profile .profile-tabs ul.tabs li a.tab-link{
color:#0066cc;}

.profile .profile-tabs ul.tabs li a.tab-link:hover{
color:#FF7031;
background-color:#ffffff;}

#commentPostBtn {
background:#2680E9 none repeat scroll 0 0;
border-color:#66ACFF #094FA1 #094FA1 #66ACFF;
border-width:1px;
color:#FFFFFF;
height:23px;
padding:0 1.5em;
}

.profile .profile-panel {
background:transparent none repeat scroll 0 0;
}

.right-column-holder{
border:1px solid #89D5EF;
background:#ffffff;
}

.profile .right-column-holder{
width:960px;
}

.profile .profile-tabs ul.tabs li.selected {
background:#FFFFFF none repeat scroll 0 0;
border-top:1px #89D5EF solid ;
border-bottom:1px #FFFFFF solid ;
border-left:1px #89D5EF solid ;
border-right:1px #89D5EF solid ;
margin-top:-2px;
}

.profile .profile-tabs ul.tabs li {
background-color:#89D5EF;
}

.profile .right-column .box-holder .box{
border-color:#cccccc;}

#cmtbody{
border-color:#cccccc;}

.box{
border-bottom:none;}

#userInfo .menu-bar{
background:transparent;}

.profile .extra-column .box-holder{
border:none;}

.profile .left-column .box-holder{
border:none;}

.left-column .box .box-header{
background:transparent url(http://static.fanfou.com/img/secthd.gif) no-repeat scroll 0 0;}

.extra-column .box .box-header{
background:transparent url(http://static.fanfou.com/img/secthd.gif) no-repeat scroll 0 0;}

.profile .guide-find-friend {border:none;}

#opi{
padding-top:20px;
background:transparent url(http://pic.yupoo.com/wcybloger/51863635abdb/0lbcqkbi.jpg) no-repeat scroll 85% 20px;}

.profile .profile-tabs .profile-tabs-holder h2{
width:500px;}

Tag：模板校内网饭否话唠

阅读全文 | 评论5 | 编辑 | 分享 0 | 分享到饭否 | 分享到人人网
博客加了一个顶部导航条 - [网页技术]

王传业发表于2008-09-14 09:30:00 分类: 网页技术

加了一个横向导航，仅通过CSS实现了下拉菜单样式，没有用JS。IE6,IE7,Firefox,Opera,Chrome测试通过。Firefox,Opera,Chrome下用了position:fixed，效果不错，可惜IE7对这个属性支持不好，IE6就压根儿不支持，用JS实现有点儿麻烦，IE下暂时就static吧。
xhtml代码如下：
<div id="topnav">
   <ul id="wcynav">
      <li><a href="http://wchuanye.blogbus.com/">首页</a></li>
      <li><a href="http://xiaonei.com/chuanye" target="_blank">校内</a></li>
      <li><a href="http://fanfou.com/chuanye" target="_blank">饭否</a></li>
      <li><a href="http://wchuanye.blogbus.com/c1919102/">校内模板</a></li>
      <li><a href="http://wchuanye.blogbus.com/c2037622/">大巴模板</a></li>
      <li><a href="http://wchuanye.blogbus.com/logs/28281268.html">定做模板</a></li>
      <li id="dropmenu">
         <a href="#">其他分类</a>
       <table><tr><td>
             <ul id="fenlei">
                  <li><a href="http://wchuanye.blogbus.com/c1921190/">北航生活</a></li>
                  <li><a href="http://wchuanye.blogbus.com/c1926440/">校内相关</a></li>
                  <li><a href="http://wchuanye.blogbus.com/c1943608/">网页技术</a></li>
                  <li><a href="http://wchuanye.blogbus.com/c1921456/">软件应用</a></li>
                  <li><a href="http://wchuanye.blogbus.com/c1919145/">杂七杂八</a></li>
                  <li><a href="http://wchuanye.blogbus.com/c1920595/">娱乐休闲</a></li>
             </ul>
         </td></tr></table>
         
    </li>
   </ul>
</div>
其中dropmenu中的ul又套了一个table是为了IE6下正常显示，否则IE6下这些链接都不可见。具体原因还不清楚。由于IE6不支持#dorpmenu:hover #fenlei这样的选择符，所以利用IE的if条件注释，使得IE6中ul#fenlei包含在“其他分类”这个链接中，便于后面编写针对IE6的style。(IE6仅支持 a:hover #fenlei这样的)
CSS代码如下：
#topnav{
border-top:8px solid #000000;
width:100%;
background:transparent url(http://wchuanye.blogbus.com/files/12213317900.gif) repeat-x top;
position:fixed;*position:static;/*IE hack 非IE为fixed IE为static*/
top:0pt;
z-index:100;}

#wcynav{
float:none;
height:35px;
margin:0 auto;/*居中显示*/
padding:0 0 40px;
width:560px;
}

#wcynav li{
display:inline;
float:left;
height:35px;
line-height:35px;
text-align:center;
width:80px;
background:transparent url(http://wchuanye.blogbus.com/files/12213317901.gif) no-repeat right -1px;}

#wcynav li a{
display:block;
height:35px;
line-height:35px;
width:80px;
font-size:13px;
color:#666666;}

#wcynav li a:hover{
text-decoration:none;
background:transparent url(http://wchuanye.blogbus.com/files/12213317902.gif) repeat-x center top;
color:#000000;}

#wcynav #dropmenu{
position:relative;/*下拉菜单的父级容器*/
width:80px;
height:35px;}

#fenlei{
display:none;/*下拉菜单隐藏*/}

#wcynav #dropmenu:hover #fenlei{
display:block;/*利用hover改变下拉菜单的显示属性*/
position:absolute;/*父级容器为relative并定义了有效的高宽值这里的absolute就变为相对父级容器的绝对定位*/
top:35px;
left:-150px;
width:360px;}
/* 以下为下拉菜单的样式定义 */
#wcynav #dropmenu:hover #fenlei li{
display:inline;
float:left;
width:60px;
height:35px;
line-height:35px;}

#wcynav #dropmenu:hover #fenlei li a{
font-size:12px;
width:60px;
display:block;
height:35px;
line-height:35px;
background:#eeeeee;}

#wcynav #dropmenu:hover #fenlei li a:hover{
background:#aaaaaa;
color:#ffffff;}

/* for ie6 */
* html #wcynav #dropmenu a:hover #fenlei{/*IE6不支持#dorpmenu:hover #fenlei这样的选择符*/
display:block;
position:absolute;
top:35px;
left:-150px;
width:360px;}

* html #wcynav #dropmenu a:hover #fenlei li{
display:inline;
float:left;
width:60px;
height:35px;
line-height:35px;}

* html #wcynav #dropmenu a:hover #fenlei li a{
font-size:12px;
width:60px;
display:block;
height:35px;
line-height:35px;
background:#eeeeee;}

* html #wcynav #dropmenu a:hover #fenlei li a:hover{
background:#aaaaaa;
color:#ffffff;}

Tag：导航博客 css

阅读全文 | 评论6 | 编辑 | 分享 0 | 分享到饭否 | 分享到人人网
一首歌一部动画

王传业发表于2008-09-13 22:17:23 分类: 网页技术

>下载此歌曲< 貌似只能用迅雷下载
很经典的一部动画的主题曲。你知道吗 ^_^
魔神坛斗士！（又名：铠传）

Tag：动画音乐

阅读全文 | 评论3 | 编辑 | 分享 0 | 分享到饭否 | 分享到人人网
手机里的乱糟糟 - [流水账]

王传业发表于2008-09-13 00:49:55 分类: 流水账

nokia3110c的拍照效果好像不太好，不过还能凑合着看，我还是挺喜欢用手机乱拍一些东西的。其实，主要是为了测试yupoo的外链。
yupoo速度还行，可是竟然给照片加广告，不爽～

Tag：手机拍照北航 yupoo

阅读全文 | 评论2 | 编辑 | 分享 0 | 分享到饭否 | 分享到人人网
今天教师节 - [杂七杂八]

王传业发表于2008-09-10 00:31:38 分类: 杂七杂八

祝天下所有的老师们节日快乐！

大恩不言谢。

Tag：教师节

阅读全文 | 评论1 | 编辑 | 分享 0 | 分享到饭否 | 分享到人人网