Archive for the '前端开发' Category

利用Javascript实现翻滚新闻文字效果

Published on August 9, 2011 23:33 in 前端开发. Closed

有很多的网站都有一行字通过翻滚更新文字内容和链接的区域，这样的效果使页面在有效的空间内变得更加动感。
实现方法如下，其中Javascript部分：

  1. <script>   
  2. function rolling(id,w,n){   
  3.     var box=document.getElementById(id),can=true,w=w||1500,fq=fq||10,n=n==-1?-1:1;   
  4.     box.innerHTML+=box.innerHTML;   
  5.     box.onmouseover=function(){can=false};   
  6.     box.onmouseout=function(){can=true};   
  7.     var max=parseInt(box.scrollHeight/2);   
  8.     new function (){   
  9.         var stop=box.scrollTop%18==0&&!can;   
  10.         if(!stop){   
  11.             var set=n>0?[max,0]:[0,max];   
  12.             box.scrollTop==set[0]?box.scrollTop=set[1]:box.scrollTop+=n;   
  13.         };   
  14.         setTimeout(arguments.callee,box.scrollTop%18?fq:w);   
  15.     };   
  16. };   
  17. rolling(‘div-news’,1500,-1);   
  18. </script>   

CSS样式定义，其中Arrowb为前面的小指针，可以自己设置图片改变。

  1. .shell{   
  2.     background:url(http://clyee.com/img/arrowb.gif) no-repeat 4px 5px;   
  3.     border:0px solid #aaa;    
  4.     width:300px;   
  5.     padding:3px 2px 2px 25px;    
  6. }   
  7. .core{   
  8.     height:18px;   
  9.     overflow:hidden;   
  10.     font-size:12px;   
  11. }  

最后，HTML部分：

  1. 1.<div class=“shell”>     
  2.  2.    <div id=“div-news” class=“core”>     
  3.  3.      <a href=“#″ target=“_blank”>测试翻滚条</a><br />     
  4.  4.      <a href=“#” rel=“nofollow” target=“_blank”>测试翻滚条</a><br />     
  5.  5.    </div>       
  6.  6.</div>     

纯CSS实现Dropdown Menu(导航子菜单)

Published on August 4, 2011 21:56 in 前端开发. Closed

1. CSS部分代码

  1. *      
  2.         {      
  3.             margin: 0;      
  4.             padding: 0;      
  5.         }      
  6.         .dropDownMenu      
  7.         {      
  8.             font-size: 12px;      
  9.             position: relative;      
  10.             z-index: 100;      
  11.         }      
  12.         .dropDownMenu ul      
  13.         {      
  14.             list-style: none;      
  15.         }      
  16.         .dropDownMenu li      
  17.         {      
  18.     float: left;      
  19.     position: relative;      
  20.     font-family: Verdana, Geneva, sans-serif;      
  21.         }      
  22.         .dropDownMenu ul ul      
  23.         {      
  24.             visibility: hidden;      
  25.             position: absolute;      
  26.             left: 3px;      
  27.             top: 23px;      
  28.         }      
  29.         .dropDownMenu table      
  30.         {      
  31.             position: absolute;      
  32.             top: 0;      
  33.             left: 0;      
  34.         }      
  35.         .dropDownMenu ul li:hover ul, .dropDownMenu ul a:hover ul      
  36.         {      
  37.             visibility: visible;      
  38.         }      
  39.         .dropDownMenu a      
  40.         {      
  41.             display: block;      
  42.             border: 1px solid #aaa;      
  43.             background: red;      
  44.             padding: 2px 10px;      
  45.             margin: 3px;      
  46.             color: #fff;      
  47.             text-decoration: none;      
  48.         }      
  49.         .dropDownMenu a:hover      
  50.         {      
  51.             background: #f2cdb0;      
  52.             color: #f00;      
  53.             border: 1px solid red;      
  54.         }      
  55.         .dropDownMenu ul ul      
  56.         {      
  57.         }      
  58.         .dropDownMenu ul ul li      
  59.         {      
  60.             clear: both;      
  61.             text-align: left;      
  62.             font-size: 12px;      
  63.         }      
  64.         .dropDownMenu ul ul li a      
  65.         {      
  66.             display: block;      
  67.             width: 100px;      
  68.             height: 13px;      
  69.             margin: 0;      
  70.             border: 0;      
  71.             border-bottom: 1px solid red;      
  72.         }      
  73.         .dropDownMenu ul ul li a:hover      
  74.         {      
  75.             border: 0;      
  76.             background: #f2cdb0;      
  77.             border-bottom: 1px solid #fff;      
  78.         }  

2. HTML部分代码

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />  
  5.     <title>纯CSS实现Dropdown Menu</title>  
  6.     <link rel=“stylesheet” type=“text/css” media=“all” href=“style.css” />  
  7.   
  8. </head>  
  9. <body>  
  10.     <div class=“dropDownMenu”>  
  11.         <ul>  
  12.             <li><a href=“”>CSS Dropdown Menu Test   
  13.                 <!–[if IE 7]><!–>  
  14.             </a>  
  15.                 <!–<![endif]–>  
  16.                 <!–[if lte IE 6]><table><tr><td><![endif]–>  
  17.               <ul>  
  18.                     <li><a href=“#”>Standard</a></li>  
  19.                     <li><a href=“#”>Teach</a></li>  
  20.                     <li><a href=“#”>Tech.</a></li>  
  21.                     <li><a href=“#”>Question</a></li>  
  22.                     <li><a href=“#”>CSS Menu</a></li>  
  23.                     <li><a href=“#”>Dashboard</a></li>  
  24.                 </ul>  
  25.                 <!–[if lte IE 6]></td></tr></table></a><![endif]–>  
  26.             </li>  
  27.         </ul>  
  28.     </div>  
  29.     <br />  
  30.     <br />  
  31. </body>  
  32. </html>  
Tags: CSS.

《下一站，用户体验》总结

Published on August 3, 2011 16:49 in 前端开发. 3 条留言

今天到书城看了这本书，作者杨艾祥。是写改善用户体验的，全书其实啰嗦来啰嗦去主要讲的就是简化代码，这样有利于用户体验（加载速度、干净）而且有利于SEO（蜘蛛爬行）。

有几点我记录下来了，需要的看看。

有关为什么大多数网站（网易、腾讯等）都使用960的宽度（Width）呢，其实这有两点，一是以主流屏幕1024的显示屏中剪掉滚动条18px，两边留空25px，1024-18-（25*2）=956，取整960px，再者大部分设计师都喜爱使用Apple的电脑，在Apple的Firefox打开网站时默认宽度既为960px。

国际通用标准网站广告尺寸：

尺寸规格px

通用描述

120*120

适用于产品和新闻照片展示

120*60

标准LOGO大小

120*90

应用于产品展示和大型LOGO

125*125

表现照片效果和图片广告

234*60

用于框架或左右形式主页广告链接

392*72

展示较多图片展示的广告条，页眉或页脚

468*60

广泛的广告条尺寸，页眉或者页脚

88*31

网站链接，网站小型LOGO

根据作者的多年的网页设计从事，总结出来内容区宽度为650px最为合适。网站字体尽量大，有利于浏览文章。

关于友情链接：

  1. 能文字尽量用文字链接，尽量不要图片链接。（这点相信大家也知道为什么，主要载入速度问题）
  2. 尽量把友情链接整合成一个单独的页面，首页有链接到这个页面的链接即可。
  3. 如果是图片的链接的话要下载到本地然后再放置在页面上，这样加载速度才会同步。
Tags: 用户体验.

判断WordPress的页面进行样式调整

Published on August 1, 2011 16:45 in 前端开发. Closed

有时候需要在Page页面显示的内容和某一篇文章的显示的内容不同，这样就需要利用判断语句，这些判断语句是本身Wordpress集成的。这里记录关于如何在不同的页面通过调用判断语句，显示不同的页面。其实无非是将Wordpress的内部函数调用出来，用PHP判断语句进行判断，再根据不同的页面显示不同的样式。比如下图：

在系统判断该页为“公告”的文章目录的时候，使用了白色为底色的样式。这里先写些Wordpress的判断语句，其中包括页面、分类、文章的判断：上篇文章：WordPress页面、文章、分类等的条件判断的标签集合。

下面是这个样式的判断和调用样式语句片段：

  1. <ul class=“menu”>  
  2.     <li class=“<?php if ( is_front_page() && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab”>  
  3.         <a href=“/blog/” title=“<?php echo esc_attr( get_option(‘k2blogornoblog’) ); ?>”>主页</a></li>    
  4.           <li class=“<?php if ( is_category(‘tech-article’) && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab”>  
  5.                    <a href=“/blog/topics/tech-article/”>技术文章</a></li>  
  6.           <li class=“<?php if ( is_category(‘movie’) && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab”>             
  7.                    <a href=“/blog/topics/movie/”>电影文章</a></li>  
  8.           <li class=“<?php if ( is_category(‘psychology’) && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab”>             
  9.                    <a href=“/blog/topics/psychology/”>心理学文章</a></li>  
  10.           <li class=“<?php if ( is_category(‘diary’) && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab”>             
  11.                    <a href=“/blog/topics/diary/”>日记</a></li>    
  12.           <li class=“<?php if ( is_category(‘sitepost’) && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?> blogtab”>             
  13.                    <a href=“/blog/topics/sitepost/”>公告</a></li>  
  14.  </ul><!– .menu –>  

其中：

  1. <?php if ( is_category(‘psychology’) && !is_paged() ): ?>current_page_item<?php else: ?>page_item<?php endif; ?>  

上面的语句即是判断是否有一个不是Page类型的、名为Psychology的分类目录，如果是的话即调用Current_page_item样式。按此方法更改即可。

共 3 页, 当前第 1 页 123