网站首页 | 公司简介 | 业务范围 | 案例展示 | 新闻资讯 | 留言反馈 | 联系我们 | 程序出售
 
 
★新闻资讯★
技术支持
行业动态
休闲娱乐
免费下载
帮助中心
解决方案
本站公告
★服务热线★
029-86122132
013572147337
013629241981
4008-168-029
★在线咨询★
【广告设计】
【网站建设】
【网站咨询】
【推广咨询】
【优化咨询】
【维护咨询】
【安全咨询】
【空间咨询】
【域名咨询】
【技术支持】
 
 >> 新闻资讯 >> 查看新闻信息  
网站开发中10个有用的CSS/JS (四)由新疆网站建设公司独家提供
【信息涉及侵权、违法、错误,请来电 029-86122132 013572147337 013629241981 4008-168-029】
 
4 产品突出 
    大本营,一个37signals的产品,选择突出其最流行的产品计划,以提请人们注意,并希望能创造更多的访问者转换为客户。计划的特色产品也有增加奖金的JavaScript工具提示提供更详细的突出产品功能。请注意,每一个环节都有自己的提示出现在右边时,文本链接是徘徊。 



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

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

  

  

  



HTML (for the highlighted plan) 

view plaincopy to clipboardprint? 
"tall">     
        1>"https://signup.projectpath.com/signup/Plus">Plus1>     
        2>$49/month2>     
    
        3>Most popular plan3>     
        "highlight" style="margin-top: 12px;">     
            
    
            "#" onclick="return false" class="hover_target" hover_container="users_bubble">35 projects     
            "hover_container" id="users_bubble">     
              "bubble hover_target">"wrapper">"content">"inner">     
                "arrow"> 
    
    
                2>What are active projects?2>     
                  
..Content for the tool tip... 

    
                
    
                 
    
               
            ...code repeats for all product bullet points...     
          
    
         
         Plus 
         $49/month 

         Most popular plan 
           35 projects    What are active projects? ..Content for the tool tip...  ...code repeats for all product bullet points... 

          
        
CSS 

view plaincopy to clipboardprint? 
body.signup4 div.tall {     
    background-color:#FFFFFF;     
    border:3px solid #3671A1;     
    float:left;     
    font-family:helvetica,arial,sans-serif;     
    height:310px;     
    padding:8px 10px 10px;     
    text-align:center;     
    width:220px;     
}     
body.signup4 div.tall h1, body.signup4 div.tall h1 a {     
    color:#000000;     
    font-size:42px;     
    line-height:1em;     
    margin:0;     
    padding:0;     
    text-decoration:none;     
}     
body.signup4 div.tall h2 {     
    color:#000000;     
    font-size:24px;     
    font-weight:normal;     
    margin:0 0 2px;     
    padding:0;     
}     
body.signup4 div.tall h3 {     
    border-bottom:1px solid #CCCCCC;     
    color:#4582B5;     
    font-size:16px;     
    font-weight:bold;     
    margin:0;     
    padding:0 0 4px    
    text-transform:uppercase;     
}     
body.signup4 a.hover_target {     
    border-bottom:1px dotted #888888;     
    color:#64503F;     
    margin-left:6px;     
    text-decoration:none;     
}     
body.signup4 div.tall li strong, body.signup4 div.short li strong {     
    color:#C33700;     
}  


 
 
 
信息分类:技术支持  信息来源:新疆网站建设 新疆网站建设 新疆伍佰网络有限公司  添加时间:2011-7-12 17:00:05  浏览次数:
上一组:Oracle促使Linux数据更加稳定之二由新疆网 下一组:网站开发中10个有用的CSS/JS (三) 由新疆
版权所有© 西安四方科技有限公司 违者必究  客服热线:029-86122132 013572147337 013629241981 4008-168-029  传真号码:029-86122132
联系地址:陕西省西安市未央区龙翔御苑50101室 710016  E-mail:500web@21cn.com  中国工业和信息化部ICP备案号:陕ICP备06001415号
本站由四方科技(网站建设 软件开发 网站推广 域名注册 网站空间 广告与多媒体制作)提供技术支持