带动画效果的jQuery手风琴特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是带动画效果的jQuery手风琴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>带动画效果的jQuery手风琴</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="site-content services">
  <div class="wrapper">
    <ul class="services-list">
      <li>
        <h2> <a href="#" title="">CSS3+PIE圆角插件实现超酷的导航菜单和按钮</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此作品是一款可以帮助网友们美化菜单和按钮，跟丑陋的、传统的菜单和按钮说88，默认整理了4种主题颜色，网友们可以自己无限添加哦，主要用了CSS3+PIE圆角插件实现，这样就可以兼容所有浏览器啦，菜单和按钮的长度都是自适应。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Monitoreo" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title=""><strong>带动画全屏图文切换+键盘控制的Jquery焦点图</strong></a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此Jquery特效是一款效果非常酷的图片轮播，它包括了以下功能<br />1、带动画效果<br />2、全屏轮播<br />3、轮播内容由图文切换<br />4、键盘左右方向键控制左右滚动<br />5、背景跟随切换<br />6、自动播放。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Alarmas y c&aacute;maras" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">网友康松分享仿Win8布局+lightbox弹出层插件显示页面</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此作品是仿Win8布局+lightbox弹出层Jquery插件实现的，它把整个网站的功能都在这个布局里面展示，点击的时候以弹出层的方式来显示页面，这样就可以减少了繁琐的跳转页面操作，提高了用户体验，是一种最近比较流行的网页布局，网友们好好利用哦。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Protecci&oacute;n perimetral" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">一款带3D效果带略缩图的幻灯片Jquery插件</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此Jquery插件一款带3D效果带略缩图的幻灯片效果，功能非常强大，默认带有3种皮肤，用法也很简单，可以灵活设置6个参数，1、skin：皮肤目录设置，包括3个（cool，crazy，simple）2、numberOfThumbsPerScreen：略缩图的滚动个数，默认为7个。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Consorcios" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">网友Kevin分享原创图片滚动Jquery插件kevinScroll</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>首先非常感谢网友Kevin的无私分享，此Jquery插件实现图片滚动功能，这是他写的一款原创作品，插件命名为kevinScroll，现在分享的是V1.0版本，还在不断完善中，插件功能非常强大，可以灵活设置7个参数，页面上可以多次调用都不起冲突。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Protecci&oacute;n de personas" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">一款国外的四图轮播幻灯片Jquery插件</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此Jquery插件是一款国外的四图轮播幻灯片，功能不是很复杂，非常实用，图片使用跟平时的焦点图的用法有点不同，它的图片不放到主体里面，通通都作为背景图片使用，主体就用文字来描述，包含了图片播放、图片滑动、图片左右轮播。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Auditor&iacute;as" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">原生js实现3维图片里外转动放大缩小特效</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此js特效实现3维图片里外转动放大缩小功能，是一款效果非常酷的作品，作为图片轮播特效来讲，它算比较新有创意的啦，包含了图片滚动、图片放大、图片缩小、鼠标悬浮事件等功能。。。</p>
            </div>
            <div class="service-info-image"> <img src="img/services/service-07.jpg" alt="Desarrollos a medida" /> </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

JS代码(scripts.js):

$(function(){
	// fade effect when changing sections$('a[data-fade]').click(function(e){
	$('<div id="loading-mask" class="hidden"></div>').prependTo('body').fadeIn(function(){
	return true;
}
);
}
)// selectmenuif ($('.select-wrapper').size () > 0){
	$('.select-wrapper:not(.wide) select').selectmenu({
	transferClasses:true,menuWidth:154}
);
	$('.select-wrapper.wide select').selectmenu({
	transferClasses:true,menuWidth:214}
);
}
// nav effect$('.site-nav li:not(.active)').hover(function(){
	$(this).children('span').stop(true,true).fadeIn();
	$(this).children('a').stop(true,true).animate({
	color:'#fff'}
);
}
,function(){
	$(this).children('span').stop(true,true).fadeOut();
	$(this).children('a').stop(true,true).animate({
	color:'#1ba7da'}
);
}
);
	// homeif ($('#home-slider').size() > 0){
	$('#home-slider').plusSlider({
	autoPlay:true,displayTime:4000,createPagination:false,keyboardNavigation:false,sliderType:'fader',pauseOnHover:false}
);
	$('<span></span>').appendTo('.plusSlider .arrow');
}
$('.jcarousel-prev,.plusSlider .arrow.prev').hover(function(){
	if($(this).attr('disabled') != 'disabled'){
	$(this).children().stop(true,true).animate({
	'left':-10}
);
}
}
,function(){
	$(this).children().stop(true,true).animate({
	'left':0}
);
}
);
	$('.jcarousel-next,.plusSlider .arrow.next').hover(function(){
	if($(this).attr('disabled') != 'disabled'){
	$(this).children().stop(true,true).animate({
	'left':10}
);
}
}
,function(){
	$(this).children().stop(true,true).animate({
	'left':0}
);
}
);
	// productsif ($('.products-category:not(.single)').size() > 0){
	$('.products-category').jcarousel({
	buttonNextHTML:'<a><span>Next</span></a>',buttonPrevHTML:'<a><span>Previous</span></a>',scroll:4}
);
	optionIndex = $('select.products-categories option:selected').index();
	$('.jcarousel-container:eq(' + optionIndex + ')').addClass('active');
	$('.jcarousel-container:not(.active)').hide();
	$('select.products-categories').change(function(){
	optionIndex = $(this).children(':selected').index();
	$('.jcarousel-container.active').fadeOut(function(){
	$(this).removeClass('active');
	$('.jcarousel-container:eq(' + optionIndex + ')').fadeIn(function(){
	$(this).addClass('active');
}
);
}
);
}
);
}
$('.products-item').mouseenter(function(){
	$item = $(this);
	$item.find('.product-image-hover').stop(true,true).fadeIn();
}
).mouseleave(function(){
	$item = $(this);
	$item.find('.product-image-hover').stop(true,true).fadeOut();
}
);
	$('.products-item').find('.product-info-icon,.product-image-hover').click(function(){
	$container = $(this).closest('.products-item');
	$icon = $container.find('.product-info-icon');
	if(!$icon.hasClass('active')){
	$icon.stop(true,true).animate({
	'bottom':62}
).addClass('active').animate({
	'bottom':24}
);
	if ($container.parent().hasClass('single')){
	contentHeight = 72;
}
else{
	contentHeight = 106;
}
$container.find('.product-info-wrapper').children('.product-info').stop(true,true).animate({
	'height':contentHeight}
);
}
else{
	if ($(this).hasClass('product-info-icon')){
	$icon.stop(true,true).animate({
	'bottom':62}
).removeClass('active').animate({
	'bottom':30}
);
	$container.find('.product-info-wrapper').children('.product-info').stop(true,true).animate({
	'height':8}
);
}
}
}
);
	$('.select-product').click(function(e){
	$product = $(this).closest('.products-item');
	//console.log($product);
	$.cookie('selected_category',$('.selectmenu.products-categories').val(),'/');
	$.cookie('selected_product',$product.data('product-id'),'/');
	//console.log($.cookie('selected_category'));
	//console.log($.cookie('selected_product'));
	//return false;
}
);
	// servicesif ($('.services-list').size() > 0){
	$('.services-list').accordion({
	autoHeight:false,create:function (event,ui){
	$('.services-list li:first h2 span').addClass('active');
}
,changestart:function (event,ui){
	ui.oldHeader.children('span').animate({
	'left':561}
,function (){
	$(this).removeClass('active').animate({
	'left':600}
);
}
);
	ui.newHeader.children('span').stop(true,true).animate({
	'left':561}
,function (){
	$(this).addClass('active').animate({
	'left':600}
);
	//$(this).stop(true,true).animate({
	'left':600}
);
}
);
	return true;
}
,change:function (event,ui){
	return true;
}
}
);
}
// contactif ($('#map').size() > 0){
	mapInit();
}
$('.contact-form .select-wrapper.product,.contact-form .products-category,.contact-form .products-item').hide();
	toggleProductCategory(true);
	$('select.products-category-selector').change(function(){
	toggleProductCategory(false);
}
);
	$('select.products-item-selector').change(function(){
	toggleProductItem();
}
);
	$('#loading-mask').fadeOut('slow',function(){
	$(this).remove();
}
);
}
);
	function toggleProductCategory (onload){
	// tomo el indice de la categoria seleccionadacategorySelectedIndex = $('select.products-category-selector:selected').index();
	$('.select-wrapper.product.active').hide().removeClass('active');
	$('.select-wrapper.product:eq(' + categorySelectedIndex + ')').show().addClass('active');
	$('.products-category.active').fadeOut().removeClass('active').children('li.active').fadeOut().removeClass('active');
	$('.products-category:eq(' + (categorySelectedIndex - 1) + ')').fadeIn(function(){
	$(this).addClass('active');
	toggleProductItem();
}
);
	return true;
}
function toggleProductItem (onload){
	categorySelectedIndex = $('.products-category-selector:selected').index();
	productSelectedIndex = $('.select-wrapper.product.active select:selected').index();
	if (productSelectedIndex > 0){
	$('.products-category.active .products-item.active').fadeOut().removeClass('active');
	$('.products-category.active .products-item:eq(' + (productSelectedIndex - 1) + ')').fadeIn().addClass('active');
}
}
function mapInit (){
	var latlng = new google.maps.LatLng(-34.462737,-58.524939);
	var myOptions ={
	zoom:16,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP}
;
	var map = new google.maps.Map(document.getElementById("map"),myOptions);
	var image = 'img/map_marker.png';
	var beachMarker = new google.maps.Marker({
	position:latlng,map:map,icon:image}
);
}

CSS代码(styles.css):

/*html5doctor.com Reset Stylesheetv1.6.1Last Updated:2010-09-17Author:Richard Clark - http://richclarkdesign.comTwitter:@rich_clark*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
/* change colours to suit your needs */
ins{background-color:#ff9;color:#000;text-decoration:none;}
/* change colours to suit your needs */
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
/* change border colour to suit your needs */
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
body{background:url('../img/main_bg.jpg') no-repeat top center #b3b3b3;font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:12px;}
#loading-mask{background:#fff;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99999;}
#loading-mask.hidden{display:none;}
.wrapper{margin:auto;position:relative;width:960px;}
/*=== Header ================================================================*/
.site-header{height:159px;margin:auto;overflow:hidden;width:960px;}
.site-logo{float:left;margin-top:6px;}
.site-nav{float:right;font-family:'Ubuntu',Arial,Helvetica,sans-serif;font-size:15px;margin-top:42px;overflow:hidden;text-transform:uppercase;}
.site-nav li{float:left;margin-right:11px;position:relative;width:78px;}
.site-nav li.services{width:99px;}
.site-nav li.products{width:124px;}
.site-nav li.contact{width:101px;}
.site-nav a{color:#1ba7da;display:block;padding-bottom:8px;padding-top:12px;position:relative;text-align:center;text-decoration:none;z-index:200;}
.site-nav .hover{margin-top:10px;}
.site-nav .active a,.site-nav .hover a{color:#fff;}
.site-nav span{background:url('../img/nav_sprite.png') no-repeat 0 0 transparent;display:none;height:35px;left:0;position:absolute;top:0;width:100%;z-index:100;}
.site-nav .active span{display:block;}
.site-nav .home span{background-position:0 -43px;}
.site-nav .home.active span{background-position:0 0;}
.site-nav .services span{background-position:-91px -43px;}
.site-nav .services.active span{background-position:-91px 0;}
.site-nav .products span{background-position:-203px -43px;}
.site-nav .products.active span{background-position:-203px 0;}
.site-nav .contact span{background-position:-340px -43px;}
.site-nav .contact.active span{background-position:-340px 0;}
/* === Content Bottom =======================================================*/
.site-content-bottom{background:url('../img/bottom_info_bg.png') no-repeat center top transparent;height:301px;margin-top:-84px;position:relative;z-index:300;}
body.home .site-content-bottom{margin-top:-116px;}
.clients-block{float:left;margin-left:10px;margin-top:128px;}
.clients-block h1{color:#fff;font-family:'Ubuntu',Arial,Helvetica,sans-serif;font-size:15px;text-transform:uppercase;}
.clients-list{list-style:none;margin-top:20px;}
.clients-list li{float:left;margin-right:10px;}
.promo-block{background:url('../img/promo_bg.png') no-repeat bottom left transparent;float:left;height:201px;margin-left:10px;margin-top:54px;padding-left:34px;position:relative;width:391px;}
.promo-block h1{color:#313131;font-family:'Ubuntu',Arial,Helvetica,sans-serif;font-size:15px;margin-top:74px;text-transform:uppercase;}
.promo-block p{color:#c5f1ff;font-size:12px;margin:8px 0;width:248px;}
.promo-block p.important{color:#fff;font-size:11px;margin-top:0;}
.promo-block a{color:#fff;font-weight:700;text-decoration:none;}
.promo-block img{position:absolute;right:-14px;top:0;}
/*=== Content ===============================================================*/
.content-title{color:#fff;font-family:'Ubuntu',Tahoma,Arial,Helvetica,sans-serif;font-size:34px;left:550px;position:absolute;top:30px;}
.select-wrapper{background:url('../img/select_bg.png') no-repeat 0 0 transparent;float:left;height:69px;width:226px;}
select{width:198px;z-index:999;}
.select-wrapper.wide{background:url('../img/select_bg_wide.png');width:290px;}
.select-wrapper.wide select{width:262px;}
/*=== Home ==================================================================*/
body.home .site-header{position:relative;z-index:200;}
body.home .site-content{margin-top:-63px;position:relative;z-index:100;}
.plusSlider{height:530px;margin:auto;overflow:hidden;position:relative;width:1185px;}
#home-slider{left:0;height:530px;position:relative;width:1185px;z-index:100;}
#home-slider .child{display:none;height:530px;left:0;position:absolute;top:0;width:1185px;}
#home-slider h2{color:#fff;font-family:'Ubuntu',Tahoma,Arial,Helvetica,sans-serif;font-size:34px;}
#home-slider h3{color:#fff;font-family:'Ubuntu',Tahoma,Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;}
#home-slider h4{color:#2c2c2c;font-family:'Ubuntu',Tahoma,Arial,Helvetica,sans-serif;font-size:15px;margin-bottom:2px;text-transform:uppercase;}
#home-slider h4 span{color:#10b0e6;}
#home-slider p{color:#696969;line-height:16px;}
#home-slider p a{color:#07a3d7;font-weight:700;text-decoration:none;}
#home-slider p a span{color:#474747;}
#home-slider .slider-item-header,#home-slider .slider-item-content{position:absolute;z-index:200;}
#home-slider .slider-item-header{left:200px;padding-top:35px;top:162px;}
#home-slider .slider-item-content{left:280px;top:316px;width:330px;}
#home-slider .slider-item-image{left:0;position:absolute;top:0;z-index:100;}
.plusSlider.home-slider .arrow{position:absolute;top:0;z-index:200;}
.plusSlider.home-slider .arrow.prev{left:110px;}
.plusSlider.home-slider .arrow.next{right:110px;}
/*=== Products ==============================================================*/
.site-content.products .wrapper{background:url('../img/content_bg_products.png') no-repeat top right transparent;height:579px;}
.products-filter{float:left;margin-left:16px;margin-top:16px;}
.products-filter p{color:#2b2b2b;float:left;line-height:69px;}
.jcarousel-container{float:left;clear:left;height:390px;margin-top:42px;width:960px;}
.jcarousel-clip{overflow:hidden;margin:0 72px;width:816px;}
.jcarousel-prev,.jcarousel-next,.plusSlider .arrow{cursor:pointer;height:70px;position:absolute;text-indent:-2000em;top:56px;width:54px;}
.jcarousel-prev-disabled,.jcarousel-next-disabled{opacity:0.5;cursor:default;}
.jcarousel-prev,.plusSlider .arrow.prev{left:0;}
.jcarousel-next,.plusSlider .arrow.next{height:92px;right:0;width:72px;}
.plusSlider .arrow.next{right:110px;top:162px;}
.jcarousel-prev span,.jcarousel-next span,.plusSlider .arrow span{background:url('../img/products_arrows.png') no-repeat 0 0 transparent;display:block;height:70px;left:0;position:absolute;top:0;width:54px;}
.jcarousel-prev{top:66px;}
.plusSlider .arrow.prev{top:174px;}
.jcarousel-prev span,.plusSlider .arrow.prev span{background-position:0 -10px;}
.jcarousel-next span,.plusSlider .arrow.next span{background-position:-55px 0;height:92px;width:72px;}
.products-category{clear:both;}
.product-choose .products-category{left:18px;position:absolute;top:288px;width:185px;}
.products-category li{background:url('../img/product_shadow.png') no-repeat bottom center transparent;margin-right:25px;padding-bottom:52px;position:relative;width:185px;}
.product-choose .products-category li{left:0;position:absolute;top:0;}
.product-image-wrapper{height:179px;}
.product-image-wrapper img{border:1px solid #fff;position:relative;z-index:400;}
.product-image-hover{background:url('../img/product_hover.png') no-repeat 0 0 transparent;cursor:pointer;display:none;height:179px;left:0;position:absolute;top:0;width:185px;z-index:500;}
.product-info-wrapper{background:url('../img/product_info_bg.png') no-repeat bottom center transparent;padding-bottom:11px;position:relative;z-index:400;}
.product-info{background:#06b7ea;height:8px;overflow:hidden;padding:10px;}
.product-info .product-name{color:#fff;margin-bottom:10px;text-transform:uppercase;}
.product-info p{color:#caf2ff;margin:6px 0;}
.product-info p strong{color:#fff;}
.product-info p a{color:#fff;}
.product-info-icon{background:url('../img/product_info_icon.png') no-repeat 0 0 transparent;cursor:pointer;bottom:30px;height:45px;position:absolute;right:7px;width:50px;z-index:300;}
.product-info-icon.active{background-position:-53px 0;}
/*=== Services ==============================================================*/
body.services{background-image:url('../img/services_bg.jpg');}
.site-content.services .wrapper{height:870px;}
.services-list{float:left;margin-top:118px;width:638px;}
.services-list li{list-style:none;margin-bottom:4px;}
.services-list h2{cursor:pointer;position:relative;}
.services-list h2 a{background-color:#ffffff;background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#ffffff));/* Saf4+,Chrome */
background-image:-webkit-linear-gradient(top,#ebebeb,#ffffff);/* Chrome 10+,Saf5.1+,iOS 5+ */
background-image:-moz-linear-gradient(top,#ebebeb,#ffffff);/* FF3.6 */
background-image:-ms-linear-gradient(top,#ebebeb,#ffffff);/* IE10 */
background-image:-o-linear-gradient(top,#ebebeb,#ffffff);/* Opera 11.10+ */
background-image:linear-gradient(top,#ebebeb,#ffffff);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ebebeb',EndColorStr='#ffffff');/* IE6-IE9 */
border-color:#fff;border-style:solid;border-width:1px 1px 0 1px;color:#10b0e6;display:block;line-height:66px;padding-left:20px;position:relative;text-decoration:none;width:578px;z-index:300;}
.services h2 span{background:url('../img/service_status.png') no-repeat 0 0 transparent;height:49px;left:600px;position:absolute;top:8px;width:39px;z-index:200;}
.services h2 span.active{background-position:0 -50px;}
.service-content{background:#fff;border-color:#fff;border-style:solid;border-width:0 1px 1px 1px;color:#939393;line-height:16px;overflow:hidden;width:598px;}
.service-info-text{float:left;margin-left:20px;text-align:justify;width:400px;}
.service-info-image{float:right;margin-right:20px;}
/*=== Contact ===============================================================*/
.site-content.contact .wrapper{background:url('../img/content_bg_contact.png') no-repeat right top transparent;height:692px;}
.site-content.contact .content-title{left:680px;}
.contact-form{float:left;margin-top:50px;overflow:hidden;width:682px;}
.contact-form .choose-title{clear:both;color:#8b8b8b;float:left;margin-bottom:10px;margin-left:18px;margin-top:46px;width:190px;}
.contact-form .product-choose{background:url('../img/deco_arrow.png') no-repeat 24px 160px transparent;float:left;min-height:500px;width:230px;}
.contact-form .product-choose .side-title{color:#2b2b2b;float:left;font-weight:700;padding:0 14px;margin-bottom:16px;margin-top:10px;}
.contact-form .product-choose .select-wrapper.product{margin-top:-14px;}
.contact-form .products-category,.contact-form .products-item{list-style:none;}
.contact-form .fields-data{border-left:1px dotted #5f5f5f;padding-left:30px;}
.contact-form .fields-data .contact-info{color:#8b8b8b;line-height:18px;margin-bottom:20px;width:388px;}
.contact-form .fields-data .contact-info a{color:#06b7ea;font-weight:700;text-decoration:none;}
.contact-form .input.text{height:69px;margin-top:-12px;overflow:hidden;}
.contact-form label{color:#8b8b8b;float:left;font-size:11px;line-height:69px;padding-left:48px;width:69px;}
.contact-form .required{color:#2e98d8;}
.contact-form input[type=text]{background:url('../img/input_text.png') no-repeat 0 0 transparent;border:0;color:#8B8B8B;font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:12px;padding:0 30px;height:69px;outline:0;width:230px;}
.contact-form .textarea{background:url('../img/textarea.png') no-repeat 117px 0 transparent;height:119px;margin-top:-12px;}
.contact-form textarea{background:transparent;border:none;color:#8B8B8B;font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:12px;height:70px;margin-left:14px;margin-top:13px;outline:0;padding:10px;resize:none;width:240px;}
.contact-form .select{margin-top:-12px;}
.contact-form .submit{float:right;padding-right:14px;width:230px;}
.contact-form .submit input{background:url('../img/submit.png') no-repeat 0 0 transparent;border:0;color:#fff;font-family:'Ubuntu',Tahoma,Arial,Helvetica,sans-serif;font-size:20px;height:58px;outline:0;padding-left:50px;text-align:left;text-transform:uppercase;width:216px;}
.contact-form .required-text{color:#8b8b8b;font-size:11px;padding-top:5px;}
.map-wrapper{float:right;position:absolute;right:9px;top:145px;width:242px;}
.map-wrapper #map{border:1px solid #a4a5a5;height:274px;width:240px;}
.map-mask{background:url('../img/map_mask.png') no-repeat 0 0 transparent;height:44px;left:0;position:absolute;top:232px;width:47px;}
.map-launcher{color:#fff;float:right;font-size:11px;font-weight:700;padding:8px 0;text-decoration:none;}
.map-launcher span{color:#06b7ea;}
/*=== Footer ================================================================*/
.site-footer{background:url('../img/footer_bg.jpg') repeat-x top center transparent;border-top:1px solid #4f4f4f;height:55px;line-height:50px;}
.site-footer p,.site-footer address{color:#939393;float:left;font-size:11px;font-style:normal;margin-right:2px;}
.site-footer p a{color:#06b7ea;text-decoration:none;}
.footer-links{color:#939393;float:right;font-size:11px;list-style:none;margin-right:4px;}
.footer-links li{float:left;}
.footer-links a{color:#939393;display:inline-block;padding:0 6px 0 8px;text-decoration:none;}
.footer-links .active a{color:#fff;}
.fb-like{float:right;margin-top:4px;width:80px;}
/* selectmenu */
.ui-selectmenu{color:#8f8f8f;font-size:11px;height:41px;margin:14px;outline:0;}
.ui-selectmenu .ui-selectmenu-status{line-height:41px;padding:0 12px;}
.ui-selectmenu .ui-selectmenu-icon{background:url('../img/select_icon.jpg') no-repeat 0 0 transparent;height:31px;margin-top:-16px;width:31px;}
.ui-selectmenu.ui-state-active .ui-selectmenu-icon{background-position:-31px 0;}
.ui-selectmenu-menu{background:#fff;padding:0 4px;}
.ui-selectmenu-menu a{border-top:1px solid #f0f0f0;color:#8f8f8f;font-size:11px;padding:8px;}
.form-message{font-weight:700;margin-bottom:10px;margin-top:-10px;}
.form-message.error{color:#c00;}
.form-message.success{color:#2686B3;}

附件:下载该文件资源,减少时间成本(增值服务)