慧云科技 > 首页 > 文章详情

网站开发中10个有用的CSS/JS （四）

本文来源：网站建设-网站制作|网络营销专家慧云科技-

抢滩登陆

2009-7-8 18:03:48

4 产品突出
    大本营，一个37signals的产品，选择突出其最流行的产品计划，以提请人们注意，并希望能创造更多的访问者转换为客户。计划的特色产品也有增加奖金的JavaScript工具提示提供更详细的突出产品功能。请注意，每一个环节都有自己的提示出现在右边时，文本链接是徘徊。

具体方法
    该小组在37signals选择使用Prototype.js和CSS实现的提示作用，而依靠单纯的CSS突出特色产品的计划。每个计划居住在自己的div标签，以一流的“短”的突出计划取代短期类，一类“高大” 。

    该divs左边和右边的突出计划有更多的CSS类添加到他们提供的阴影在他们的手左，右两侧，使外观的精选计划增加了一页。的JavaScript ，书面使用prototype.js ，接听为每一个产品功能将上空盘旋。当一个功能上空盘旋，该工具提示都隐藏，然后在适当的工具提示显示。

 

 

 

HTML (for the highlighted plan)

view plaincopy to clipboardprint?
  1. "tall">   
  2.         1>"https://signup.projectpath.com/signup/Plus">Plus1>   
  3.         2>$49/month2>   
  4.   
  5.         3>Most popular plan3>   
  6.         "highlight" style="margin-top: 12px;">   
  7.           
  8.   
  9.             "#" onclick="return false" class="hover_target" hover_container="users_bubble">35 projects   
  10.             "hover_container" id="users_bubble">   
  11.               "bubble hover_target">"wrapper">"content">"inner">   
  12.                 "arrow">
  
  •   
  •                 2>What are active projects?2>   
  •                 

    ..Content for the tool tip...

      
  •               
      
  •                
  •   
  •              
  •             ...code repeats for all product bullet points...   
  •         
        
    •   
    •         "https://signup.projectpath.com/signup/Plus" onClick="return ConversionCount()">"/images/btn_signupchart_large.png" width="113" height="45" alt="Sign Up" />   
    •       
        

        CSS

        view plaincopy to clipboardprint?
        1. body.signup4 div.tall {   
        2.     background-color:#FFFFFF;   
        3.     border:3px solid #3671A1;   
        4.     float:left;   
        5.     font-family:helvetica,arial,sans-serif;   
        6.     height:310px;   
        7.     padding:8px 10px 10px;   
        8.     text-align:center;   
        9.     width:220px;   
        10. }   
        11. body.signup4 div.tall h1, body.signup4 div.tall h1 a {   
        12.     color:#000000;   
        13.     font-size:42px;   
        14.     line-height:1em;   
        15.     margin:0;   
        16.     padding:0;   
        17.     text-decoration:none;   
        18. }   
        19. body.signup4 div.tall h2 {   
        20.     color:#000000;   
        21.     font-size:24px;   
        22.     font-weight:normal;   
        23.     margin:0 0 2px;   
        24.     padding:0;   
        25. }   
        26. body.signup4 div.tall h3 {   
        27.     border-bottom:1px solid #CCCCCC;   
        28.     color:#4582B5;   
        29.     font-size:16px;   
        30.     font-weight:bold;   
        31.     margin:0;   
        32.     padding:0 0 4px  
        33.     text-transform:uppercase;   
        34. }   
        35. body.signup4 a.hover_target {   
        36.     border-bottom:1px dotted #888888;   
        37.     color:#64503F;   
        38.     margin-left:6px;   
        39.     text-decoration:none;   
        40. }   
        41. body.signup4 div.tall li strong, body.signup4 div.short li strong {   
        42.     color:#C33700;   
        43. }  

        本文国际来源


        1. 在线客服
        建站咨询网站建设相关信息咨询
        分类导航
        专业研究 开源文化 业内新闻 网站建设 社会热点 源码解析 她们的秘密 IT研究 网站建设教程
        更多资料
        网站建设前期META规划 SEO统计的数字局限 百度统计工具二个模块分析 网站死链和错误链接原因 页面响应时间长的原因 SEO黑客如何攻击网站 网站建设优化的几大技巧 长尾词优化战略是流量的来源 新时代靠搜索引擎营销 google优化中的PR意义 网站META中关键词不能随便动 如何论坛推广营销 针对企业站页面权重如何分配的重... 页面中列表页的优化重要性 通过站群优化主站排名 SEO帮助网站如何迅速提升战力 网站内链优化需要注意哪些事项 PPC和SEO优化的优点和缺点 谷歌优化与网站本身的关系 免费的在线搜索引擎优化工具我们... 搜索引擎工程的今天,如何确保搜... SEO优化关键所在之：站内站外 SEO中心思想多元化 利用社交网站做SEO推广 正确的Google优化技术 如何对长尾词布局 团购网站最常见的推广方法
        RSS订阅| 关于我们| 网站地图| 加入项目| 法律条款| 友情链接| Firefox| Sitemap| 网站统计

        全国免费咨询热线：400-600-6495 优惠活动咨询电话：021-62278496 Email:ajaxcms@yahoo.cn

        上海慧云信息科技有限公司版权所有 2006-2009 沪ICP备09038165号

        本站关键词：网站建设 高品质网站建设