不错的医院页面挂号下拉效果

不错的医院页面挂号下拉效果，仅供参考。

效果截图：

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>不错的页面挂号下拉效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>	
	$(function(){
		$("#gh").click(function(){
			$("#gha").slideDown("fast");
		});
		$(".gh_closed").click(function(){
			$("#gha").slideUp("fast");
		});
	});
</script>
<style>
ul, li {
	list-style:none;
	margin:0;
	padding:0
}
#gh {
	width:76px;
	height:28px;
	line-height:28px;
	text-align:center;
	border:1px solid #f37548;
	font-family:"Microsoft YaHei";
	font-size:12px;
	color:#f37548;
	margin-top:6px;
	float:right;
	cursor:pointer;
}
/*自助挂号样式*/
.gh_xl {
	width:100%;
	height:335px;
	position:absolute;
	top:50px;
	left:0px;
	z-index:2;
	background:#371e0b;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	display:none;
}
.gh_xla {
	width:990px;
	height:335px;
	position:relative;
	margin:0 auto;
}
.gh_1 {
	width:568px;
	height:29px;
	position:absolute;
	top:23px;
	left:219px;
	font-size:24px;
	line-height:29px;
	font-family:"Microsoft YaHei";
	color:#fff;
}
.gh_1 img {
	margin-top:2px;
	float:left;
}
.gh_closed {
	width:27px;
	height:27px;
	position:absolute;
	top:7px;
	right:0px;
	background:url(/demo/20140919/001/gh_close.gif) no-repeat;
	cursor:pointer;
}
.gh_2 {
	width:990px;
	height:219px;
	position:absolute;
	top:71px;
	left:0px;
	border-top:2px solid #533d2b;
	padding-top:21px;
}
.gh_2 ul li {
	width:246px;
	height:219px;
	float:left;
	border-right:1px solid #755f53;
	position:relative;
}
.gh_icon {
	top:0px;
	left:21px;
	position:absolute;
}
.gh_2_1 {
	top:0px;
	left:47px;
	position:absolute;
	font-size:18px;
	font-family:"Microsoft YaHei";
	color:#f37548;
}
a.gh_2_2 {
	width:100px;
	height:26px;
	border:1px solid #f37548;
	position:absolute;
	top:37px;
	left:47px;
	line-height:26px;
	text-align:center;
	font-size:12px;
	color:#f37548;
}
a.gh_2_2:hover {
	color:#f37548;
}
.gh_2_2 {
	position:absolute;
	top:74px;
	left:21px;
	font-size:14px;
	color:#fff;
}
.gh_2_text {
	width:210px;
	height:auto;
	line-height:18px;
	position:absolute;
	top:168px;
	left:21px;
	color:#b2b2b2;
	font-size:12px;
}
.gh_2_text span {
	color:#db5237;
	font-size:14px;
	height:54px;
	display:block;
	float:left;
	margin-top:2px;
	margin-right:3px;
}
.gh_2_3 {
	position:absolute;
	top:38px;
	left:21px;
	color:#fff;
	line-height:25px;
	font-size:14px;
}
.gh_2_3 span {
	font-size:18px;
	font-family:"Arial";
	color:#f37548;
}
.gh_bd {
	width:232px;
	height:121px;
	position:absolute;
	top:38px;
	left:21px;
}
.gh_bd ul li {
	width:232px;
	height:20px;
	line-height:20px;
	margin-bottom:10px;
	font-size:14px;
	color:#fff;
	border:none;
}
.gh_bd ul li input.email_color {
	color:#FFF;
}
.gh_bd ul li .text {
	float:left;
}
.gh_bd ul li input {
	width:154px;
	height:20px;
	float:right;
	background:#785f4d;
	border:none;
	padding-left:5px;
	color:#fff;
}
.gh_bd ul li select {
	width:75px;
	height:20px;
	background:#785f4d;
	border:none;
	float:right;
	color:#fff;
}
.gh_bd_btn {
	width:77px;
	height:26px;
margin-right:;
	border:1px solid #f37548;
	font-size:12px;
	background:none;
	color:#f37548;
	float:right;
	margin-right:82px;
	cursor:pointer;
}
.gh_wx {
	width:107px;
	height:106px;
	position:absolute;
	top:38px;
	left:47px;
}
/*自助挂号样式结束*/
</style>
</head>
<body>
<li id="gh">在线挂号 ↓</li>
<div class="gh_xl" id="gha">
  <div class="gh_xla">
    <div class="gh_1"> <img src="/demo/20140919/001/gh_1.gif">&nbsp;尊贵的客户，欢迎您使用XXX医院网络挂号系统！</div>
    <a class="gh_closed"> </a>
    <div class="gh_2">
      <ul>
        <li>
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon1.gif"></div>
          <div class="gh_2_1">人工在线挂号</div>
          <a class="gh_2_2" href="#" target="_blank">点击在线预约 →</a>
          <div class="gh_2_2">服务时间 8:00-24:00</div>
          <div class="gh_2_text"><span>*</span> 与客服人员取得联系，选择项目&amp;医生-时间及个人信息，即可成功预约。</div>
        </li>
        <li>
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon2.gif"></div>
          <div class="gh_2_1">电话挂号系统</div>
          <div class="gh_2_3"> 24小时预约专线<br>
            <span>021-1234567</span></div>
          <div class="gh_2_text"><span>*</span> 通过客服电话，可以轻松预约各科室专家及预订房产。</div>
        </li>
        <li style="width:268px;">
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon3.gif"></div>
          <div class="gh_2_1">邮件挂号系统</div>
          <form action="#" method="post" name="yjgh">
            <input type="hidden" name="dopost" value="save">
            <input type="hidden" name="channelid" value="17">
            <div style="display:none">
              <select name="typeid">
                <option value="0">请选择栏目...</option>
                <option value="84" class="option3" selected="selected">预约</option>
              </select>
            </div>
            <div class="gh_bd">
              <ul>
                <li>
                  <div class="text">您的姓名：</div>
                  <input name="username" type="text" class="email_color">
                </li>
                <li>
                  <div class="text">您的电话：</div>
                  <input name="phone" type="text" class="email_color">
                </li>
                <li>
                  <div class="text">您要预约：</div>
                  <select name="section">
                    <option value="" selected="selected" class="email_color">就诊科室</option>
                    <option value="产科">产科</option>
                    <option value="妇科">妇科</option>
                    <option value="儿科中心">儿科</option>
                    <option value="国际医疗">国际医疗</option>
                    <option value="不孕不育">不孕不育</option>
                    <option value="计划生育">计划生育</option>
                    <option value="其他疾病">其他疾病</option>
                  </select>
                  <input name="jiuzhendate" style="margin-right:10px;width:69px;" value="预约时间" class="email_color">
                </li>
              </ul>
              <input type="submit" value="提交预约 →" class="gh_bd_btn">
            </div>
            <input type="hidden" name="dede_addonfields" value="username,text;phone,text;section,select;jiuzhendate,text;">
          </form>
          <div class="gh_2_text"><span>*</span> 写信提交后，客服人员将给你回电确认预约信息。</div>
        </li>
        <li style="width:226px; border-right:none;">
          <div class="gh_icon"><img src="/demo/20140919/001/gh_icon4.gif"></div>
          <div class="gh_2_1">微信挂号系统</div>
          <div class="gh_wx"><img src="/demo/20140919/001/gh_wx.jpg"></div>
          <div class="gh_2_text"><span>*</span> 扫描微信二维码添加官方微信为好友，发送姓名+电话+预约项目&amp;医生+时间，即可挂号。</div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

随机推荐

最新获取访客QQ接口—20140915
最新获取访客QQ接口,分析某网站代码得到的最新获取访客QQ的接口，接口地址： http://x.pet.qq.com/vip_platform?cmd=entercallback=aaa 复制代码代码如下: script window.www120mubancom = scriptfunction aaa(obj){parent.qq(obj);}\/scriptscript src=htt
JS闪屏代码,闪瞎你的眼睛
JS恶搞代码，页面底色在黑与白之间快速切换，产生闪烁效果。JS闪屏代码,闪瞎你的眼睛。
nTabs纯JS实现的标签切换功能代码
nTabs纯JS实现的标签切换功能代码，使用非常方便。
使用新浪获取IP所在地接口做网站跳转
使用新浪获取IP接口做网站跳转 title使用新浪获取IP接口做网站跳转/title !--引用新浪IP获取接口-- script type=text/javascript src=http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js/script !--引用新浪IP获取接口-- script type=text/javas
JS实现百叶窗效果
JS实现百叶窗效果，适合做专家介绍，设备技术等介绍效果。效果演示中使用的是纯色图片，将对应的图片替换即可。引用slider.js文件在底部调用初始化代码script type=text/javascriptslider.init();/script ，演示效果中为方便起见将slider.js中的代码整合到

不错的医院页面挂号下拉效果

相关文章

随机推荐